Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AWS CDK × Reactでliffをつくる

AWS CDK × Reactでliffをつくる

AWS CDK × Reactでliffをつくる

tokku5552

June 29, 2022
Tweet

More Decks by tokku5552

Other Decks in Programming

Transcript

  1. はじめに • 前提知識 ◦ 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
  2. AWS CDKとは • AWSが提供するIaC(Infrastructure as Code)ツールの一つ ◦ CloudFormationのテンプレートを作成し、デプロイしてくれるツール • CloudFormationが対応しているものは対応していると考えて良い

    ◦ サーバーレスでないリソースも作れる • 特徴はjsonやyamlではなく、プログラミング言語でインフラを記述できるところ。 ◦ IDEの補完などの補助機能が使える。画像は TypeScriptの場合の例 4
  3. AWS CDK × Reactでのliffのはじめかた • cdk init ◦ cdkの雛形が作られる ◦

    サーバーレスな構成でアプリケーションコードと一緒に管理するときは cdkのプロジェクト構成がトップにあったほうがやりやすい。 • create-liff-app ◦ プロジェクトルートで実行するが、途中で聞かれる project nameのフォルダが 勝手に切られ、その下に作成される。(好都合) • ここまででyarn devでliffが起動&cdk deployでデプロイできる ◦ cdkはstackを定義していないので、 liffがデプロイされるわけではないが ローカルの環境構築はこれだけ 7
  4. フォルダ構成 . ├── 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アプリがローカルで起 動する
  5. 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 ※途中省略しています
  6. まとめ • liffアプリをAWS上で、Reactで作る場合はAWS CDKがおすすめ • CDKならホスティングのみならず、API Gateway + Lambda +

    DynamoDBみたいな 構成もかなり短く記述できる • とにかくAWS CDKオススメです!!!! ご清聴ありがとうございました