$shibayu36->blog;

株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。

AWS CDKのTHE TYPESCRIPT WORKSHOPをやった

AWS CDKについて学んでおこうと、https://cdkworkshop.com/20-typescript.html をやった。

  • CDKめっちゃいいやん今後絶対使っていきたいという感想
  • CloudFormationでは、IAMのロールをドキュメントをにらめっこしながら作って、そのロールをこのLambda Functionに付与して...みたいに結構難しく思いながらやっていたのが、CDKだと直感的に書き下せてよかった
    • あるLambda Function AからLambda Function Bのinvokeを許可するとかだったら、funcB.grantInvoke(funcA); って書くだけで、いい感じにIAM Roleとか作って付与してくれる
  • コード化されていて補完が効くため、ドキュメント見なくても出来そうなことが分かるし、定義ジャンプすると型定義にドキュメント載っている
  • constructというレベルで共通化がしやすく、社内で共有したい設定を作りやすく、社外にも公開しやすい
  • cdk diffやcdk deployが普通に使いやすい

とにかく良かった。CloudFormationを触ってたときはとにかくハマってたけど、それよりかはスムーズに構築が出来そう。

メモ

https://cdkworkshop.com/20-typescript/20-create-project/500-deploy.html

cdk bootstrapしないと通知に必要なS3リソースなどが作られない

cdk deployでデプロイ出来る。 cdk diffすると、deployしているものと、今の設定の差分が見れる

https://cdkworkshop.com/20-typescript/40-hit-counter/100-api.html

Constructというレベルで抽象化する

Use the hit counter :: AWS Cloud Development Kit (AWS CDK) Workshop

今ここまで。curlしてもISEが出る CloudWatchのログを確認して直していきましょうねってなってるのはめっちゃいいな。しかも2回ミスらせるのは面白い Lambda functionへのpermission付与は自分でググってコード書いて答え合わせすると勉強になる

https://cdkworkshop.com/20-typescript/50-table-viewer/500-deploy.html

cdkを使うことでモジュール化がしやすくなっているのはありがたい。CloudFormation使っているときは結構やりづらかったなと

Next.jsのドキュメントを全部読んでみた

最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。


https://nextjs.org/docs/routing/introduction#dynamic-route-segments

pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか!ただ全部吸い込まれるのは使いづらそう


https://nextjs.org/docs/routing/shallow-routing

router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', null, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

https://nextjs.org/docs/api-routes/introduction

api routesはヘルスチェックエンドポイントとか作るのに便利そう


https://nextjs.org/docs/api-routes/api-middlewares

api限定の設定を入れられる

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

micro middleware を使えばハンドラを拡張できる

import Cors from 'micro-cors'

const cors = Cors({
  allowMethods: ['GET', 'HEAD'],
})

function handler(req, res) {
  res.json({ message: 'Hello Everyone!' })
}

export default cors(handler)

https://nextjs.org/docs/api-routes/response-helpers

Next.jsのresにはres.jsonなど便利メソッドが生えている


https://nextjs.org/docs/deployment

サーバサイドのデプロイは、.next、node_modules、package.jsonを配置したら良い

Generally you'll have to follow these steps to deploy to production:
        Run npm install
        Run npm run build (runs next build)
        Potentially copy the .next, node_modules, and package.json to your server.
        Run npm run start (runs next start) on the server

https://nextjs.org/docs/advanced-features/dynamic-import

dynamic importを、使って一部だけssrしないようにできる

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

https://nextjs.org/docs/advanced-features/custom-document

  • documentをいじればheadとかを置き換えられる
    • favicon変えたり、apple-touch-icon入れたりと色々できそう
  • DocumentのgetInitialPropsは、SSR時にしか使われない模様

https://nextjs.org/docs/api-reference/next/head

head内のタグは、key propを付けることで、同じkeyなら上書きという挙動ができる。タグが複数付くことを防げる。


https://nextjs.org/docs/api-reference/data-fetching/getInitialProps getinitialpropsに渡ってくるもの

  • pathname - Current route. That is the path of the page in /pages
  • query - Query string section of URL parsed as an object
  • asPath - String of the actual path (including the query) shown in the browser
  • req - HTTP request object (server only)
  • res - HTTP response object (server only)
  • err - Error object if any error is encountered during the rendering

https://arunoda.me/blog/ssr-and-server-only-modules webpack analyzerを使って、bundle sizeを検証することができる


https://nextjs.org/docs/api-reference/next.config.js/introduction 設定できるリストへの参照がここに載ってる


https://nextjs.org/docs/api-reference/next.config.js/environment-variables env設定で環境変数を設定できる

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config next.config.jsのwebpackの設定に渡ってくる引数

The second argument to the webpack function is an object with the following properties:
        buildId: String - The build id, used as a unique identifier between builds
        dev: Boolean - Indicates if the compilation will be done in development
        isServer: Boolean - It's true for server-side compilation, and false for client-side compilation
        defaultLoaders: Object - Default loaders used internally by Next.js:
        babel: Object - Default babel-loader configuration

https://nextjs.org/docs/api-reference/next.config.js/configuring-the-build-id build idを生成する関数を定義できる。gitのrevisionにするとかできそう

最近連載開始して3巻程度で好きな作品たち

社内の朝会のスピーチで発表したのを公開しておく。

漫画の連載追いかけるの好きです。最近連載が始まって単行本3巻程度のもので、好きな作品を紹介します。

大ダーク・1巻

大ダーク (1) (ゲッサン少年サンデーコミックス)

大ダーク (1) (ゲッサン少年サンデーコミックス)

  • 作者:林田 球
  • 出版社/メーカー: 小学館
  • 発売日: 2019/11/12
  • メディア: コミック

  • ダークファンタジーの設定が良いし絵が最高
  • ドロヘドロの作者の新連載
  • ドロヘドロも2巻から爆発的に面白くなった漫画だけど、大ダークもそのような雰囲気を感じて楽しみにしてる

夏目アラタの結婚・1巻

夏目アラタの結婚 (1) (ビッグコミックス)

夏目アラタの結婚 (1) (ビッグコミックス)

  • 殺人鬼と面会室ごしに恋愛していく(????)話。サスペンスっぽい。ハラハラします
  • 医龍の作者の新連載

スキップとローファー・2巻

スキップとローファー(2) (アフタヌーンコミックス)

スキップとローファー(2) (アフタヌーンコミックス)

  • ほわほわしてて癒やされる。主人公がいい子。
  • 疲れているときに見て良かった

アンサングシンデレラ・3巻

  • 僕にとってあまり職種として馴染みのない薬剤師のことがわかって面白い

水は海に向かって流れる・2巻

  • シェアハウスに住んだら、親の元不倫相手の子供がいたという話
  • 子供はわかってあげない」の作者の新連載で、同様にボーイ・ミーツ・ガール的?

おとなになっても・1巻

おとなになっても(1) (KC KISS)

おとなになっても(1) (KC KISS)

猫が西向きゃ・1巻

猫が西向きゃ(1) (アフタヌーンKC)

猫が西向きゃ(1) (アフタヌーンKC)

  • ”フロー”と呼ばれる奇妙な自然現象(三叉路が七叉路に増殖してるとか)が存在して、それを処理するフロー業者がいるって話
  • 蟲師の人の新連載

まとめ

面白い漫画なかなか見つけられないので、おすすめあったら教えてください!