はじめに

AWS Amplify を使って WEB アプリを実装してみた（環境構築編）にて環境構築を行ったので、amplify + vue のプロジェクトを作成していきます

目標を決めないと作りこみに支障が出そうなので、 Cognito を使った認証アプリ（中身は結局未定）を作成したいと思っています

開発環境

Windows 10
nodist(nodeのバージョン管理)
- node 12.13.0

実装編

バックエンドの作成

認証機能を作るために、init を実行したディレクトリ配下で以下のコマンドを実行する

amplify add auth

対話式で設定を聞かれるので設定を行っていくと以下のようになる

 Do you want to use the default authentication and security configuration? Defau
lt configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
Successfully added resource *************(※) 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

（※) * はマスク

ここまで実施できると以下のコマンドを実行する

amplify push

(色々流れて)
√ All resources are updated in the cloud

src ディレクトリの中にある「aws-exports.js」に接続するための設定が追加されます

クラウド上の、ユーザプールやフェデレーティッドアイデンティティも構築されます

プロジェクトの新規作成

前準備

Vue-cli のインストール & アップデートする

npm i -g @vue/cli

（3.9.3 を元々入れててコマンドを実行したとき 4.0.5 までバージョンアップしていたことに驚く）

Vue のプロジェクトを新規構築する

vue create amplify-prj

選択肢が出てきますが、マニュアル作成しないと Router が最初から入らないので、マニュアルで作成する
（開発標準かわかりませんが Rails チックでルート制御出来ていいなと思っている！）

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

Prettier でのフォーマットをよく利用していたのでとりあえずこちらを選択してみる

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

Facebook のテストライブラリを利用する

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Pick a unit testing solution:
  Mocha + Chai
> Jest

後は細かい設定を実施するとプロジェクトの作成が行われる
以下のメッセージが表示されるとプロジェクトの作成は完了！


⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project amplify-prj.
👉  Get started with the following commands:

 $ cd amplify-prj
 $ npm run serve

VSC を起動して「Ctrl+@」でターミナルを起動してから
コマンドを実行して WEB ページを立ち上げてみる
(※ Ctrl + c で終了出来る)

 $ cd amplify-prj
 $ npm run serve

amplify を用いるために必要なライブラリを追加する

npm install aws-amplify
npm install aws-amplify-vue

ここまでの成果物は以下にアップしています
https://github.com/rararamorio/aws-amplify-example

おわりに

環境まで作りこめるかと思っていたのですが想像以上に記事が長くなるので、
今回はバックエンドとフロントエンドの初期化までとしたいと思います

※ この後この環境を用いて認証周りの実装を行っていきますが、設定ミスなどがあればやり直したり色々するかもしれないのでご了承ください
また認証機能を実装してみて想像以上に手順が少なければこちらに追記します

参考サイト

Vue.js＋Amplifyを駆使すればモダンなWebアプリを20分で公開できる
 Try #024 – AWS AmplifyとVue.jsでログイン機能を構築してみた