はじめに
前回までに、AWS Amplify Gen2 のスターターテンプレートを使って Next.js（App Router）アプリをデプロイし、簡易ログイン UI も追加しました。
今回は 本番環境に影響を与えず にバックエンド開発ができるAmplifyの「Sandbox」を作ってみたので、その備忘録です。
まとめ
- Amplify Sandbox とは：ローカルでコードを書くだけで Amplify Backend が “一時的に” 自動デプロイされる、開発専用のクラウド環境
- 本番環境を汚さずに、ローカル起点でバックエンド開発・検証できる
- 変更検知でバックエンドも再構築されるので、開発がかなり楽
サンドボックスを作成する
Amplify のプロジェクト配下で、まずは Sandbox 作成コマンドを実行します。
npx ampx sandbox
すると、手元では以下のエラーが出ました。
InvalidCredentialError: Failed to load default AWS region
Resolution: To configure a new Amplify profile, use npx ampx configure profile.
Cause: Region is missing
メッセージどおり、Amplify 用の profile を作成します。
npx ampx configure profile
? Do you already have IAM User credentials? y
? Enter Access Key ID:
? Enter Secret Access Key:
? Enter the AWS region to use with the 'default' profile (eg us-east-1, us-west-2, etc): ap-northeast-1
Created profile default successfully!
成功すると、~/.aws/credentials と ~/.aws/config に default が追加されます。
# .aws/credentials
[default]
aws_access_key_id = xxxxxx
aws_secret_access_key = xxxxxx
# .aws/config
[default]
region = ap-northeast-1
既にプロファイルがある場合は、プロファイル名の指定もできます。
npx ampx sandbox --profile プロファイル名
あらためて Sandbox を起動します。
npx ampx sandbox
If you don’t want to see a notice anymore, use "cdk acknowledge <id>". For example, "cdk acknowledge 34892".
[Sandbox] Watching for file changes...
File written: amplify_outputs.json
無事にサンドボックスをデプロイすることができました。
AWSのコンソール上からもサンドボックスが作成されていることが確認できます。
サンドボックスの動作確認
せっかくなので、モデルをちょっと変更して動作確認してみます。
今回は Todo に message を追加します。
モデル定義を更新する
// amplify/data/resource.ts
const schema = a.schema({
Todo: a
.model({
content: a.string(),
message: a.string(), // add
})
.authorization((allow) => [allow.publicApiKey()]),
});
フロントも追加したmessageの対応を書きます。
// amplify/app/page.tsx
function createTodo() {
client.models.Todo.create({
content: window.prompt("Todo content"),
message: window.prompt("message"), // add
});
}
ファイルを保存すると、Sandbox側が変更を検知してバックエンドが再構築されます。
さらにフロントの変更は Next.js のホットリロードで即時反映されます。
実際に message の入力欄が追加され、入力した文言が表示できました。
後片付け
Sandbox は Ctr + C で終了でき、終了時に作成したリソースを削除するか聞かれます。
AWSのマネジメントコンソールからも削除ができます。
Would you like to delete all the resources in your sandbox environment (This cannot be undone)? (y/N) y
If you don’t want to see a notice anymore, use "cdk acknowledge <id>". For example, "cdk acknowledge 34892".
[Sandbox] Finished deleting.
コマンドで削除することも可能です。
npx ampx sandbox delete
おわりに
Amplify Sandbox は「本番に影響を出さずに backend を気軽に試す」用途にかなり相性が良さそうでした。
特に、スキーマをいじりながら動作確認したいときに、環境準備のコストが少ないので助かります。