AWS Amplify でアプリケーション作成してみた AWS Cloud9 環境構築

::: note
本記事は以下のハンズオンをもとに実施しました。
:::

https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/

## AWS Cloud9 で開発環境を作成する。

AWS Cloud9 で開発環境を作成します。
名称と説明だけ入力し、あとはデフォルトで作成としたのですが、 VPC がなくて作成できませんでした。
※デフォルトVPC は削除済み

なので今回用に新たな VPC を作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/032bb3dd-71a6-dba6-b50e-18636cf8aeb8.png)


::: note warn
デフォルトVPCを使わず、新たにVPCを作成した場合は、パブリック IPv4 アドレスの自動割り当てを有効化してください。
有効化しないと、AWS Cloud9 が EC2 インスタンスにできません！
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/3c56ccd7-729b-ba4d-76f4-0f968b155af1.png)

再度 AWS Cloud9 の環境作成を試みます。
今回はインスタンスタイプも選択できるようになってます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/b86ec3d6-61a0-d317-0c5f-d5eaabad700e.png)

環境が作成されるまで、しばし待機します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/ef70e7d5-0031-15c5-7004-15f14aac1a3d.png)


::: note
AWS Cloud9 の使用のためのベストプラクティスが気になる方は、以下のリンクを参照してください。
:::

https://docs.aws.amazon.com/cloud9/latest/user-guide/ide.html

環境作成後に Cloud9 IDEを押下すると、以下のように表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/b19a7150-213c-8059-f03b-f3af024d0ba7.png)

## 必要 CLI のインストールから、テスト起動を実施する。

アプリケーション構築のため必要な、Vue CLI と Amplify CLI をインストールします。
AWS Cloud9 上で `npm i -g @vue/cli` と `npm i -g @aws-amplify/cli` を実行してください。

インストール後は `vue create request_form` を実行して、Vueプロジェクトを作成します。
設定方法は以下の通りにしてます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/0175877d-12fd-52a3-76fa-74d74d3f484a.png)

その後、AWS Cloud9 上で `npm run serve` が実行できるように、`/【プロジェクト名】/vue.config.js`ファイルの内容を以下のように書き換えます。

```diff_javascript:vue.config.js
- const { defineConfig } = require('@vue/cli-service')
- module.exports = defineConfig({
-   transpileDependencies: true
- })
+ module.exports = {
+  devServer: {
+    disableHostCheck: true
+  }
+ }

```
で実行してみたのですが、`disableHostCheck`プロパティが存在しないとエラーが吐かれてしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/bba0ecd8-064b-d582-a09c-0cd824717b46.png)

調べてみましたが、すでに削除されているようです。

https://github.com/webpack/webpack-dev-server/issues/4142

他の方法を調べてみたところ、serve コマンドの内容を変えることで対応可能できそうです。

https://qiita.com/tetsuya-zama/items/d6ffc28ed6d67abab037

一旦、`/【プロジェクト名】/vue.config.js`ファイルの内容を戻します。

```diff_javascript:vue.config.js
+ const { defineConfig } = require('@vue/cli-service')
+ module.exports = defineConfig({
+   transpileDependencies: true
+ })
- module.exports = {
-  devServer: {
-    disableHostCheck: true
-  }
- }

```

その後 `/【プロジェクト名】/package.json`ファイルの serve コマンドの箇所を以下のように書き換えました。
※public以降を追記すればOKです。

```diff_json:package.json
- "serve": "vue-cli-service serve",
+ "serve": "vue-cli-service serve --public ${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com",
```

`npm run serve` 後に Cloud9 IDE のPreview ＞ Preview Running Application を実行したところ、無事Vue.js のデフォルト画面が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/5cd509c1-9d54-2f7a-d13d-c2855856ad9b.png)

## Amplify 初期設定と、Vue.js プロジェクトを Amplify プロジェクトとして初期化する

`amplify configure`コマンドでAmplify CLI から機能追加・各リソースの構築ができる様に設定します。

またここで設定する IAM ユーザーには `AdministratorAccess-Amplify` ポリシーが付与してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/f876f529-d51a-dd57-396e-2eb462d00ed2.png)

設定の際は IAM ユーザーのリージョン名・アクセスキー認証情報・プロファイル名（デフォルト）を入力したら、初期設定は完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/f293d342-a9ef-14b9-d13d-37eaee460a09.png)

次に Vue.js プロジェクトのルートディレクトリに移動し、 `amplify init` で Amplify プロジェクトとして初期化します。

以下のように設定し、Amplify プロジェクトとして初期化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764512/7ead20dc-08e9-1838-7bc4-01b2d2040203.png)

成功すれば初期化が完了します。

お疲れさまでした。
次回は Amplify プロジェクトに API の追加を行おうと思います。

## 参考文献

https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/

https://docs.aws.amazon.com/cloud9/latest/user-guide/ide.html

https://github.com/webpack/webpack-dev-server/issues/4142

https://qiita.com/tetsuya-zama/items/d6ffc28ed6d67abab037

https://qiita.com/Junpei_Takagi/items/f2bc567761880471fd54