More than 3 years have passed since last update.

AWS Amplify フレームワーク入門メモ

Last updated at 2020-04-19Posted at 2020-04-17

概要

AWS Amplify(アンプリファイ) フレームワークの入門ページ ([Getting Started] (https://aws-amplify.github.io/docs/js/start?platform=purejs)) を読みながら、基本的な利用方法を学んだときのメモです。

環境

Windows 10 Professional 1903
aws CLI 2.0.7
amplify CLI 4.18.0
Node.js 12.16.2
npm 6.14.4

参考

[AWS Amplify] (https://aws.amazon.com/jp/amplify/)
[Amplify フレームワーク] (https://aws.amazon.com/jp/amplify/framework/)

Amplify CLIのインストールと設定

Amplify CLIは、Amplifyフレームワークのコンポーネントの1つで、コマンドラインでプロジェクトの作成やバックエンドサービスの構築が行えます。

前提

Amplify CLIのインストールにはNode.js 8.x以上、npm 5.x以上が必要です。

> node -v
v12.16.2

> npm -v
6.14.4

また、AWS CLIは必要ありませんがバージョンを補足しておきます。

> aws --version
aws-cli/2.0.7 Python/3.7.5 Windows/10 botocore/2.0.0dev11

インストール

npmでインストールします。

> npm install -g @aws-amplify/cli

// 省略

----------------------------------------
Successfully installed the Amplify CLI
----------------------------------------


JavaScript Getting Started - https://aws-amplify.github.io/docs/js/start


Android Getting Started - https://aws-amplify.github.io/docs/android/start


iOS Getting Started - https://aws-amplify.github.io/docs/ios/start

// 省略

+ @aws-amplify/cli@4.18.0
added 1048 packages from 713 contributors in 225.911s

バージョン確認

> amplify --version
Scanning for plugins...
Plugin scan successful
4.18.0

@aws-amplify/cliをインストールした後に、インストールしたパッケージの一覧を表示すると、下記のメッセージが複数行表示されます。

> npm -g ls -depth=0

npm ERR! peer dep missing: inquirer@^5.0.0 || ^6.0.0, required by inquirer-autocomplete-prompt@1.0.2
// 複数行表示される

バグ([Peer dependency missing #3284] (https://github.com/aws-amplify/amplify-cli/issues/3284))のようですが動作には影響はないようです。

設定

Configures the attributes of your project for amplify-cli, such as switching front-end framework and adding/removing cloud-provider plugins.
-------------------------------------------------------------------------------------
フロントエンドフレームワークの切り替えやクラウドプロバイダープラグインの追加/削除など、amplify-cliのプロジェクトの属性を構成します。

設定はamplify configureコマンドで行います。設定は対話形式で行われ、途中AWSコンソールで新しいIAMユーザーの登録を行う場面があります。

> amplify configure

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

この時点でブラウザにAWSコンソールのログインページが表示されるので管理者アカウントでログインします。
ログインできたらEnterを押して進めます。

続いてリージョンを選択し(この例ではap-northeast-1)、追加するIAMユーザー名を入力します。デフォルトでamplify-{ランダムな英数字}が表示されているので、このままでよければEnterを押し、別の名前がよければ入力します。

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-8ZcOy
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-8ZcOy&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

ウィザード形式のIAMユーザーの追加ページが表示されるので、指示に従って設定します。基本はデフォルトのままで構わないと思います。
IAMユーザーの追加が出来たらEnterを押して進めます。

追加したIAMユーザーのアクセスキーIDとシークレットアクセスキーを入力し、新しいプロファイルを作成します。
プロファイル名はユーザー名と同じにしています。

Enter the access key of the newly created user:
? accessKeyId:  XXXXXXXXXXXX**********
? secretAccessKey:  XXXXXXXXXXXXXXXXXXXX********************
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-8ZcOy

Successfully set up the new user.

以上で設定は完了です。

念のためAWS CLIで登録したプロファイルを確認してみます。

> aws configure list --profile amplify-8ZcOy

      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile            amplify-8ZcOy           manual    --profile
access_key     ****************XXXX shared-credentials-file
secret_key     ****************XXXX shared-credentials-file
    region           ap-northeast-1      config-file    ~/.aws/config

Webアプリケーションのプロジェクトを作成

AmplifyフレームワークではiOS、Android、Web、React Nativeなどのアプリケーションと統合するためのライブラリやUIコンポーネントを提供しています。

UIコンポーネントについては[A beautiful component library connected to the cloud] (https://aws-amplify.github.io/media/ui_library)で確認できます。

この記事ではJavaScriptを利用したWebアプリケーションの[Getting Started] (https://aws-amplify.github.io/docs/)ページを参考に、静的Webサイトの作成とS3へホスティングするまでの手順を確認します。

JavaScriptのフレームワークでは[Angular] (https://angular.io/)、[Ember.js] (https://emberjs.com/)、[Ionic] (https://ionicframework.com/)、[React] (https://reactjs.org/)、[Vue] (https://vuejs.org/index.html)がサポートされています。

プロジェクトのひな型を準備

demo-amplify-js-appというフォルダを作成し、下記の空ファイルを作成します。

demo-amplify-js-app
  |
  `--- /src
  |     |
  |     `--- app.js
  |
  `--- index.html
  `--- package.json
  `--- webpack.config.js

このうちindex.html、package.json、webpack.config.jsは、[Step 1. Create a New App] (https://aws-amplify.github.io/docs/js/start?platform=purejs) に記載されているコードをコピー＆ペーストし、npm installで依存パッケージをインストールします。
図はこの時点でのプロジェクトフォルダをVSCodeで開いた状態です。

インストールが終わったら、ローカルで動作確認するためにnpm startでアプリケーションを起動し、下記のURLにアクセスします。

http://localhost:8080

正常に起動していれば図のページが表示されます。（ADD DATAというボタンがありますが、この段階では機能しません）

以上でプロジェクトのひな型の準備は完了です。

プロジェクトの初期化

amplify init

Initializes a new project, sets up deployment resources in the cloud, and makes your project ready for Amplify.
------------------------------------------------------------------------------------
新しいプロジェクトを初期化し、クラウドにデプロイリソースを設定して、プロジェクトをAmplifyに対応させます。

初期化はamplify initコマンドで行います。プロジェクトの初期化は対話形式で行われます。
行頭に?がある行が入力/選択する項目です。
環境(environment)の名前を入力する項目がありますが、ここではproductionの意味でprodと入力しています。環境とはいわゆる"本番環境"や"開発環境"のことで、amplifyコマンドは環境名を指定して複数の環境を切り替えることができます。

> amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project demo-amplify-js-app
? Enter a name for the environment prod
? 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 none
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm.cmd run-script build
? Start Command: npm.cmd run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

続いてプロファイルを使用するか聞かれるのでYesを選択し、amplify configureで作成したプロファイルを選びます。（この例ではamplify-8ZcOy）
この後プロジェクトの初期化処理が行われ、AWS上にいくつかリソースが追加されます。

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-8ZcOy
Adding backend environment dev to AWS Amplify Console app: xxxxxxxxxxxxxx
- Initializing project in the cloud...

// 省略

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

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
“amplify console” to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

initで作成されるAWSのリソース

AWS上に以下のリソースが作成されます。ちなみにリソースというのはS3やDynamoDBのことです。

Amplify Console

demo-amplify-js-appというアプリケーションが作成されています。

CloudFormation

Stackが作成されています。
amplify-demo-amplify-js-app-prod-213624

S3

デプロイ用のバケットが作成されています。
amplify-demo-amplify-js-app-prod-213624-deployment

Roles

ロールが作成されています。
amplify-demo-amplify-js-app-prod-213624-authRole
amplify-demo-amplify-js-app-prod-213624-unauthRole

init後のプロジェクト

初期化が終わるとプロジェクトにamplifyディレクトリをはじめいくつかのファイルが追加されます。

demo-amplify-js-app
  |
  `--- /amplify               <--- add
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- local-aws-info.json
  |      |      `--- local-env-info.json
  |      |      `--- project-config.json
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- app.js
  |     `--- aws-exports.js   <--- add
  |
  `--- .gitignore             <--- add
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

プロジェクトのgit管理

initで.gitignoreファイルが下記の内容で作成されています。このようにバージョン管理する必要のないファイル又はしてはいけないファイルが決まっています。
今後のプロジェクトの更新内容を把握しやすいようにこの時点でgitリポジトリ化します。

#amplify
amplify/\#current-cloud-backend
amplify/.config/local-*
amplify/mock-data
amplify/backend/amplify-meta.json
amplify/backend/awscloudformation
build/
dist/
node_modules/
aws-exports.js
awsconfiguration.json
amplifyconfiguration.json
amplify-build-config.json
amplify-gradle-config.json
amplifyxc.config

amplify status

Shows the state of local resources not yet pushed to the cloud (Create/Update/Delete).
-------------------------------------------------------------------------------------
まだクラウドにプッシュされていないローカルリソースの状態を表示します（Create/Update/Delete）。

amplify statusコマンドでプロジェクトが利用するリソースを確認できます。init直後はAWS上に反映するリソースはないので、下記のように空のテーブルが表示されます。

> amplify status

Current Environment: prod

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

プロジェクトにAPIを追加する

amplify add api

Adds a resource for an Amplify category in your local backend
-------------------------------------------------------------
ローカルバックエンドのAmplifyカテゴリのリソースを追加します

amplify add apiコマンドでAPIを追加します。このコマンドも対話形式で設定を行います。
APIの選択肢にはRESTとGraphQLがあります。ここではGraphQLを選択し、API名をtodoとしました。
またスキーマを作成するかどうか聞かれるのでYesを選択し、"Todo"というスキーマを選びました。（※このスキーマは説明用のサンプルで作成しないことも可能です。また"Posts"という少し複雑なスキーマを選ぶこともできます。）

> amplify add api

? Please select from one of the below mentioned services: GraphQL
? Provide API name: todo
? Choose the default authorization type for the API API key
? Enter a description for the API key: todo api
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Todo
Learn more about @auth here: https://aws-amplify.github.io/docs/cli-toolchain/graphql#auth


GraphQL schema compiled successfully.

Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
Successfully added resource todo locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

add api後のプロジェクト

amplify/backend/api下にファイルが作成されています。（更新のあるファイルはこの後コミットします）

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- local-aws-info.json
  |      |      `--- local-env-info.json
  |      |      `--- project-config.json
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- amplify-meta.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api                      <--- add
  |      |      |      |
  |      |      |      `--- /todo              <--- amplify add apiで指定したAPI名
  |      |      |             |
  |      |      |             `--- /build
  |      |      |             `--- /resolvers
  |      |      |             `--- /stacks
  |      |      |             |      |
  |      |      |             |      `--- CustomResources.json
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- schema.graphql
  |      |      |             `--- transform.config.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json      <--- modify
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

コマンド実行時の対話で"Todo"というスキーマを作成すると答えたので、amplify/backend/api/todoに下記のschema.graphqlというファイルが作成されています。

schema.graphql

type Todo @model {
  id: ID!
  name: String!
  description: String
}

add api後のステータス

下記がAPI追加後のステータスになります。OperationがCreateとなっていますが、これはAWS上に反映するとこのAPIのリソースが作成されるという意味になります。
なお、GraphQLではAppSyncとDynamoDBがリソースとして作成されます。

> amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | todo          | Create    | awscloudformation |

amplify push

Provisions cloud resources with the latest local developments.
------------------------------------------------------------
最新のlocal developmentsでクラウドリソースをプロビジョニングします。

ローカルの状態をAWSへ反映するにはamplify pushコマンドで行います。途中でGraphQL APIを操作するコードを生成するか、言語は何にするか(JavaScript, TypeScript, flow)を聞かれます。
ここではJavaScriptでコードを生成するように答えています。

> amplify push

√ Successfully pulled backend environment dev from the cloud.

Current Environment: prod

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

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Todo
Learn more about @auth here: https://aws-amplify.github.io/docs/cli-toolchain/graphql#auth


GraphQL schema compiled successfully.

Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src\graphql\**\*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
/ Updating resources in the cloud. This may take a few minutes...

// 省略

√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

pushで作成されるAWSのリソース

Amplify Console

GraphQL APIが登録されています。

AppSync

スキーマやデータソースが作成されています。

設定ではAPIのエンドポイントおよび認証モードが確認できます。

DynamoDB

GraphQLのデータソースとしてDynamoDBにテーブルが作成されています。
Todo-2z5lybtblrgrpptu4job3mevma-prod

Roles

DynamoDBアクセス用のロールが作成されています。
Todo-role-2z5lybtblrgrpptu4job3mevma-prod

CloudFormation

Stackが作成されています。
amplify-demo-amplify-js-app-prod-213624-apitodo-UKR1WF6DW3EC
amplify-demo-amplify-js-app-prod-213624-apitodo-UKR1WF6DW3EC-Todo-EYNHDFHQODJM
amplify-demo-amplify-js-app-prod-213624-apitodo-UKR1WF6DW3EC-CustomResourcesjson-HQXMZNPER244

push後のプロジェクト

src/graphql下にGraphQL APIを操作するコードが生成されています。

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api                     <--- add
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- /build
  |      |      |             `--- /resolvers
  |      |      |             `--- /stacks
  |      |      |             |      |
  |      |      |             |      `--- CustomResources.json
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- schema.graphql
  |      |      |             `--- transform.config.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation        <-- add
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql               <--- add
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml           <--- add
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

push後のステータス

下記がpush後のステータスです。pushが正常におこなわれたのでOperationがNo Changeとなっています。

> amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | todo          | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

APIの動作確認

この時点でまだsrc/app.jsは空ファイルの状態だと思います。[Step 4: Integrate into your app] (https://aws-amplify.github.io/docs/js/start?platform=purejs#step-4-integrate-into-your-app)に記載されているコードをコピー＆ペーストします。
app.jsを更新したらnpm startコマンドでアプリケーションを起動し、下記のURLにアクセスします。

http://localhost:8080

今度はADD DATAボタンが機能するのでクリックしてみます。すると図のように"Use AppSync - Realtime and Offline"というメッセージが表示されます。

DynamoDB

アプリケーションはローカルで動いていますが、AWS上のGraphQL APIのエンドポイントをコールしているのでAWS上のDynamoDBへデータが登録されています。
AWSコンソールのDynamoDBのダッシュボードを見るとデータが追加されていることがわかります。

静的Webサイトのホスティング

amplify add hosting

amplify add hostingコマンドでアプリケーションをS3へホスティングする準備をします。途中でCloudFrontとS3を利用するか、又はS3だけを利用するかと、公開用のバケット名を聞かれます。
ここではS3だけを利用し公開バケット名はデフォルトのままとしました。
まだこの時点では公開されていません。つまりAWS上にリソースは作成されていません。

> amplify add hosting

? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name demo-amplify-js-app-20200415223152-hostingbucket
? index doc for the website index.html
? error doc for the website index.html

You can now publish your app using the following command:
Command: amplify publish

add hosting後のプロジェクト

amplify/backend/hosting下にファイルが作成されます。

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- /hosting                        <--- add
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json             <--- modify
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

add hosting後のステータス

下記がadd hosting後のステータスです。HostingのOperationがCreateになっているのでAWSへの反映待ちだということがわかります。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | todo            | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

amplify publish

Executes amplify push, and then builds and publishes client-side application for hosting.
--------------------------------------------------------------------------------------
amplify pushを実行してから、ホスティング用のクライアント側アプリケーションを構築して公開します。

amplify publishコマンドで公開します。

> amplify publish

√ Successfully pulled backend environment prod from the cloud.

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
| Api      | todo            | No Change | awscloudformation |
? Are you sure you want to continue? Yes
| Updating resources in the cloud. This may take a few minutes...

// 省略

Publish started for S3AndCloudFront
√ Uploaded files successfully.
Your app is published successfully.
http://demo-amplify-js-app-20200415223152-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

publishが終了すると自動的にブラウザが起動して公開されたページが表示されます。

publishで作成されるAWSのリソース

S3

公開用のバケットが作成されています。
demo-amplify-js-app-20200415223152-hostingbucket-prod

バケットにはwebpackでバンドルされたmain.bundle.jsやindex.htmlがアップロードされています。

CloudFormation

Stackが作成されています。
amplify-demo-amplify-js-app-prod-213624-hostingS3AndCloudFront-13R6I7CHZFCAG

publish後のプロジェクト

amplify/#current-cloud-backend/hosting下にファイルが作成されます。

demo-amplify-js-app
  |
  `--- /amplify
  |      |
  |      `--- /.config
  |      |      |
  |      |      `--- ...省略...
  |      |
  |      `--- /#current-cloud-backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /hosting                        <--- add
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- /backend
  |      |      |
  |      |      `--- /api
  |      |      |      |
  |      |      |      `--- /todo
  |      |      |             |
  |      |      |             `--- ...省略...
  |      |      |
  |      |      `--- /awscloudformation
  |      |      |      |
  |      |      |       `--- nested-cloudformation-stack.yml
  |      |      |
  |      |      `--- /hosting
  |      |      |      |
  |      |      |      `--- /S3AndCloudFront
  |      |      |             |
  |      |      |             `--- parameters.json
  |      |      |             `--- template.json
  |      |      |
  |      |      `--- amplify-meta.json
  |      |      `--- backend-config.json
  |      |
  |      `--- teram-provider-info.json
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      |
  |     |      `--- mutations.js
  |     |      `--- queries.js
  |     |      `--- schema.json
  |     |      `--- subscrptions.js
  |     `--- app.js
  |     `--- aws-exports.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

publish後のステータス

下記がpublish後のステータスです。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | No Change | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx
Hosting endpoint: http://demo-amplify-js-app-20200415223152-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

以上でJavaScriptを利用したWebアプリケーションの”Getting Started”は完了です。

アプリケーションの修正

フロント側のコード修正

index.htmlやjsファイルなどフロント側のコードの修正だけであれば、npm run buildでビルドした後にamplify publishコマンドでAWS上のS3へ反映させることができます。

> amplify publish

GraphQLのスキーマの修正 (バックエンド側のコード修正）

Todoオブジェクトにpriorityというフィールドを追加する場合、amplify/backend/api/todoのschema.graphqlを以下のように修正します。
ちなみに名前が!で終わっているフィールドは必須フィールドです。

schema.graphql

type Todo @model {
  id: ID!
  name: String!
  priority: Int!
  description: String
}

ステータスを確認するとApiのOperationがUpdateに変わっています。

> amplify status

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | Update    | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx
Hosting endpoint: http://demo-amplify-js-app-20200416174831-hostingbucket-prod.s3-website-ap-northeast-1.amazonaws.com

Todoオブジェクトの修正を反映するためにamplify pushコマンドを実行します。
途中でGraphQL statements (queries, mutations and subscription)を更新するか聞かれるのでYesと入力してコードを生成します。

> amplify push

√ Successfully pulled backend environment prod from the cloud.

Current Environment: prod

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Api      | todo            | Update    | awscloudformation |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Todo
Learn more about @auth here: https://aws-amplify.github.io/docs/cli-toolchain/graphql#auth


GraphQL schema compiled successfully.
Edit your schema at D:\dev\vsc-workspace\demo-amplify-js-app\amplify\backend\api\todo\schema.graphql or place .graphql files in a directory at D:\dev\vsc-worksp
ace\demo-amplify-js-app\amplify\backend\api\todo\schema
? Do you want to update code for your updated GraphQL API Yes
? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscriptions Yes
/ Updating resources in the cloud. This may take a few minutes...

// 省略

√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

GraphQL endpoint: https://xxxxxxxxxxxxxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx

バックエンドの修正が終わったら、影響を受けるフロントエンドのソースコード(src/app.js)を、たとえば新規データを登録するコードを以下のように修正します。

const todo = { name: "Use AppSync", description: "Realtime and Offline", priority: 1 }
API.graphql(graphqlOperation(createTodo, { input: todo }))

ローカルで動作確認をして問題なければ、最終的にamplify publishコマンドで公開します。

source-mapの追加

webpack.config.jsに以下の行を追加します。

module.exports = {

  devtool: 'source-map',

};

アプリケーションの削除

ここまで行うとAWS上にS3、AppSync、DynamoDBなど課金が発生するサービスを利用しています。アプリケーションが不要になったら無駄な課金が発生しないように削除しておきます。

amplify delete

Deletes all of the resources tied to the project from the cloud.
--------------------------------------------------------------
プロジェクトに関連付けられているすべてのリソースをクラウドから削除します。

amplify deleteコマンドでプロジェクトに関連するリソースを削除します。これまでの操作で作成したリソースのほぼすべてを削除してくれますが、静的Webサイト用に作成されたS3バケットだけは残っているので別途AWSコンソールから削除しておきます。

> amplify delete

Scanning for plugins...
Plugin scan successful
? Are you sure you want to continue? (This would delete all the environments of the project from the cloud and wipe out all the local amplify resource files) Yes
- Deleting resources from the cloud. This may take a few minutes...
Deleting env:prod
√ Project deleted in the cloud
Project deleted locally.

delete後のプロジェクト

deleteコマンドを実行してもローカルのプロジェクトファイルの大半は残っています。

demo-amplify-js-app
  |
  `--- /dist
  `--- /node_modules
  `--- /src
  |     |
  |     `--- /graphql
  |     |      `--- schema.json
  |     `--- app.js
  |
  `--- .gitignore
  `--- .graphqlconfig.yml
  `--- index.html
  `--- package.json
  `--- package-lock.json
  `--- webpack.config.js

補足

consoleコマンド

ブラウザが立ち上がりAmplifyコンソールを表示します。

> amplify console

helpコマンド

helpコマンド

> amplify help

> amplify <command> help

カテゴリ一覧

カテゴリ	APIガイド
analytics	https://aws-amplify.github.io/docs/js/analytics
api	https://aws-amplify.github.io/docs/js/api
auth	https://aws-amplify.github.io/docs/js/authentication
function
hosting
interactions	https://aws-amplify.github.io/docs/js/interactions
notifications	https://aws-amplify.github.io/docs/js/push-notifications
predictions	https://aws-amplify.github.io/docs/js/predictions
storage	https://aws-amplify.github.io/docs/js/storage
xr	https://aws-amplify.github.io/docs/js/xr

コマンド一覧

コマンド	説明
init	Initializes a new project, sets up deployment resources in the cloud, and makes your project ready for Amplify. 新しいプロジェクトを初期化し、クラウドにデプロイリソースを設定して、プロジェクトをAmplifyに対応させます。
configure	Configures the attributes of your project for amplify-cli, such as switching front-end framework and adding/removing cloud-provider plugins. フロントエンドフレームワークの切り替えやクラウドプロバイダープラグインの追加/削除など、amplify-cliのプロジェクトの属性を構成します。
push	Provisions cloud resources with the latest local developments. 最新のローカル開発でクラウドリソースをプロビジョニングします。
pull	Fetch upstream backend environment definition changes from the cloud and updates the local environment to match that definition. クラウドからアップストリームバックエンド環境定義の変更をフェッチし、その定義に一致するようにローカル環境を更新します。
publish	Executes amplify push, and then builds and publishes client-side application for hosting. amplify pushを実行してから、ホスティング用のクライアント側アプリケーションを構築して公開します。
serve	Executes amplify push, and then executes the project's start command to test run the client-side application locally. amplify pushを実行し、プロジェクトの開始コマンドを実行して、クライアント側アプリケーションをローカルでテスト実行します。
status	Shows the state of local resources not yet pushed to the cloud (Create/Update/Delete). まだクラウドにプッシュされていないローカルリソースの状態を表示します（作成/更新/削除）。
delete	Deletes all of the resources tied to the project from the cloud. プロジェクトに関連付けられているすべてのリソースをクラウドから削除します。
<category> add	Adds a resource for an Amplify category in your local backend. ローカルバックエンドのAmplifyカテゴリのリソースを追加します。
<category> update	Update resource for an Amplify category in your local backend. ローカルバックエンドのAmplifyカテゴリのリソースを更新します。
<category> push	Provisions all cloud resources in a category with the latest local developments. カテゴリ内のすべてのクラウドリソースを最新のローカル開発でプロビジョニングします。
<category> remove	Removes a resource for an Amplify category in your local backend. ローカルバックエンドのAmplifyカテゴリのリソースを削除します。
<category>	Displays subcommands of the specified Amplify category. 指定したamplifyカテゴリのサブコマンドを表示します。
mock	Run mock server for testing categories locally. ローカルでテストカテゴリのモックサーバーを実行します。
codegen	Generates GraphQL statements(queries, mutations and eventHandlers) and type annotations. GraphQLステートメント（queries, mutations and eventHandlers）とtype annotationsを生成します。
env	Displays and manages environment related information for your Amplify project. Amplifyプロジェクトの環境関連情報を表示および管理します。
console	Opens the web console for the selected cloud resource. 選択したAWSリソースのWebコンソールを開きます。

サブコマンド

mock

storage
api
function <name>

env

add
pull [--restore]
list [--details] [--json]
get --name <env-name> [--json]
import --name <env-name> --config <provider-configs> [--awsinfo <aws-configs>]
remove <env-name>

対話形式の選択肢

amplifyコマンドの選択肢の内容について補足します。

amplify init

Choose your default editor
デフォルトのエディターを選択

Choose the type of app that you're building
構築するアプリのタイプを選択します

What javascript framework are you using
どのJavaScriptフレームワークを使用するか

amplify add api

Please select from one of the below mentioned services
以下のサービスのいずれかから選択してください

Choose the default authorization type for the API
APIのデフォルトの認証タイプを選択します

Do you want to configure advanced settings for the GraphQL API
GraphQL APIの詳細設定を構成しますか？

What best describes your project
プロジェクトを最もよく表すもの

amplify push

Choose the code generation language target
生成するコードの言語を選択してください

amplify add hosting

Select the plugin module to execute
実行するプラグインモジュールを選択します

Select the environment setup
環境設定を選択

161

158

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

AWS Amplify フレームワーク 入門メモ

概要

Amplify CLIのインストールと設定

前提

インストール

設定

Webアプリケーションのプロジェクトを作成

プロジェクトのひな型を準備

プロジェクトの初期化

amplify init

initで作成されるAWSのリソース

Amplify Console

CloudFormation

S3

Roles

init後のプロジェクト

プロジェクトのgit管理

amplify status

プロジェクトにAPIを追加する

amplify add api

add api後のプロジェクト

add api後のステータス

amplify push

pushで作成されるAWSのリソース

Amplify Console

AppSync

DynamoDB

Roles

CloudFormation

push後のプロジェクト

push後のステータス

APIの動作確認

静的Webサイトのホスティング

amplify add hosting

add hosting後のプロジェクト

add hosting後のステータス

amplify publish

publishで作成されるAWSのリソース

S3

CloudFormation

publish後のプロジェクト

publish後のステータス

アプリケーションの修正

フロント側のコード修正

GraphQLのスキーマの修正 (バックエンド側のコード修正）

source-mapの追加

アプリケーションの削除

amplify delete

delete後のプロジェクト

補足

consoleコマンド

helpコマンド

カテゴリ一覧

コマンド一覧

サブコマンド

対話形式の選択肢

amplify init

amplify add api

amplify push

amplify add hosting

AWS Amplify フレームワーク入門メモ