はじめに
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でログイン機能を構築してみた