AWS CDK x ReactでLIFFアプリ LINE Monthly LT #3 2022/6/29

自己紹介 とっく(@tokkuu) ● ミロゴス株式会社のエンジニア ● php/python/TypeScript ● AWS周り 3-tierからサーバレスまで ● 元々はSIerのインフラエンジニア ● LINE API歴は半年くらい 2

はじめに ● 前提知識 ○ AWSリソース(CloudFront/S3) ○ CloudFormationの概要(json or yamlでテンプレートを書いてスタック作成 ) ○ LINE Developersコンソールの操作・liffについて ● このスライドの元ネタ ○ https://zenn.dev/tokku5552/articles/liff-cdk-create ● 参考 ○ https://developers.line.biz/ja/docs/liff/ 3

AWS CDKとは ● AWSが提供するIaC(Infrastructure as Code)ツールの一つ ○ CloudFormationのテンプレートを作成し、デプロイしてくれるツール ● CloudFormationが対応しているものは対応していると考えて良い ○ サーバーレスでないリソースも作れる ● 特徴はjsonやyamlではなく、プログラミング言語でインフラを記述できるところ。 ○ IDEの補完などの補助機能が使える。画像は TypeScriptの場合の例 4

AWS CDK×Reactでのliffのはじめかた

構成 ● AWS CDKがCloudFormationの スタックを作成 ● CloudFrontとS3バケットが 作成される ● liffのコードもビルドしたものをcdkで デプロイ 6 ・リポジトリ 　https://github.com/tokku5552/liff-cdk-sample

AWS CDK × Reactでのliffのはじめかた ● cdk init ○ cdkの雛形が作られる ○ サーバーレスな構成でアプリケーションコードと一緒に管理するときは cdkのプロジェクト構成がトップにあったほうがやりやすい。 ● create-liff-app ○ プロジェクトルートで実行するが、途中で聞かれる project nameのフォルダが 勝手に切られ、その下に作成される。（好都合） ● ここまででyarn devでliffが起動&cdk deployでデプロイできる ○ cdkはstackを定義していないので、 liffがデプロイされるわけではないが ローカルの環境構築はこれだけ 7

フォルダ構成 . ├── README.md ├── bin/ │ └── liff-cdk-sample.ts ├── cdk.json ├── cdk.out/ ├── lib/ │ └── liff-cdk-sample-stack.ts ├── liff-app/ │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.css │ │ ├── App.tsx │ │ ├── favicon.ico │ │ ├── main.tsx │ │ └── vite-env.d.ts │ ├── vite.config.ts ├── package.json └── tsconfig.json 8 ● cdk init でbin,lib,cdk.jsonなどが作られる ○ binがcdkコマンドのエントリポイント ○ libの下にスタックのコードを置いていく ● create-liff-appではproject nameで指定した フォルダが作られる ○ その下はviteというビルドツールで Reactの雛形の構 成が生成されている ○ cd liff-app && yarn devでliffアプリがローカルで起 動する

stackの記述 export class LiffCdkSampleStack extends Stack { constructor(scope: Construct, id: string, props?: StackProps) { super(scope, id, props); const liffAppBucket = new s3.Bucket(this, 'LiffAppBucket', { websiteIndexDocument: 'index.html' }); const liffAppDistribution = new cloudfront.CloudFrontWebDistribution(this, 'LiffAppDistribution', { originConfigs: [ { s3OriginSource: { s3BucketSource: liffAppBucket, originAccessIdentity: liffAppIdentity }, behaviors: [{isDefaultBehavior: true}] } ], }) Stackを継承したclassの中の constructorに作りたいリソースを 書いていく 前段で作成したS3バケットを変数に入 れておき、CloudFrontのオリジンに渡し ている。これで連携可能 9 ※途中省略しています

デプロイ npx cdk deploy CloudFormationのスタックが作られる 10

liffアプリ起動🎉 11

まとめ ● liffアプリをAWS上で、Reactで作る場合はAWS CDKがおすすめ ● CDKならホスティングのみならず、API Gateway + Lambda + DynamoDBみたいな 構成もかなり短く記述できる ● とにかくAWS CDKオススメです！！！！ ご清聴ありがとうございました