2020-01-22

AWS CDKのTHE TYPESCRIPT WORKSHOPをやった

tech

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のログを確認して直していきましょうねってなってるのはめっちゃいいな。しかも２回ミスらせるのは面白い Lambda functionへのpermission付与は自分でググってコード書いて答え合わせすると勉強になる

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

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

2020-01-15

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

tech

最近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にするとかできそう