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

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

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

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

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

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

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

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

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

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

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

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

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

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

vue.config.js

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

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

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

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

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

vue.config.js

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

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

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 のデフォルト画面が表示されました。

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

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

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

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

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

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

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

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

参考文献