Amazon Web Services ブログ

[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 でお届けします」というセッションをお届けしました。セッションは 2022/06/30 までの間、こちらからオンデマンド配信で見ることができます(サインインが必要です)。

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

作成したWebアプリのoverview

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

CDK Pipelineに移行する図

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

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

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

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

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

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

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ごとに下記のような機能、プラグインがあります。

終わりに

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

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

最後に

Q. RTA 完走おめでとう!

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