1. morio1101

    Posted

    morio1101
Changes in title
+AWS Amplify を使って WEB アプリを実装してみた(プロジェクト作成編)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,167 @@
+# はじめに
+[AWS Amplify を使って WEB アプリを実装してみた(環境構築編)](https://qiita.com/morio1101/items/368564dc92423c96d06c)にて環境構築を行ったので、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」に接続するための設定が追加されます
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532289/5eb4e156-7621-885d-7771-f37b02a51748.png)
+
+クラウド上の、ユーザプールやフェデレーティッドアイデンティティも構築されます
+
+
+## プロジェクトの新規作成
+### 前準備
+
+Vue-cli のインストール & アップデートする
+
+```
+npm i -g @vue/cli
+```
+(3.9.3 を元々入れててコマンドを実行したとき 4.0.5 までバージョンアップしていたことに驚く:hushed:)
+
+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
+```
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532289/ae320ac1-26df-8dd7-1947-9c47fd0481f0.png)
+
+amplify を用いるために必要なライブラリを追加する
+
+```
+npm install aws-amplify
+npm install aws-amplify-vue
+```
+
+ここまでの成果物は以下にアップしています
+https://github.com/rararamorio/aws-amplify-example
+
+# おわりに
+
+環境まで作りこめるかと思っていたのですが想像以上に記事が長くなるので、
+今回はバックエンドとフロントエンドの初期化までとしたいと思います
+
+※ この後この環境を用いて認証周りの実装を行っていきますが、設定ミスなどがあればやり直したり色々するかもしれないのでご了承ください
+また認証機能を実装してみて想像以上に手順が少なければこちらに追記します
+
+# 参考サイト
+
+[Vue.js+Amplifyを駆使すればモダンなWebアプリを20分で公開できる](https://qiita.com/shunp/items/d491adfadd570f66f990)
+[Try #024 – AWS AmplifyとVue.jsでログイン機能を構築してみた](https://day-journal.com/memo/try-024/)