AWS Amplify バックエンド構築編 part1 〜TODOアプリ バックエンド構築〜

はじめに

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

今回は、Vue.jsを使ってToDoアプリを作成していきます。
機能としては、CRUD操作の中のC(Create)とR(Read)のみを実装します。

実装するアーキテクチャ

前提条件

• 環境構築
  
  • 開発環境構築編(ミドルウェア)
  • 開発環境構築編(フレームワーク)

開発の前に必要な環境構築について、上記２つのブログで言及しています。
こちらを準備しておかないと開発できません。必ずそちらを参照ください。

 構築手順

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

 1. Vue CLIからVueのプロジェクトを作成

アプリのフロントエンド側を作成するために、Vue CLIでVueのプロジェクトを作成しましょう。
Vue CLIは前提条件の、リンク先を参照してインストールしてください。

今回のアプリ名は「todo」とします。
作成したディレクトリに移動して、インストールされているか確認しましょう。

```
[ec2-user@amplify:~]$ vue create todo
[ec2-user@amplify:~]$ cd todo/
[ec2-user@amplify:todo]$ ll
合計 504
-rw-rw-r-- 1 ec2-user ec2-user 316 9月 10 06:03 README.md
-rw-rw-r-- 1 ec2-user ec2-user 73 9月 10 06:03 babel.config.js
drwxrwxr-x 809 ec2-user ec2-user 24576 9月 10 06:03 node_modules
-rw-rw-r-- 1 ec2-user ec2-user 462112 9月 10 06:03 package-lock.json
-rw-rw-r-- 1 ec2-user ec2-user 849 9月 10 06:03 package.json
drwxrwxr-x 2 ec2-user ec2-user 43 9月 10 06:03 public
drwxrwxr-x 4 ec2-user ec2-user 68 9月 10 06:03 src
```

 2. Amplifyモジュールをインストール 

Vueのプロジェクトの中で、以下２つの機能をバックエンド として実装するために、
２つのモジュールをインストールします。

• API機能
  • @aws-amplify/api
• メッセージング機能
  • @aws-amplify/pubsub

```
[ec2-user@amplify:todo]$ npm i @aws-amplify/api @aws-amplify/pubsub
```

インストール後に、npm run serveでテスト実行し、ブラウザから確認しましょう。
このとき、開発用インスタンスのGlobal ipを確認して、そのGlobal ipを「http://xx.xx.xx.xx:8080」のようにしてアクセスすると画面に表示されます。
ポートは必ず8080にしておきましょう。

```
[ec2-user@amplify:todo]$ curl globalip.me
xx.xx.xx.xx
[ec2-user@amplify:todo]$ npm run serve

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

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

DONE Compiled successfully in 1568ms 6:06:20 AM


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

Note that the development build is not optimized.
To create a production build, run npm run build.
```

 3. Amplify用プロジェクトを作成

AmplifyからAWSの各種サービスを利用するために、Amplifyプロジェクトを作成しましょう。
1で作成したVueプロジェクトの中で、下記、コマンドを実行してください。

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

実行後に、以下のような入力項目が表示されます。
基本デフォルトのままでいいです。今回はエディタのみ「None」にしています。

```
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project todo
? Enter a name for the environment dev
? Choose your default editor: None
? 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
```

入力項目を全て入力した後に、CloudFormationが起動してアプリケーションに必要なAWSのリソースが
自動的に作成されていきます。

amplify statusを実行することで、AWS上に反映されていないリソースの設定状態を確認できます。
ここで、なにも表示されていなければ問題ないです。

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

Current Environment: dev

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

 4. バックエンド機能として使用するAWSサービスを追加

次に、amplify addコマンドを使用して、Vueプロジェクトのバックエンド の機能として利用する
AWSサービスを追加します。

```
[ec2-user@amplify:todo]$ amplify add api
```

入力項目が基本デフォルトでにします。
本ブログでは、バックエンドリソースとしてDynamoDBとAppSyncを使ってTodoアプリを作成するため、
最後の入力項目は、「Single object with fields (e.g., “Todo” with ID, name, description)」を選択しましょう。
こちらを選択することで、AppSync側にTodoのスキーマ定義とCRUD操作を自動生成してくれます。


```
? 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: key
? 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
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
```

コマンドの実行が完了すると作成されたバックエンドリソース情報が、amplify statusの表に表示されるようになります。
amplify statusでバックエンド リソースが追加されているか確認してみましょう。
API機能が追加されていることが確認できると思います。

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

Current Environment: dev

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

 5. Amplifyの設定情報をAWS上に反映 

上記までの、設定内容をAWS上に反映させるために、amplify publishを実行しましょう。
入力項目はすべてデフォルトで問題ありません。
コマンド実行すると、CloudFormationが起動してUpdateStackが走り出します。


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

Current Environment: dev

| 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://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.

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


今回はここで終了です。

まとめ

今回は、Amplifyのバックエンド にAPI機能を追加する内容でした。
ただ、今回の内容だけでは、チュートリアルのVueアプリとフロントエンドのアプリと連携していないバックエンドリソースがあるだけです。
次回は、フロントエンドをTodoアプリに実装して、フロントエンドからバックエンドのリソースへの繋ぎ込みをやっていきます。