AWS AmplifyでTodoアプリを作るハンズオンをやってみました

2020/06/28

【お手軽ハンズオンで AWS を学ぶ】AWS Amplify で Todo アプリを作ろう！ AWS AppSync ＆ Amazon DynamoDB によるリアルタイムメッセージングを見ながら、AWS Amplify、AppSyncに触れてみました。

ハンズオン環境

開発環境はCloud9を使用しました。
Cloud9はインスタンスタイプをt3.nanoにしただけで他はデフォルトです。

まずnodeとnpmのバージョン確認です。

$ node -v
v10.20.1
$ npm -v
6.14.4

$ node -v

v10.20.1

$ npm -v

6.14.4

手順よりも上位バージョンなんでこのまま進めます。

インストールなどセットアップ

$ npm install -g @aws-amplify/cli@1.8.0
~省略~
+ @aws-amplify/cli@1.8.0
added 1895 packages from 1438 contributors in 43.798s

$ npm install -g @aws-amplify/cli@1.8.0

~省略~

+ @aws-amplify/cli@1.8.0

added 1895 packages from 1438 contributors in 43.798s

$ 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

$ amplify configure

Follow these steps to set up access to your AWS account:

https://console.aws.amazon.com/

Press Enter to continue

マネジメントコンソールへのログインが促されましたが、Cloud9なんですでにログイン済です。
このまま[Enter]キーを押下しました。

Specify the AWS Region
? region:  us-east-1
Specify the username of the new IAM user:
? user name:  amplify-xxxxx

Specify the AWS Region

? region: us-east-1

Specify the username of the new IAM user:

? user name: amplify-xxxxx

リージョンはバージニア北部、IAMユーザーはデフォルトのユーザーです。
その下のリンクをクリックすると、マネジメントコンソールのIAMユーザー作成画面です。
IAMユーザーにAWS管理ポリシーのAdministratorAccessを設定しました。
プログラムによるアクセスが設定されているので、アクセスキーIDとシークレットアクセスキーが発行されました。

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

Enter the access key of the newly created user:

? accessKeyId: ****************

? secretAccessKey: *****************************

This would update/create the AWS Profile in your local machine

? Profile Name: amplify-handson

amplify configureの続きでアクセスキーIDとシークレットアクセスキー、Profile Nameを設定しました。

ちょっと怖いので、Cloud9からのみ許可するように、ユーザーに以下のインラインポリシーを追加しました。
Cloud9のEC2にElasticIPアドレスを関連付けて、そこから以外はすべての操作を拒否するポリシーを追加しています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Deny",
            "Action": "*",
            "Resource": "*",
            "Condition": {
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "55.66.77.88/32"
                    ]
                }
            }
        }
    ]
}

