[AWS Summit Online Japan 2022 Developer Zone]「AWS CDK で CI/CD つきの Web アプリを作ろう！開発風景を Live Coding でお届けします」オンデマンド配信と QA 公開

こんにちは！Prototype Engineer の工藤です。

先日 (2022/05/25) AWS Summit Online の Developer Zone にて、「AWS CDK で CI/CD つきの Web アプリを作ろう！開発風景を Live Coding でお届けします」というセッションをお届けしました。

セッションに使用した資料は こちら にあります。

本セッションではグラフを表示する Web アプリと CI/CD パイプラインを、4つの CDK スタックに分けて実装するLive Coding を行いました。

CI/CD パイプラインの導入では、既存のソースコードを CDK Pipelines を使ったデプロイに移行する方法について説明しました。

LiveCoding で使用したソースコードは GitHub で公開しています。また以下の URL から、それぞれの工程のソースコードの差分を見ることができます。

• プロジェクト作成 -> Backend
• Backend -> API
• API -> Frontend
• Frontend -> Pipelines

ここから、当日チャットや Twitter でいただいたコメントについてお答えします。

Q. ターミナルは tmux ですか？

iTerm2 + tmux + zsh です (高野)。

Q. サービスごとのテンプレートまたは、よくあるアーキテクチャのサンプルはありますか？

よく使われる構成のテンプレートとしては、セッション中でもご紹介した Construct Hub があります。実装のサンプルとしては、Baseline Environment on AWS (BLEA) がおすすめです。参考になるリンクをまとめました。

• Construct Hub
  • Construct Hub
  • Construct Hub と AWS Cloud Development Kit Version 2 の一般提供を発表
• BLEA
  • GitHub: aws-samples/baseline-environment-on-aws
  • AWS環境にセキュアなベースラインを提供するテンプレート「Baseline Environment on AWS」のご紹介
  • テンプレートによる AWS環境のガバナンス〜 Baseline Environment on AWS 徹底解説 〜(AWS-22)
• AWS Samples
  • GitHub: aws-samples/aws-cdk-examples
• ドキュメント
  • API Reference – AWS CDK

Q. CodeBuild で cdk deploy する際の権限周りについて知りたいです

CDK Pipelines を使用する場合、CodeBuild に付与する IAM Role は自動的に生成されます。カスタマイズが必要な場合は CDK Pipelines のドキュメントをご参照下さい。また、クロスアカウントでのデプロイを行う場合は cdk bootstrap の --trust または --trust-for-lookup オプションを使用して事前に設定しておく必要があります。CDK Pipelines の使い方についてはこちらの記事をご参照ください。

CDK Pipelines を使用せず、 CodeBuild で cdk deploy コマンドによってデプロイを行う場合は、--role-arn オプションによって CloudFormation の実行ロールを指定することができます。これによって、CodeBuild プロジェクトのロールにリソースを作成する権限を直接付与せずにデプロイを実行できます。

Q. 事前に実行したコマンドについて教えて下さい

事前に実行したコマンドは以下になります。

BackendStack

スライド内ではスペースや読みやすさの都合上、ESLint のプラグインなどを省略していました。以下が全体になります。最初の npx aws-cdk init コマンドは最新の CDK Toolkit をインストールしながら実行します。検証は aws-cdk@2.20.0 で行いましたので、バージョンをあわせる場合は明示的に指定が必要になります

# CDK プロジェクトを作成
$ npx aws-cdk init app --language=typescript
# CDK bootstrapping (アカウントとリージョンごとに実行)
$ npx cdk bootstrap
# ESLint, Prettier をインストール
$ npm i -D prettier \
    eslint \
    eslint-config-prettier \
    eslint-config-react-app \
    eslint-plugin-react \
    @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser
# 設定ファイルを作成
touch .eslintrc.json \
    .eslintignore \
    .prettierrc.json \
    .prettierignore \
    .editorconfig \
    .gitattributes

FrontendStack

# React プロジェクトを作成
$ npx create-react-app dashboard --template typescript
# ライブラリのインストール (React プロジェクト)
$ npm i -P chart.js react-chartjs-2 luxon @types/luxon url-join @types/url-join
# ライブラリのインストール (CDK アプリ)
$ npm i @aws-solutions-constructs/aws-cloudfront-s3@2

Q. Vim の設定とプラグインについて教えて下さい

Vim で AWS CDK for TypeScript を快適に書くための 12 のプラグイン の記事で公開しています。

Q. Go で kill シグナル受け取るコードを見たいです

Go で kill シグナルを受け取っている部分は、この辺りで定義しています。

またこちらの記事に、言語別にシグナルをハンドリングするコードのサンプルが掲載されています。

Q. AWS CDK を補完してくれる IDE の機能はありますか？

各IDEごとに下記のような機能、プラグインがあります。

• Vim
  • Vim で AWS CDK for TypeScript を快適に書くための 12 のプラグイン
• Visual Studio Code
  • AWS Toolkit for Visual Studio Code
  • Visual Studio Code Marketplace: AWS Toolkit
• IntelliJ
  • IntelliJ IDEA: TypeScript Support
  • JetBrains Marketplace: AWS Toolkit

終わりに

45分という短い時間の Live Coding でしたが、とても多くの方にご覧いただき、大変ありがたく感じております。

ご参加いただいた皆様、ありがとうございました！

最後に

Q. RTA 完走おめでとう！

ありがとうございます！！