amplifyとvue.jsとcloud9でユーザー認証付きのメモアプリを作る。フロントエンドのvueは、サンプルをコピペするだけで自分では作らない！
参照URL
https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/
環境作り
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
# フロント周りは作らないので、git cloneで持ってくる git clone https://github.com/matsuihidetoshi/vueamplifydev.git # cloud9だと最初からnodeが入っている node -v v10.22.1 # vue.jsをインスト npm i -g @vue/cli # amplifyもインスト npm i -g @aws-amplify/cli # vueプロジェクト生成 vue create notes # 一番下のマニュアルを選択 Vue CLI v4.5.6 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) ❯ Manually select features # PWA,Router,Vuexの３つをスペースで選択してエンター ? Check the features needed for your project: ◉ Choose Vue version ◉ Babel ◯ TypeScript ◉ Progressive Web App (PWA) Support ◉ Router ❯◉ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # vue.jsのバージョンを指定。3系はpreviewだから2系で ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 2.x 3.x (Preview) # vue routerのヒストリーモードにするか？ ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y # ESLint(JSの静的検証ツール)です。デフォルトの ESLint with error prevention onlyのままでOK Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier # ESLintの検証タイミングは、セーブした時に(コミット時もある) ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit # 設定ファイルの場所。デフォのままでOK Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json # 今回の設定を保存して、次回以降も使うか？デフォがNoなので、保存しない方向で…。 ? Save this as a preset for future projects? (y/N) n |
vue プロジェクト生成が終わると、ディレクトリ移動して、サーバ起動せよというメッセージになるので、実行する
|
1 2 |
cd notes npm run serve |
この状態で、cloud9メニューの Preview -> Preview Running Application を実行するとInvalid Host header と表示されアクセスできない！！
対策として、notesプロジェクト・フォルダ直下にvue.config.jsファイルを配置して、以下の記述をすれば最初の画面にたどり着けた
|
1 2 3 4 5 |
module.exports = { devServer: { disableHostCheck: true } } |
原因： Cloud9の環境下では、その配下のEC2としては’localhost:8080’で上がっており、それに対してVFSのドメイン名(${Cloud9のID}.vfs.cloud9.${リージョン}.amazonaws.com)でアクセスする仕組みであるため、両者が一致せずエラーと判断される。
amplifyの初期設定(接続設定)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
amplify configure Scanning for plugins... Plugin scan successful Follow these steps to set up access to your AWS account: Sign in to your AWS administrator account: https://console.aws.amazon.com/ Press Enter to continue # リージョンを指定 Specify the AWS Region ? region: eu-west-1 eu-west-2 eu-central-1 ❯ ap-northeast-1 ap-northeast-2 ap-southeast-1 ap-southeast-2 (Move up and down to reveal more choices) # amplifyを実行するユーザーを新規追加。ユーザ名は乱数だけど自分の好きな名前でも良い。これって使いまわせないのか？ ? user name: (amplify-WJ4uz) # URLをクリックしてAdministratorAccess権限のユーザを作らされる。 Complete the user creation using the AWS console https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-xxxxx&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess Press Enter to continue |
amplify実行ユーザ作成後にブラウザから、ユーザー名・アクセスキーID・シークレットアクセスキーを取得できる。
使いまわすなら、これらの3種類の認証情報があれば大丈夫。
cloud9のコンソール画面に戻って、コピペで入力する。
|
1 2 3 4 5 6 7 |
Enter the access key of the newly created user: ? accessKeyId: ******************** ? secretAccessKey: **************************************** This would update/create the AWS Profile in your local machine ? Profile Name: default Successfully set up the new user. |
amplifyプロジェクトを生成する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
# 作っておいたvueプロジェクトに移動 pwd /home/ec2-user/environment/notes # amplifyプロジェクトを生成する amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project notes ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code Atom Editor Sublime Text IntelliJ IDEA Vim (via Terminal, Mac OS only) Emacs (via Terminal, Mac OS only) ❯ None # なぜかcloud9は無いので、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 # ビルドとサーブのコマンドは、-script無しにする。 ? Build Command: (npm run-script build) npm run build ? Start Command: (npm run-script serve) npm run serve あとはエンター連打で、AWSプロファイルを生成してcloudformationが生成するのを待つだけ。 |
ユーザー認証機能の追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
amplify add auth Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? Default configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Username ❯ Email Phone Number Email or Phone Number I want to learn more. # ログインIDはEmailにする。Usernameがデフォ # push & publishしろ！って出るけど、最後にやるので後回し Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud |
バックエンドのAPIを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
amplify add api # 近頃はREST APIよりも、facebook謹製のGraphQLが流行りだよな～。 ? Please select from one of the below mentioned services: (Use arrow keys) ❯ GraphQL REST ? Provide API name: notes # 認証はcognitoを使う ? Choose the default authorization type for the API API key ❯ Amazon Cognito User Pool IAM OpenID Connect ? Do you want to configure advanced settings for the GraphQL API No, I am done. ? Do you have an annotated GraphQL schema? No # GraphQL のスキーマの雛形は一番下のObjects with fine-grained access control ? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description) One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) ❯ Objects with fine-grained access control (e.g., a project management app with owner-based authorization) # GraphQLスキーマを編集にYesして完了！ Do you want to edit the schema now? Yes Successfully added resource notes locally Some next steps: "amplify push" will build all your local backend resources and provision it in the cloud "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud |
/notes/amplify/backend/api/notes/schema.graphqlファイルを編集して、GraphQLスキーマの変更(最後のupdatedAtを追加しただけ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
type Task @model @auth( rules: [ { allow: groups, groups: ["Managers"], queries: null, mutations: [create, update, delete] } { allow: groups, groups: ["Employees"], queries: [get, list], mutations: null } ] ) { id: ID! title: String! description: String status: String } type PrivateNote @model @auth(rules: [{ allow: owner }]) { id: ID! content: String! updatedAt: String #この1行のみ追加 } |
認証とAPIを、AWSクラウド上に反映(構築)する。バックエンドはこれで完成。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
amplify push ✔ Successfully pulled backend environment dev from the cloud. Current Environment: dev | Category | Resource name | Operation | Provider plugin | | -------- | ------------- | --------- | ----------------- | | Auth | notes20b60931 | Create | awscloudformation | | Api | notes | Create | awscloudformation | # 本当にサーバの上げて良いの？ ? Are you sure you want to continue? Yes GraphQL schema compiled successfully. # 自動生成する GraphQL コードの言語はJSで！ Edit your schema at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema.graphql or place .graphql files in a directory at /home/ec2-user/environment/notes/amplify/backend/api/notes/schema ⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ Uploading Files...⠋ ? Do you want to generate code for your newly created GraphQL API Yes ? Choose the code generation language target (Use arrow keys) ❯ javascript typescript flow # あとはエンター連打で、cloudformationによりAWS環境が構築されるのを待つ。数分かかる。 ✔ Generated GraphQL operations successfully and saved at src/graphql ✔ All resources are updated in the cloud |
バックエンドは完成したので、フロントエンドをvueで作る。
|
1 2 |
# amplify用のvueパッケージをインスト npm i aws-amplify aws-amplify-vue lodash |
フロントエンドの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
|
1 |
amplify delete |
cloud9も削除しておけば、追加料金はかからない。
amplify実行ユーザも削除しておく？
う～ん、デプロイは別にいいから、vue.jsの実装部分をもっと解説して欲しかったな。
コピペするだけだと、あんまり勉強にならない。