メサイア・ワークス

amplifyとvue.jsとcloud9でユーザー認証付きのメモアプリを作る。フロントエンドのvueは、サンプルをコピペするだけで自分では作らない!

amplifyとvue.jsとcloud9でユーザー認証付きのメモアプリを作る。フロントエンドのvueは、サンプルをコピペするだけで自分では作らない!

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

環境作り

vue プロジェクト生成が終わると、ディレクトリ移動して、サーバ起動せよというメッセージになるので、実行する

この状態で、cloud9メニューの Preview -> Preview Running Application を実行するとInvalid Host header と表示されアクセスできない!!
対策として、notesプロジェクト・フォルダ直下にvue.config.jsファイルを配置して、以下の記述をすれば最初の画面にたどり着けた

原因: Cloud9の環境下では、その配下のEC2としては’localhost:8080’で上がっており、それに対してVFSのドメイン名(${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com)でアクセスする仕組みであるため、両者が一致せずエラーと判断される。

amplifyの初期設定(接続設定)

amplify実行ユーザ作成後にブラウザから、ユーザー名・アクセスキーID・シークレットアクセスキーを取得できる。
使いまわすなら、これらの3種類の認証情報があれば大丈夫。

cloud9のコンソール画面に戻って、コピペで入力する。

amplifyプロジェクトを生成する

ユーザー認証機能の追加

バックエンドのAPIを追加

/notes/amplify/backend/api/notes/schema.graphqlファイルを編集して、GraphQLスキーマの変更(最後のupdatedAtを追加しただけ)

認証とAPIを、AWSクラウド上に反映(構築)する。バックエンドはこれで完成。

バックエンドは完成したので、フロントエンドをvueで作る。

フロントエンドのvueは、サンプルコードをコピペするだけで自分では作らない!

localise.js
ログイン画面を日本語メッセージにするための設定を記述したファイルです。
vueamplifydev/src/localize.js を notes/src/localize.js となる様にコピーします。

SignIn.vue
認証機能を提供するコンポーネントです。
vueamplifydev/src/components/SignIn.vue を notes/src/components/SignIn.vue となる様にコピーします。

PrivateNote.vue
今回の主要な機能であるメモ機能を提供するコンポーネントです。
vueamplifydev/src/components/PrivateNote.vue を notes/src/components/PrivateNote.vue となる様にコピーします。

store/index.js
Vuex を使って状態管理をするためのファイルです。
ログインユーザーの情報を管理してページや API へのアクセス制御に使用します。vueamplifydev/src/store/index.js の内容を notes/src/store/index.js に上書きします。

main.js
アプリケーションのエントリーポイントになるファイルです。 Amplify 関連のパッケージを導入するために記述を追加します。
vueamplifydev/src/main.js の内容を notes/src/main.js に上書きします。

router/index.js
ルーティングの設定を記述するファイルです。
store/index.js で管理しているユーザー情報を使ってページのアクセス制御をします。
vueamplifydev/src/router/index.js の内容を notes/src/router/index.js に上書きします。
App.vue
アプリケーションの共通レイアウトのコンポーネントです。 各ページへのナビゲーションを追加します。
vueamplifydev/src/App.vue の内容を notes/src/App.vue に上書きします。

amplifyプロジェクトとgithubレポジトリをリンクする。
ビルドするためのロールを生成ボタンを押す。Amplify – Backend Deploymentが選択された状態なので、ひたすら次のステップボタンを押すだけ。
※アクセス権限ポリシーがAdministratorAccessになっているけど、良いのだろうか…。
ロール amplifyconsole-backend-role が作成されました。と表示されればOK

amplifyコンソール「ビルド設定の構成」に戻って、Select an existing service role or create a new one so Amplify Console may access your resourcesで、amplifyconsole-backend-roleを選択。
1分位待たないと表示されなかった…。
保存してデプロイボタンを押す。10分くらいするとデプロイが完成する(プロビジョン→ビルド→デプロイ→検証)

applifyapp.comのURLで公開された状態になる。

amplifyでの削除方法。AWSコンソールから削除してもOK

cloud9も削除しておけば、追加料金はかからない。
amplify実行ユーザも削除しておく?

う~ん、デプロイは別にいいから、vue.jsの実装部分をもっと解説して欲しかったな。
コピペするだけだと、あんまり勉強にならない。

モバイルバージョンを終了