AWS CDK × Reactでliffをつくる

AWS CDK × Reactでliffをつくる

1. AWS CDK x ReactでLIFFアプリ LINE Monthly LT #3 2022/6/29
2. 自己紹介 とっく(@tokkuu) • ミロゴス株式会社のエンジニア • php/python/TypeScript • AWS周り 3-tierからサーバレスまで • 元々はSIerのインフラエンジニア • LINE API歴は半年くらい 2
3. はじめに • 前提知識 ◦ 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
4. AWS CDKとは • AWSが提供するIaC(Infrastructure as Code)ツールの一つ ◦ CloudFormationのテンプレートを作成し、デプロイしてくれるツール • CloudFormationが対応しているものは対応していると考えて良い ◦ サーバーレスでないリソースも作れる • 特徴はjsonやyamlではなく、プログラミング言語でインフラを記述できるところ。 ◦ IDEの補完などの補助機能が使える。画像は TypeScriptの場合の例 4
5. AWS CDK×Reactでのliffのはじめかた
6. 構成 • AWS CDKがCloudFormationの スタックを作成 • CloudFrontとS3バケットが 作成される • liffのコードもビルドしたものをcdkで デプロイ 6 ・リポジトリ 　https://github.com/tokku5552/liff-cdk-sample
7. AWS CDK × Reactでのliffのはじめかた • cdk init ◦ cdkの雛形が作られる ◦ サーバーレスな構成でアプリケーションコードと一緒に管理するときは cdkのプロジェクト構成がトップにあったほうがやりやすい。 • create-liff-app ◦ プロジェクトルートで実行するが、途中で聞かれる project nameのフォルダが 勝手に切られ、その下に作成される。（好都合） • ここまででyarn devでliffが起動&cdk deployでデプロイできる ◦ cdkはstackを定義していないので、 liffがデプロイされるわけではないが ローカルの環境構築はこれだけ 7
8. フォルダ構成 . ├── 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アプリがローカルで起 動する
9. 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 ※途中省略しています
10. デプロイ npx cdk deploy CloudFormationのスタックが作られる 10
11. liffアプリ起動🎉 11
12. まとめ • liffアプリをAWS上で、Reactで作る場合はAWS CDKがおすすめ • CDKならホスティングのみならず、API Gateway + Lambda + DynamoDBみたいな 構成もかなり短く記述できる • とにかくAWS CDKオススメです！！！！ ご清聴ありがとうございました