まいど。制作部の花島です。
最近、ワクワクしながら、開発ができているので、シェアしたいと思います。
今はFlutterに興味が集中しているのですが、ひょんなことからNextを触り出し楽しかったので共有です。
ある案件で表示を早くしたいとなり、
SSGができるNextを使おうとなりました。事前に動画を取得し動画一覧の静的ページを作り、動画詳細も事前に静的ページを生成。getStaticPathsとgetStaticPropsのコラボです。
デプロイもしたいよねとなり、
AWSのAmplifyを使おうとなりました。
次に動画一覧を作っているので、動画をアップロードしたら、Nextをビルドしたいようねとなり、
ビルドを指示できるAmplifyのwebhookを用いて、ビルドを。
Route53で取ったドメインもこのサイトで設定したいとなり、Amplifyのカスタムドメイン設定で。
この状態で
NextとAWSのAmplifyが面白く。
じゃぁ、次はログインでSSOをやりたいねとなり、
Cognitoのユーザープールを使い、NextAuthでCognito連携を。
ここでもNextAuthとCognitoの凄さに感動し、
じゃぁ、本番環境はAzureADでもSSOしたいねとなり、
なんと!!と思ったのも束の間、
Cognitoが外部IdPを簡単に設定できるとわかり、NextAuth + Cognito + AzureADでできる。
Cognitoの賢さに惚れ惚れしました。
あ、動画ファイルはCloudFrontから配信しているけど、他の人には見られたくないよね。
今まで通り、CloudFront 署名付き Cookieを使う。
あ、どうやって、Cognitoのログイン時にCloudFront 署名付き Cookieを使おうかと悩んだその数分後、
なんと、congnitoでログイン後にイベントをかませるので、LambdaでCloudFront 署名付き Cookieを返そうと思い、
レスポンスもCognitoで変更できるので、ログインのレスポンスでCloudFront 署名付き Cookieを入れ込む。
もちろん、NextAuthのcallbackを使い、ログインした後、フロント側でCloudFront 署名付き Cookieをnookiesでサクッと保存。
この短期間で
Next + React + TypeScript + Cognito + NextAuth + AzureAD + CloudFront + Lambdaの賢さに惚れ惚れしました。
楽しいです。
今回ももちろん、田島さんを巻き込みました。
https://vitalify.jp/blog/wp-admin/post.php?post=31114&action=edit
では
