Codecommit を使用して Amplify Gen2 を開始する
概要
AWS Amplify の第二世代が一般公開されて、しばらく経ちました。
やってみた系記事もいくつか登場し、とっつきやすくなりました。
（やってみた系記事二もある通り）公式ドキュメントに Quickstart が用意されており、サッと利用開始できます。
パッと見た感じ、いずれもコードリポジトリに Github を使用しているように見受けられました。
Codecommit を使用する場合はどうだろう？と思い、やってみました。
話さないこと
- Codecommit の始め方
- Amplify Gen2 の概要説明
おおまかな流れ
- Codecommit に新規リポジトリを作成する
- Next.js のスタートアプリケーションを作成する
- Amplify Gen2用に色々設定する
- Next.js アプリケーションをコードコミットへプッシュする
- Amplify アプリケーションを作成する
1. Codecommit に新規リポジトリを作成する
Codecommit にて新規リポジトリを作成します。
（リポジトリの作成及びローカルへのクローン方法は、以下公式ドキュメントを参照）
2. Next.js のスタートアプリケーションを作成する
ローカル環境にて、 Next.js アプリケーションを新規作成します。
npx create-next-app@latest
今回は、App Router を選択します。
それ以外の設定項目は、任意。
3. Amplify Gen2用に色々設定する
ビルドに必要なモジュールを追加します。
yarn add -D cdk aws-cdk-lib constructs
Amplify バックエンドの構築に必要なモジュールを追加します。
yarn add -D @aws-amplify/backend @aws-amplify/backend-cli
yarn でモジュールを追加する場合、 package-lock.json は削除しておきます。
rm package-lock.json
最低限のAmplify バックエンドを設定します。
-
作成したNext.js直下に
amplifyディレクトリを作成 -
amplify/backend.tsファイルを作成し、以下を記述
import { defineBackend } from "@aws-amplify/backend";
defineBackend({});
ここまでの設定に問題が無ければ、以下のコマンドが成功するはずです。
npx ampx sandbox
...
✨ Total time: 6.78s
[Sandbox] Watching for file changes...
File written: amplify_outputs.json
4. Next.js アプリケーションをコードコミットへプッシュする
作成した Next.js アプリケーションの Git 設定に、 作成したcodecommitリポジトリ をリモートリポジトリとして追加します。
詳細は、以下公式ドキュメントをご確認ください。
作成したアプリケーションをコミットし、リモートリポジトリへプッシュします。
5. Amplify アプリケーションを作成する
AWS マネジメントコンソールから Amplify ページへ移動し、「新しいアプリを作成」を選択します。
Gitプロバイダー選択時に Codecommit を選択します。
作成したcodecommitリポジトリを選択し、変更を監視するブランチを選択します。
（ここで設定したブランチに変更を加えると、自動でビルド&デプロイが走るようになります）
Amplify アプリケーションの設定を入力します。
手順通りにアプリケーションを作成していると、大部分を自動で入力してくれます。
今回は、値を変更せず、このまま進めます。
確認画面に進みます。
問題が無いことを確認し、「保存してデプロイ」へ進みます。
自動でビルド&デプロイが進行します。
成功すると、「デプロイ済み」となります。
おわりに
Codecommit でも、Amplify Gen2 は問題なくデプロイできました。
ただし、一部機能（具体的には「プレビュー機能」）が制限されます。
サポートされている機能や、Quickstartの存在から、基本は Github を使用するとよさそうです。
遭遇したエラー
Cause: Error: Multiple package lock files found: .../yarn.lock, .../package-lock.json. Please specify the desired one with depsLockFilePath
◆原因
lockファイルが二種類存在します。
◆対処
yarn.lock または package-lock.json のどちらかを削除します。
-
yarnをメインで使用するなら、package-lock.jsonを削除 -
npmをメインで使用するなら、yarn.lockを削除
Error: Cannot find module 'aws-cdk-lib/aws-dynamodb'
◆原因
aws-cdk-lib モジュールが不足しています。
◆対処
aws-cdk-lib モジュールを追加します。
yarn add -D cdk aws-cdk-lib
FileConventionError: Amplify Backend not found in .../src/{アプリケーション名}
◆原因
Amplify バックエンドの最低限の設定すら存在しません。
◆対処
3. Amplify Gen2用に色々設定する に沿って、最低限のAmplify バックエンドを設定します。
UnknownFault: Error: ... Command "cdk" not found
◆原因
cdk モジュールが不足しています。
◆対処
cdk モジュールを追加します。
yarn add -D cdk
参考文献
- https://docs.amplify.aws/nextjs/
- https://qiita.com/moritalous/items/76a05676a564960ac974
- https://zenn.dev/nenenemo/articles/9fa30ef05ffb4d
- https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/getting-started.html
- https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/how-to-connect.html
Discussion