AWS Amplify バックエンド構築編 part2 〜TODOアプリ デプロイ〜

はじめに

AWS Amplifyのバックエンド構築編です。

前回は、Amplifyのバックエンド にAPI機能を追加する内容でした。
今回は、フロントエンドのTodoアプリをVue.jsで実装して、フロントエンドとバックエンドの連携を行い実際に静的ホスティングサイトとしてデプロイします。

実装するアーキテクチャ

 前回までの構築手順

1. Vue CLIからVueのプロジェクトを作成
2. Amplifyモジュールをインストール
3. Amplify用プロジェクトを作成
4. バックエンド 機能として使用するAWSサービスを追加
5. Amplifyの設定情報をAWS上に反映

 今回の構築手順

1. VueプロジェクトからAmplifyのバックエンドリソースへ連携
2. 静的webホスティング機能を有効化
3. Todoアプリのデプロイ

 1. VueプロジェクトからAmplifyのバックエンドリソースへ連携

前回のブログでは、フロントエンドとバックエンドの連携は行っていなかったのでl
ここからはフロント側を実装しながら連携を行いましょう。

Vueプロジェクトのエントリポイントであるmain.jsを修正します。
下記のようにAmplify.configure()メソッドを使うことで、フロントからバックエンド への連携が簡単にできます。


src/main.js
```
import Vue from 'vue'
import App from './App.vue'
import API from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

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

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')
```

次に、App.vueを修正します。
ここでは、ボタンを追加したときにAppSync経由でDynamoDBへ事前に決まった文字が登録されるような機能を実装します。
また、登録後に画面リロードするとDynamoDBに存在するデータを取得するようにします。

ボタン押下時に、 API.graphql() メソッドを用いて GraphQL の mutation を発行し、新規データを登録するように
実装しています。

src/App.vue
```
<template>
  <div id="app">
    <button @click="createNewTodo">Add</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';
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 }))
    this.getData()
  },
  async getData(){
    const todoData = await API.graphql(graphqlOperation(listTodos))
    this.todos = todoData.data.listTodos.items;
  }
},
created(){
  this.getData()
}
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
```

 2. 静的Webホスティング機能を有効化 

Vueアプリが完成したら、AWSのS3に静的ホスティングしてアプリを公開しましょう。
以下のコマンドで、ホスティング機能を有効化します。

```
[ec2-user@amplify:todo]$ 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 todo-20200910084515-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
```

有効化されたか確認します。

```
[ec2-user@amplify:todo]$ amplify status

Current Environment: dev

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

 3. Todoアプリのデプロイ

さて設定が完了したら、実際にデプロイしてみます。
amplify publishを実行することで静的コンテンツにビルドして、S3にアップロードして公開できます。


```
[ec2-user@amplify:todo]$ amplify publish
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

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


時間がたち、実行が完了すると以下のようなメッセージがひょうじされます。
こちらの最下行のURLにアクセスするとTodoアプリを表示できます。
実際にたちあげてみましょう。

```
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
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
http://todo-xxxxxxxxxxxx-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com
```

最後に

作成したアプリは不要であれば削除します。
下記コマンドを実行しましょう。
（このままでもよいですが、料金がかかるものもあります）

```
[ec2-user@amplify:todo]$ amplify delete
```

まとめ

これで、Amplifyをつかって簡単なTodoアプリを作成できました。
どうだったでしょうか。わりと簡単に構築できたのでしょうか。
是非、みなさんも手を動かしていろいろつくってみてください。