GUIからAmplifyからGen1のアプリケーションを作成しローカルに開発環境との同期してみる

AWSのAmplify。「フルスタック TypeScript。AWS のためのフロントエンド DX。（AWS公式サイトから引用）」
https://aws.amazon.com/jp/amplify/

Amplifyを使いこなせたらサーバーレスのアプリケーションを簡単に構築できるようになります。
今回は、AWSのマネジメントコンソールからAmplifyのアプリケーションを作成し実際に開発環境にセットアップしていく流れを見ていきましょう！

AWSにアクセス

AWSにログインをしたら検索から「amplify」と入力しAmplifyの画面にアクセスします。
下記のURLからでも良いです。（東京リージョンのAmplifyにアクセスします）
https://ap-northeast-1.console.aws.amazon.com/amplify/apps

アクセスしたら右上にある 新しいアプリを作成 > Gen 1 でアプリを作成 と順にクリックしてください。
（「Gen 1 でアプリを作成」は2025年1月23日現在、画面下にあります。）

アプリケーションの名前を入力し「Confirm deployment」ボタンを押すとアプリケーションAmplifyで使用する色々なものが作成されていきます。

アプリケーションの作成は少し時間がかかるのでここでコーヒーを飲むことをお勧めします☕️

⚠️アプリケーションの名前はAWS環境で同じリージョン内では同じ名前は使用できません

Amplifyの一覧に先ほど決めた名前が表示されれば完成です。
名前を決めるだけなので、とても簡単です。

---

ローカル開発環境にセットアップ

ローカルに先ほど作ったAmplifyを同期していきます。

まずは開発するためにディレクトリを作成します。その後、amplifyコマンドを実行できるようにnpm i -g @aws-amplify/cliを実行しします。
Docker内で実行できればご自身のPC環境に依存しないので良いかもしれません。
インストールが終わったらamplify -vでコマンドが実行できるかとバージョンを確認しますす。
今日時点ではバージョンは「12.14.0」です。

amplify -v
12.14.0

次に、AWSのマネジメントコンソールからAmplifyの画面に再度アクセスし、一覧に先ほど決めた名前 > バックエンド環境タブ の順にクリックし「staging」の横にある「studioを起動」ボタンからAmplify studioを起動します。

起動すると、右上に「Local setup instructions」があるのでこれをクリックします。

クリックすると、下記のようなコマンドが確認できるので先ほど作ったローカルの開発環境のディレクトリ上で実行します。

amplify pull --appId xxxxxxxxx --envName xxxxxxxxx

ログイン認証を行うと色々と質問されます。

? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code 
  Android Studio 
  Xcode (macOS only) 
  Atom Editor 
  Sublime Text 
  IntelliJ IDEA 
  Vim (via Terminal, macOS only) 
(Move up and down to reveal more choices)

使用しているエディターを選択

? Choose the type of app that you're building …  (Use arrow keys or type to filter)
  android
  flutter
  ios
❯ javascript

使用する言語を選択
今回はjavascriptを選択します。

? What javascript framework are you using (Use arrow keys)
  angular 
  ember 
  ionic 
  react 
  react-native 
❯ vue 
  none 

使用するフレームワーク、ライブラリーを選択
今回はVueを選択

? Source Directory Path:  src

フロントエンドアプリケーションのソースコードが格納されているディレクトリを指定します。

? Distribution Directory Path: dist

アプリケーションのビルド済み（生成済み）ファイルが格納されるディレクトリを指定します。このディレクトリは Amplify Hosting によってデプロイされます。

? Build Command:  npm run-script build

プロジェクトをビルド（静的ファイルを生成）するためのコマンドを指定します。

? Start Command: npm run-script serve

ローカル開発環境でアプリケーションを起動するためのコマンドを指定します。

? Do you plan on modifying this backend? Yes

ローカル環境でバックエンド（Amplify が管理するリソース）を編集する予定があるかどうかを確認する質問です。

• Yes: バックエンドのリソース（API、Auth、Storage など）をローカル環境で編集する予定がある場合。
• No: バックエンドをローカル環境で編集しない（ただし、バックエンドを利用することは可能）。

これらの質問の答えに基づいて、Amplify は以下を設定します：

• ローカル環境の設定ファイルの作成（amplify/.config/project-config.json や amplify/.config/local-env-info.json）。
  • このファイルがVSCodeで確認できない場合は.vscode/settings.jsonで下記が追加されているので一時的にコメントアウトすることで確認できます。

"files.exclude": {
  // "amplify/.config": true,
  // "amplify/**/*-parameters.json": true,
  // "amplify/**/amplify.state": true,
  // "amplify/**/transform.conf.json": true,
  // "amplify/#current-cloud-backend": true,
  // "amplify/backend/amplify-meta.json": true,
  // "amplify/backend/awscloudformation": true
},

• フロントエンドの設定（ビルドやデプロイ方法）。
• バックエンドリソースの同期方法。

実際に先ほどの質問で入力した内容はamplify/.config/project-config.jsonに記述されています。

{
  "providers": [
    "awscloudformation"
  ],
  "projectName": "xxxxxxxxxx",
  "version": "3.1",
  "frontend": "javascript",
  "javascript": {
    "framework": "vue",
    "config": {
      "SourceDir": "src",
      "DistributionDir": "dist",
      "BuildCommand": "npm run-script build",
      "StartCommand": "npm run-script serve"
    }
  }
}

これでローカルへの同期は完了です。
あとは各々の言語やフレームワークのセットアップに従うことでフロントと連携することができます。
https://docs.amplify.aws/gen1/vue/start/getting-started/setup/

findでは一例としてNuxt3と連携する記事も別で投稿しているので合わせて見てみてください！
https://zenn.dev/find/articles/72275c13c5a5c6

それでは、良いAmplify ライフを👋