最近AWSでフロントエンドのアプリをホスティングする時はAWS Amplifyを使うようになりました。 ただ、AmplifyのGUIからポチポチしていると複数環境、複数アプリで同じことをやるのは面倒です。 CloudFormationは個人的にはまだ苦手意識があるので、慣れた言語で書きやすいAWS CDKで環境を作ろうという話です。
以下のブログ記事を参考にしています。
ホスティングするアプリを作る
簡単に考えるために、SSRのない静的サイトのフロントエンドアプリを作ります。 この記事ではサンプルとしてNext.jsで作成します。
$ npx create-next-app nextjs-blog --use-npm
アプリを作成したら静的サイトを出力するために package.json の "build" スクリプトを、
"build": "next build && next export" に書き換えておきます。
これで npm run build を実行すると、out ディレクトリにAmplifyでホスティングする静的サイトのファイルが出力されます。
CDKのスタックを作る
続いてアプリケーションのプロジェクトルートでAWS CDKのスタックを作成します。
雛形は cdk コマンドで作成しますが、グローバルインストールしたくないので npx コマンド経由で実行します。
$ npx -p aws-cdk cdk init --language typescript $ tree -L 1 amplify amplify ├── README.md ├── bin ├── cdk.json ├── cdk.out ├── jest.config.js ├── lib ├── node_modules ├── package-lock.json ├── package.json ├── test └── tsconfig.json 5 directories, 6 files
雛形が作成されたら、libディレクトリの下のスタックを編集します。
AWS CDK stack to create repository and applicatio…
編集したら npm run cdk deploy をキックするだけ。
環境作成直後はまだビルドがキックされません。リポジトリにコミットをプッシュすれば自動で動き出します。
ここで気をつけて欲しいのは、Gitリポジトリのルートに amplify.yaml を配置する必要があることです。
未検証ではありますが、ドキュメントを読むとCDK側にビルド定義(buildSpec)を記載すればルートにファイル配置しなくてもよいです。
なお、CDKのAmplifyモジュールのConstructはまだExperimentalのステータスです。最新の情報は公式ドキュメントを参照ください。
CloudFormationと比較する
ちなみにCloudFormationで全く同じリソースを作成する場合、テンプレートは以下のようになります。
作るリソースが少ないのでこれでも理解しやすいですが、CDKの方がシンプルなのが分かります。 行数にしてCDKが約30行、CloudFormationが約90行なのでCDKの方が1/3の記載に短縮できています。
AWS Amplify application stack. Once pushed your s…
以上。