{

"Version": "2012-10-17",

"Statement": [

{

"Effect": "Deny",

"Action": "*",

"Resource": "*",

"Condition": {

"NotIpAddress": {

"aws:SourceIp": [

"55.66.77.88/32"

]

}

]

}

手順どおりにvueをインストールして、

$ npm install -g @vue/cli

1 2	$ npm install -g @vue/cli

vueのプロジェクトを新規作成して、

$ vue create myamplifyproject

1 2	$ vue create myamplifyproject

プロジェクトディレクトリに移動しました。

$ cd myamplifyproject

1 2	$ cd myamplifyproject

$ npm i @aws-amplify/api @aws-amplify/pubsub

1 2	$ npm i @aws-amplify/api @aws-amplify/pubsub

AWS Amplify のAPI機能とメッセージング機能のモジュールをインストールしました。

$ npm run serve

> myamplifyproject@0.1.0 serve /home/ec2-user/environment/myamplifyproject
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3262ms   

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.31.0.191:8080/

$ npm run serve

> myamplifyproject@0.1.0 serve /home/ec2-user/environment/myamplifyproject

> vue-cli-service serve

INFO Starting development server...

98% after emitting CopyPlugin

DONE Compiled successfully in 3262ms

App running at:

- Local: http://localhost:8080/

- Network: http://172.31.0.191:8080/

私の環境はCloud9ですので、ブラウザからアプリにアクセスしました。
セキュリティグループでは8080ポートに対してのインバウンドルールを追加しました。

http://ElasticIPのアドレス:8080

画面が表示されました。

ハンズオン手順では、Cloud9の場合はプロジェクトのルートディレクトリにvue.config.js を以下の内容で追加しましょうとありましたが、なくても表示されました。
ですが、後の手順でうまくいかなくなってもと思い、念のために追加して、npm run serve を再実行しました。

module.exports = {
 devServer: {
   disableHostCheck: true
 }
}

module.exports = {

devServer: {

disableHostCheck: true

}

サーバーレスバックエンドリソースの作成

amplify init を実行しました。
選択、入力したのは、環境名の「test」と、エディタのVimだけで、あとはデフォルトです。

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project myamplifyproject
? Enter a name for the environment test
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation

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

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify-handson
⠧ Initializing project in the cloud...

CREATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 07:02:08 GMT+0000 (Coordinated Universal Time) User Initiated
⠏ Initializing project in the cloud...

~中略~

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

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 <category> add" 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 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

$ amplify init

Note: It is recommended to run this command from the root of your app directory

? Enter a name for the project myamplifyproject

? Enter a name for the environment test

? Choose your default editor: Vim (via Terminal, Mac OS only)

? Choose the type of app that you're building javascript

Please tell us about your project

? What javascript framework are you using vue

? Source Directory Path: src

? Distribution Directory Path: dist

? Build Command: npm run-script build

? Start Command: npm run-script serve

Using default provider awscloudformation

For more information on AWS Profiles, see:

https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes

? Please choose the profile you want to use amplify-handson

⠧ Initializing project in the cloud...

CREATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 07:02:08 GMT+0000 (Coordinated Universal Time) User Initiated

⠏ Initializing project in the cloud...

~中略~

✔ Successfully created initial AWS cloud resources for deployments.

✔ Initialized provider successfully.

Initialized your environment successfully.

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 <category> add" 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 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

IAMロール2つとS3バケット1つがCloudFormationスタックによって作成されました。

この段階で、amplify statusコマンドを実行して何も値が表示されなければ正常とのことです。

 $ amplify status

Current Environment: test

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

$ amplify status

Current Environment: test

| -------- | ------------- | --------- | --------------- |

amplify add api コマンドでアプリケーションにAPI機能を追加します。

$ amplify add api
? Please select from one of the below mentioned services GraphQL
? Provide API name: myamplifyproject
? Choose an authorization type for the API API key
? 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? Yes
Selected default editor not found in your machine. Please manually edit the file created at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql
? Press enter to continue 

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema
Successfully added resource myamplifyproject 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

$ amplify add api

? Please select from one of the below mentioned services GraphQL

? Provide API name: myamplifyproject

? Choose an authorization type for the API API key

? 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? Yes

Selected default editor not found in your machine. Please manually edit the file created at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql

? Press enter to continue

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema

Successfully added resource myamplifyproject 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

“Selected default editor not found in your machine. Please manually edit the file created at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql”と出力されたので、vimコマンドで該当のファイルにアクセスしてみました。

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

type Todo @model {

id: ID!

description: String

}

手順の結果どおり作成されているので、特に編集はせずにこのまま進めました。

 $ amplify status

Current Environment: test

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

$ amplify status

Current Environment: test

| -------- | ---------------- | --------- | ----------------- |

amplify status コマンドを実行すると、APIが追加されていました。

バックエンドリソースに反映するために amplify push コマンドを実行しました。

$ amplify push

Current Environment: test

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

GraphQL schema compiled successfully.

Edit your schema at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/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...

UPDATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 07:22:10 GMT+0000 (Coordinated Universal Time) User Initiated
⠹ Updating resources in the cloud. This may take a few minutes...

~後略~

$ amplify push

Current Environment: test

| -------- | ---------------- | --------- | ----------------- |

? Are you sure you want to continue? Yes

GraphQL schema compiled successfully.

? 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...

UPDATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 07:22:10 GMT+0000 (Coordinated Universal Time) User Initiated

⠹ Updating resources in the cloud. This may take a few minutes...

~後略~

CloudFormation スタックが更新されて、API機能に必要な、DynamoDBテーブルや、AppSyncリソースが作成されました。

アプリケーションからAWS Amplifyを使ってバックエンドにアクセス

Todo追加ボタン

src/main.js に手順に沿って以下を追加しました。

import API from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';
import awsconfig from './aws-exports';

API.configure(awsconfig);
PubSub.configure(awsconfig);

import API from '@aws-amplify/api';

import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

API.configure(awsconfig);

PubSub.configure(awsconfig);

API機能とメッセージング機能のモジュールをインポートしてawsconfigureで設定しているコードに見えます。

src/App.vueも手順に沿って以下に置換しました。

<template>
  <div id="app">
    <button @click="createNewTodo">Add Todo</button>
  </div>
</template>

<script>
  import API, { graphqlOperation } from '@aws-amplify/api';
  // eslint-disable-next-line
  import { createTodo } from "./graphql/mutations";
  /*
  Supported log levels for browser debugging:
  ERROR
  WARN
  INFO
  DEBUG
  VERBOSE
  @see https://aws-amplify.github.io/docs/js/logger
  */

  window.LOG_LEVEL = 'VERBOSE';

  export default {
    name: 'app',
    methods: {
      async createNewTodo() {
        const todo = { name: "Todo Title", description: "あれをやる" + Date() }
        await API.graphql(graphqlOperation(createTodo, { input: todo }))
      }
    }
  };
</script>

</div>

</template>

import API, { graphqlOperation } from '@aws-amplify/api';

// eslint-disable-next-line

import { createTodo } from "./graphql/mutations";

Supported log levels for browser debugging:

ERROR

WARN

INFO

DEBUG

VERBOSE

@see https://aws-amplify.github.io/docs/js/logger

window.LOG_LEVEL = 'VERBOSE';

export default {

methods: {

async createNewTodo() {

const todo = { name: "Todo Title", description: "あれをやる" + Date() }

await API.graphql(graphqlOperation(createTodo, { input: todo }))

}

};

</script>

Add Todoボタンを押下すると、{ name: “Todo Title”, description: “あれをやる” + Date() }が、graphqlOperationのcreateTodoによって、DynamoDBテーブルに書き込まれるのですね。

やってみるとDynamoDBテーブルに新規データが登録されていました。

$ npm run serve

1 2	$ npm run serve

npm run serve コマンドを実行してブラウザから確認してみます。

Add Todoボタンが表示されました。
順調なようです。

このあたりで気づいたのですが、Cloud9の[Preview] – [Preview Running Application]でプレビュー見れるのですね。

とりあえず、[Ctrl]-[C]でアプリケーションを終了して、ハンズオンを進めます。

Todoの一覧表示

次はDynamoDBに登録されているアイテムを画面に表示します。
src/App.vueを編集しました。

<template>
  <div id="app">
    <button @click="createNewTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{todo.name}} - {{todo.description}}
      </li>
    </ul>
  </div>
</template>

<script>
  import API, { graphqlOperation } from '@aws-amplify/api';
  // eslint-disable-next-line
  import { createTodo } from "./graphql/mutations";
  import { listTodos } from './graphql/queries'

  window.LOG_LEVEL = 'VERBOSE';

  export default {
    name: 'app',
    data(){
      return {
        todos: []
      }
    },
    methods: {
      async createNewTodo() {
        const todo = { name: "Todo Title", description: "あれをやる" + Date() }
        await API.graphql(graphqlOperation(createTodo, { input: todo }))
      },
      async getData(){
        const todoData = await API.graphql(graphqlOperation(listTodos))
        this.todos.push(...this.todos, ...todoData.data.listTodos.items);
      }
    },
    created(){
      this.getData()
    }
  };
</script>

<ul>

{{todo.name}} - {{todo.description}}

</li>

</ul>

</div>

</template>

import API, { graphqlOperation } from '@aws-amplify/api';

// eslint-disable-next-line

import { createTodo } from "./graphql/mutations";

import { listTodos } from './graphql/queries'

window.LOG_LEVEL = 'VERBOSE';

export default {

data(){

return {

todos: []

}

methods: {

async createNewTodo() {

const todo = { name: "Todo Title", description: "あれをやる" + Date() }

await API.graphql(graphqlOperation(createTodo, { input: todo }))

async getData(){

const todoData = await API.graphql(graphqlOperation(listTodos))

this.todos.push(...this.todos, ...todoData.data.listTodos.items);

}

created(){

this.getData()

}

};

</script>

追加したのが、こちら。

    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{todo.name}} - {{todo.description}}
      </li>
    </ul>

<ul>

{{todo.name}} - {{todo.description}}

</li>

</ul>

  import { listTodos } from './graphql/queries'

1 2	import { listTodos } from './graphql/queries'

      async getData(){
        const todoData = await API.graphql(graphqlOperation(listTodos))
        this.todos.push(...this.todos, ...todoData.data.listTodos.items);
      }
    },
    created(){
      this.getData()
    }

async getData(){

const todoData = await API.graphql(graphqlOperation(listTodos))

this.todos.push(...this.todos, ...todoData.data.listTodos.items);

}

created(){

this.getData()

}

graphqlOperationのlistTodosで、取得したアイテムを

ul>タグのとこに一覧表示しているようです。

表示されました。

一覧表示のリアルタイム更新

次は新しいアイテムが投稿されたときに、自動的に一覧に表示させる機能の追加です。
わかりやすくするために、一度DynamoDBのアイテムを削除しました。

src/App.vueを編集しました。

<template>
  <div id="app">
    <button @click="createNewTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{todo.name}} - {{todo.description}}
      </li>
    </ul>
  </div>
</template>

<script>
  import API, { graphqlOperation } from '@aws-amplify/api';
  // eslint-disable-next-line
  import { createTodo } from "./graphql/mutations";
  import { listTodos } from './graphql/queries';
  import { onCreateTodo } from './graphql/subscriptions';

  window.LOG_LEVEL = 'VERBOSE';

  export default {
    name: 'app',
    data(){
      return {
        todos: []
      }
    },
    methods: {
      async createNewTodo() {
        const todo = { name: "Todo Title", description: "あれをやる" + Date() }
        await API.graphql(graphqlOperation(createTodo, { input: todo }))
      },
      async getData(){
        const todoData = await API.graphql(graphqlOperation(listTodos))
        this.todos.push(...this.todos, ...todoData.data.listTodos.items);
      },
      subscribe(){
        API.graphql(graphqlOperation(onCreateTodo)).subscribe({
          next: (eventData) => {
            const todo = eventData.value.data.onCreateTodo;
            this.todos.push(todo);
          }
        })
      }
    },
    created(){
      this.getData()
      this.subscribe()
    }
  };
</script>

<ul>

{{todo.name}} - {{todo.description}}

</li>

</ul>

</div>

</template>

import API, { graphqlOperation } from '@aws-amplify/api';

// eslint-disable-next-line

import { createTodo } from "./graphql/mutations";

import { listTodos } from './graphql/queries';

import { onCreateTodo } from './graphql/subscriptions';

window.LOG_LEVEL = 'VERBOSE';

export default {

data(){

return {

todos: []

}

methods: {

async createNewTodo() {

const todo = { name: "Todo Title", description: "あれをやる" + Date() }

await API.graphql(graphqlOperation(createTodo, { input: todo }))

async getData(){

const todoData = await API.graphql(graphqlOperation(listTodos))

this.todos.push(...this.todos, ...todoData.data.listTodos.items);

subscribe(){

API.graphql(graphqlOperation(onCreateTodo)).subscribe({

next: (eventData) => {

const todo = eventData.value.data.onCreateTodo;

this.todos.push(todo);

}

})

}

created(){

this.getData()

this.subscribe()

}

};

</script>

追加したのがこちらです。

  import { onCreateTodo } from './graphql/subscriptions';

1 2	import { onCreateTodo } from './graphql/subscriptions';

      subscribe(){
        API.graphql(graphqlOperation(onCreateTodo)).subscribe({
          next: (eventData) => {
            const todo = eventData.value.data.onCreateTodo;
            this.todos.push(todo);
          }
        })
      }

subscribe(){

API.graphql(graphqlOperation(onCreateTodo)).subscribe({

next: (eventData) => {

const todo = eventData.value.data.onCreateTodo;

this.todos.push(todo);

}

})

}

      this.subscribe()

1 2	this.subscribe()

$ npm run serve

1 2	$ npm run serve

npm run serve して手順にあるとおり、ブラウザ2つでテストしました。

できました！

アプリケーションのリリース

リリースすると、S3で静的なWebサイトとして公開できるとのことです。
いたれりつくせりですね。

$ amplify add hosting
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name myamplifyproject-20200628080745-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

$ amplify add hosting

? Select the environment setup: DEV (S3 only with HTTP)

? hosting bucket name myamplifyproject-20200628080745-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

今回はDEVのS3のみとしてますが、PRODにするとCloudFrontが使えるみたいです。
いたれりつくせりですね。

$ amplify status

Current Environment: test

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

$ amplify status

Current Environment: test

| -------- | ---------------- | --------- | ----------------- |

amplify status コマンドで確認すると、Hosting が追加されています。

$ amplify publish

Current Environment: test

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

UPDATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 08:10:55 GMT+0000 (Coordinated Universal Time) User Initiated
⠋ Updating resources in the cloud. This may take a few minutes...

~中略~

✔ All resources are updated in the cloud

Hosting endpoint: http://myamplifyproject-20200628080745-hostingbucket-test.s3-website-us-east-1.amazonaws.com


> myamplifyproject@0.1.0 build /home/ec2-user/environment/myamplifyproject
> vue-cli-service build


⠹  Building for production...

 WARNING  Compiled with 3 warnings                                                                                                                8:14:57 AM

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.82a4b24a.js (506 KiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (510 KiB)
      js/chunk-vendors.82a4b24a.js
      js/app.39380e66.js


 warning  

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                 Size               Gzipped

  dist/js/chunk-vendors.82a4b24a.js    506.22 KiB         146.54 KiB
  dist/js/app.39380e66.js              4.19 KiB           1.89 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

frontend build command exited with code 0
✔ Uploaded files successfully.
Your app is published successfully.
http://myamplifyproject-20200628080745-hostingbucket-test.s3-website-us-east-1.amazonaws.com

$ amplify publish

Current Environment: test

| -------- | ---------------- | --------- | ----------------- |

? Are you sure you want to continue? Yes

⠇ Updating resources in the cloud. This may take a few minutes...

UPDATE_IN_PROGRESS myamplifyproject-test-20200628070207 AWS::CloudFormation::Stack Sun Jun 28 2020 08:10:55 GMT+0000 (Coordinated Universal Time) User Initiated

⠋ Updating resources in the cloud. This may take a few minutes...

~中略~

✔ All resources are updated in the cloud

Hosting endpoint: http://myamplifyproject-20200628080745-hostingbucket-test.s3-website-us-east-1.amazonaws.com

> myamplifyproject@0.1.0 build /home/ec2-user/environment/myamplifyproject

> vue-cli-service build

⠹ Building for production...

WARNING Compiled with 3 warnings 8:14:57 AM

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

js/chunk-vendors.82a4b24a.js (506 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

app (510 KiB)

js/chunk-vendors.82a4b24a.js

js/app.39380e66.js

warning

webpack performance recommendations:

You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.

For more info visit https://webpack.js.org/guides/code-splitting/

File Size Gzipped

dist/js/chunk-vendors.82a4b24a.js 506.22 KiB 146.54 KiB

dist/js/app.39380e66.js 4.19 KiB 1.89 KiB

Images and other types of assets omitted.

DONE Build complete. The dist directory is ready to be deployed.

INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

frontend build command exited with code 0

✔ Uploaded files successfully.

Your app is published successfully.

http://myamplifyproject-20200628080745-hostingbucket-test.s3-website-us-east-1.amazonaws.com

完了しました。
最終行に出力されたS3の静的Webサイトエンドポイントでアプリケーションにアクセスできました。

AppSyncにはこちらのスキーマが作成されていました。

input CreateTodoInput {
    id: ID
    name: String!
    description: String
}

input DeleteTodoInput {
    id: ID
}

input ModelBooleanFilterInput {
    ne: Boolean
    eq: Boolean
}

input ModelFloatFilterInput {
    ne: Float
    eq: Float
    le: Float
    lt: Float
    ge: Float
    gt: Float
    contains: Float
    notContains: Float
    between: [Float]
}

input ModelIDFilterInput {
    ne: ID
    eq: ID
    le: ID
    lt: ID
    ge: ID
    gt: ID
    contains: ID
    notContains: ID
    between: [ID]
    beginsWith: ID
}

input ModelIntFilterInput {
    ne: Int
    eq: Int
    le: Int
    lt: Int
    ge: Int
    gt: Int
    contains: Int
    notContains: Int
    between: [Int]
}

enum ModelSortDirection {
    ASC
    DESC
}

input ModelStringFilterInput {
    ne: String
    eq: String
    le: String
    lt: String
    ge: String
    gt: String
    contains: String
    notContains: String
    between: [String]
    beginsWith: String
}

type ModelTodoConnection {
    items: [Todo]
    nextToken: String
}

input ModelTodoFilterInput {
    id: ModelIDFilterInput
    name: ModelStringFilterInput
    description: ModelStringFilterInput
    and: [ModelTodoFilterInput]
    or: [ModelTodoFilterInput]
    not: ModelTodoFilterInput
}

type Mutation {
    createTodo(input: CreateTodoInput!): Todo
    updateTodo(input: UpdateTodoInput!): Todo
    deleteTodo(input: DeleteTodoInput!): Todo
}

type Query {
    getTodo(id: ID!): Todo
    listTodos(filter: ModelTodoFilterInput, limit: Int, nextToken: String): ModelTodoConnection
}

type Subscription {
    onCreateTodo: Todo
        @aws_subscribe(mutations: ["createTodo"])
    onUpdateTodo: Todo
        @aws_subscribe(mutations: ["updateTodo"])
    onDeleteTodo: Todo
        @aws_subscribe(mutations: ["deleteTodo"])
}

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

input UpdateTodoInput {
    id: ID!
    name: String
    description: String
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

input CreateTodoInput {

id: ID

description: String

}

input DeleteTodoInput {

id: ID

}

input ModelBooleanFilterInput {

ne: Boolean

eq: Boolean

}

input ModelFloatFilterInput {

ne: Float

eq: Float

le: Float

lt: Float

ge: Float

gt: Float

contains: Float

notContains: Float

between: [Float]

}

input ModelIDFilterInput {

ne: ID

eq: ID

le: ID

lt: ID

ge: ID

gt: ID

contains: ID

notContains: ID

between: [ID]

beginsWith: ID

}

input ModelIntFilterInput {

ne: Int

eq: Int

le: Int

lt: Int

ge: Int

gt: Int

contains: Int

notContains: Int

between: [Int]

}

enum ModelSortDirection {

ASC

DESC

}

input ModelStringFilterInput {

ne: String

eq: String

le: String

lt: String

ge: String

gt: String

contains: String

notContains: String

between: [String]

beginsWith: String

}

type ModelTodoConnection {

items: [Todo]

nextToken: String

}

input ModelTodoFilterInput {

id: ModelIDFilterInput

description: ModelStringFilterInput

and: [ModelTodoFilterInput]

or: [ModelTodoFilterInput]

not: ModelTodoFilterInput

}

type Mutation {

createTodo(input: CreateTodoInput!): Todo

updateTodo(input: UpdateTodoInput!): Todo

deleteTodo(input: DeleteTodoInput!): Todo

}

type Query {

getTodo(id: ID!): Todo

listTodos(filter: ModelTodoFilterInput, limit: Int, nextToken: String): ModelTodoConnection

}

type Subscription {

onCreateTodo: Todo

@aws_subscribe(mutations: ["createTodo"])

onUpdateTodo: Todo

@aws_subscribe(mutations: ["updateTodo"])

onDeleteTodo: Todo

@aws_subscribe(mutations: ["deleteTodo"])

}

type Todo {

id: ID!

description: String

}

input UpdateTodoInput {

id: ID!

description: String

}

リソース削除

$ amplify delete
? 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 env:test
✔ Project deleted in the cloud
Project deleted locally.

$ amplify delete

? 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 env:test

✔ Project deleted in the cloud

Project deleted locally.

amplify deleteコマンドを実行して、CloudFormationスタックを削除します。
S3バケットはDELETE_SKIPPEDされてたので手動で削除しました。

最後にハンズオン環境として使ったCloud9を削除して終了です。