AWS Amplifyでよく使うCLIコマンドまとめ

こんにちは。

このページにはAWS Amplifyでよく使うコマンドを備忘録としてまとめます。

随時追加していきます。

バージョン確認

$ amplify -v

Amplify IAMユーザーの作成 - amplify configure

$ amplify configure

webブラウザでマネジメントコンソールが立ち上がるので、アカウント管理者のアカウントでサインインして設定を進めます。

設定するのは以下

• AWSリージョン
• IAMユーザー名
• IAMポリシー (基本はAdministratorAccess)
• profile (基本はdefault)

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

新規プロジェクトの作成とローカル環境でのApp実行

hoge-amplifiedというプロジェクトフォルダを作りローカルで実行する場合

ここでは(個人的に)よく使うフレームワークとしてNext.jsとReactの場合を書きます。

Next.jsの場合

$ npx create-next-app hoge-amplified
$ cd hoge-amplified
$ npm run dev

Reactの場合

$ npx create-react-app hoge-amplified
$ cd hoge-amplified
$ npm start

いずれもhttp://localhost:3000で起動します。Ctrl + Cで停止。

以下ではReactベースのフロントエンドフレームワークであるNext.jsで進めていきます。

この時点では主なディレクトリ構成は以下のみ。

• pages/
  • _app.js, index.js
• public/
  • favicon, vercel.svg
• styles/
  • globals.css, Home.module.css

これだけでフロントエンド開発の基礎ができました。

バックエンドの初期化 - amplify init

プロジェクトのルートフォルダで以下を実行すると、作成したいAppに合わせて環境が構築されます。

$ amplify init

質問が出てきますが、基本Enter連打で問題なく進みます。

? Enter a name for the project nextamplified
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

CLoudFormationのテンプレートが起動してバックエンドが構築され始めます。

Your project has been successfully initialized and connected to the cloud!

具体的にはIAMロール2つとS3バケットが出来上がっています。

• AuthRole
• DeploymentBucket
• UnauthRole

また、プロジェクト内にディレクトリが追加されます。

• .vscode/
  • setting.json
• amplify/
  • backendやconfigを定義するjsonファイル。インフラをコード管理するというやつ。大規模になるとここが増えていきます。
• src/
  • exports.jsで作成したアプリのconfig情報を保持して、アプリのクライアントがバックエンド情報を取得できるようにしている。バックエンドのコンフィグが更新されるとこのファイルも自動で更新されていきます。

Amplifyコンソールにアクセスする - amplify console

以下でwebブラウザのコンソール画面にアクセスできます。バックエンドの確認などできます。

$ amplify console
✔ Which site do you want to open? · Console

Amplifyのライブラリをインストールする - aws-amplify

以下で必要なライブラリをインストールできます。

npm install aws-amplify @aws-amplify/ui-react@1.x.x

• aws-amplify
  • Amplifyを使うための主要ライブラリ。
• @aws-amplify/ui-react
  • React向けのUIコンポーネント。

APIを作成 - amplify add api

$ amplify add api

バックエンドをデプロイする - amplify push

作成したAPIなど

$ amplify push

Amplifyの現在の環境・ステータスを確認する - amplify status

現在の環境や作成されたカテゴリ(API, Authなど)が確認できます。

$ amplify status
Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

AppSyncコンソールでAPIを確認する - amplify console api

$ amplify console api

ローカルでAPIをテストする - amplify mock api

APIのテスト環境がブラウザに立ち上がります。

$ amplify mock api

Mockingは変更後の動作確認をローカル環境で行う機能で、amplify pushは反映に時間がかかるので手軽に動作確認するのに便利です。

mockの終了はターミナルでCtrl+C。

デプロイ方法(手動/CD)を選択する - amplify add hosting

$ amplify add hosting

選択肢が出てきます。

Choose a type 
  Continuous deployment (Git-based deployments) 
❯ Manual deployment 
  Learn more 

アプリケーションを手動でホスティングする - amplify publish

ホスティングを開始するのは以下。amplify add hostingでManual deploymentを選択すると提案されるコマンド。

$ amplify publish

確認が出てきます。Yesにして、リソースがクラウドにアップロードされます。(数分かかります)

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? Yes

作成したAWSクラウドリソースをすべて削除 - amplify delete

余計な課金が発生しないために。プロジェクトディレクトリで実行します。

$ amplify delete

ローカルのファイルはそのままで、Amplifyで作成したクラウドリソースが削除されます。(IAMロールやS3バケットなど)

ちなみにAmplify CLIは料金がかかりません。作成したリソースに対して課金される仕様です。使っていないリソースは削除しておきましょう。

【参考リンク】 Amplify ドキュメント

Amplify Docs | https://docs.amplify.aws/

Getting Started - Next.js | https://docs.amplify.aws/start/q/integration/next/

以上、ご参考になれば幸いです。

それでは〜