🗄️

AWS Amplify Gen2をチュートリアルで体験する３

2024/08/16に公開

AWS

Amplify

tech

前回のつづき

今回は、Amplify Gen2の目玉機能？のサンドボックスを試します。

前回、ローカル環境を構築して、機能を追加してローカルで確認後、本番環境にデプロイしました。実際にやっていて分かったと思いますが、この方法だと本番環境のDynamoDBテーブルにテストデータを追加＆削除してます。
また、直接mainブランチで作業してます。実際の開発ではブランチで作業して、プルリクしてマージして進めたいです。

そこで、極力手間を減らして、自分だけの環境を作り出すのが、Amplify Gen2 Sandboxというわけです。

開発ブランチの追加とAmplify設定

リポジトリにdevブランチを追加してリモートにも反映します。

ブランチ設定でブランチを追加を選択します。

プルダウンからdevを選択します。画面からはリポジトリのブランチを作成することはできないです。あくまで存在するブランチをAmplifyのCI/CDのパイプラインに追加するかどうかになります。

devブランチが追加されました。本番稼働ブランチではないですが、自動ビルド＆デプロイはデフォルトでONになってます。裏で、devブランチに対してデプロイが開始されてます。

ブランチ設定の編集で、ブランチをあるパターンで検出して自動的に追加する機能もあります。これを有効にすれば、あるルールのブランチ名だと上記の手順が自動化されると思います。（やってないけど）

コンソールを見ると、devブランチ用のデプロイ環境が作成されてます。
本番環境とテスト環境のように分かれてます。

AWSのページの絵です。上記の構築で、こんな構成になってます。

ちなみに、mainとdevブランチでそれぞれのamplify_outputs.jsonをダウンロードして比較してみました。沢山項目がありますが、CognitoとDynamoDBのテーブルなどのIDが異なるだけです。

Amplify Gen2 Sandboxとは

ローカル開発専用のクラウドサンドボックス環境では、開発中に利用できる、本番環境に忠実なAWSバックエンドがデプロイされる。
コードを保存するたびに、変更したコードに基づいて、サンドボックスが必要なクラウドリソースを再デプロイされる。（スキーマを変更して保存するとすぐに反映）

閉じたAWSリソースを使うバックエンド環境をサンドボックスとして作成してくれて、自分専用の開発環境として利用できる。本番と開発のブランチを登録すると、別々にデプロイされる話とはまた異なり、自分専用の閉じた環境になる。

コンソールでは、すべてのアプリからサンドボックスを管理に進むと、管理されているサンドボックス一覧が確認できます。（最初は空）

Sandboxの作成と確認

実際にやってみます。npx ampx sandboxを実行するだけです。実行すると、CloudFormationでAWSサービスなどの環境を構築してる感じで、Resource creation Initiatedと表示して、実行したままになります。

> npx ampx sandbox
:
✨  Total time: 200.23s

[Sandbox] Watching for file changes...
File written: amplify_outputs.json

上記のメッセージが出るとSandboxの環境作成は完了です。

つまり、Sandbox用のAWSリソースが作成されて、amplify_outputs.jsonに反映されます。

管理画面でも表示されます。操作は削除ぐらいしかないです。

この状態で、別のターミナルからアプリケーションを起動します。

> npm run dev
aws-amplify-gen2@0.1.0 dev
next dev
   ▲ Next.js 14.1.1
   - Local:        http://localhost:3000
 ✓ Ready in 2.3s

ブラウザで起動します。ログイン画面ではmainやdev環境で作成したユーザでログインできないはずです。Sandbox環境では、異なるユーザプールと紐づいていることが分かります。

http://localhost:3000

同じようにアカウントを作成して、何かしらデータ追加できると思います。

Sandboxで自動的にAWSリソースを更新する

チュートリアルに沿って続きを実施します。
Sandbox環境で、自動的にAWSリソースが更新されるかチェックします。

モデルの定義にcommentを追加
自身のデータだけ表示するようにします（テンプレートはログインしたらすべてのデータが閲覧可能だった）

//amplify/data/resource.ts
const schema = a.schema({
  Todo: a
    .model({
      content: a.string(),
      comment: a.string(), // <== update
    })
    .authorization((allow) => [allow.owner()]), // <== update
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'userPool', // <== update
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

データにcommentを追加して表示できるようにします。

//
function createTodo() {
  client.models.Todo.create({
    content: window.prompt("Todo content"),
    comment: window.prompt("Todo comment"), // <== add
  });
}

<ul>
  {todos.map((todo) => (
    <li onClick={() => deleteTodo(todo.id)} key={todo.id}>{todo.content}, {todo.comment}</li> // <== update
  ))}
</ul>

リソースの保存を行うと、Sandboxが検知して再構築されます。ソースも更新すると、Next.jsの本来の機能でホットリロードが実行されて即座に反映されます。

一旦ログアウトして再度ログインすると、反映されているはずです。

DynamoDBのテーブルについて、owner、commentカラムが追加されてます。

dev、mainブランチに反映

Sandbox環境で動作することが確認できたので、devブランチにプッシュしてデプロイが自動で開始されることが確認できます。
devブランチからmainへマージ＆プッシュすると、mainブランチでもデプロイが開始されます。

まとめ

良い点

ローカル＋Sandbox環境でフロントエンドもバックエンドもホットリロードで即座に反映
ブランチを登録するだけで自動的に環境セットアップ
プッシュするだけで自動デプロイ
Next.jsの本来のフロントエンド開発パート、Amplifyの設定パートが綺麗に分かれている。（ブラックボックスなところはコード上少ない）

課題（慣れまたは追加で調査が必要）

裏で動いているAWSサービスが自動で作成されるのは良いが、どれか分かりづらい
GraphQLがまだ慣れてない
ホスティング先の環境は選べるのか？
どこまで変化球に耐えられるのか？（規模が大きくなると使えないだと残念）
情報がまだ少ない