とりあえずamplify動かしてcognitoとか設定できたよって話。

# 経緯
現在、業務でＡＷＳを扱っており、多機能でとても便利だけれども全く持って使いこなせてる感覚がなかったので、試しにソロで何かしてみようと思ったのがきっかけ。

# やること
とりあえずはAWS Amplifyを用いて、Cognitoの設定やAppSyncの設定ができるところまで。


# 環境の設定をしてみた
## 準備する環境
・Visual Studio Code(以下vscode)


## AWS Amplifyの準備
### AWS Amplifyについて
もともと思い立ったのも職場の先輩にこれの存在を教えてもらったからなので、これを使いましょう。
AWS Amplify(以下amplify)の公式サイトは[こちら](https://aws-amplify.github.io/)
簡単に言えばサーバーレスなWebアプリケーションがJavaScriptで簡単に作れますよみたいな感じ。
下の方には日本語の漫画まで設置しているので、なんとなく~~進研ゼミみたいだなって思いました。~~ 

### インストール
amplifyをインストールしていきます。
以下のコマンドを入力。
```
PS D:\vscode-projects\vue-project> npm i -g @aws-amplify/cli
```
でインストール終わったら実行してみましょう。
ちなみになぜディレクトリがvue-projectなのかというと、vue.jsの勉強をしようとしてたから~~(するとは言ってない)~~
```
PS D:\vscode-projects\vue-project> amplify
```
上記のコマンドで実行すると
![2019062904.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/fac4146c-9cd9-3d90-4185-a831aaff0125.png)
こんな感じに自己主張してきます。
バージョンとかによってはAAも変わるっぽいです。

つづいてIAMの設定をしていきましょう。
以下のコマンドを打つと、AWSのサインイン画面に飛ぶので、ご自身のアカウントでログインしてください。

```
PS D:\vscode-projects\vue-project> amplify configure
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
```

サインイン完了後はターミナルでEnterキーを押下し、順にregion,user_name,accessKeyId,secretAccessKey,profile_nameを入力して最後にEnter押しちゃいましょう。
最後に文章で

```
? Profile Name:  vue-project

Successfully set up the new user.
PS D:\vscode-projects\vue-project>
```

とSuccessしていたら完了です。
マネジメントコンソールを確認してみても先ほど作成したユーザーがいるはずです。
![2019062905.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/96cc2ce4-80b2-0a89-53d9-942f4ca0db48.png)
なお今回はテストだし、と思って権限をフルアクセスにしちゃってますが、実際問題では何に使うためのユーザなのか考慮したうえで、権限周りを設定するはずです。
私には知識がなかったのもあり、今回はめんどくさがってフルアクセスにしました。


### amplifyに情報を登録する
どうもインストールだけじゃamplifyはダメで、いろいろと情報を登録しないといけないようです。
```
PS D:\vscode-projects\vue-project> amplify init
```
上記コマンドから、いろいろと聞かれるので全部登録しちゃいましょう。

```
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project vue-project
? Enter a name for the environment vuepro
? Choose your default editor: Visual Studio Code
? 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
? Build Command:  yarn build
? Start Command: yarn serve
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use vue-project
\ Initializing project in the cloud...

CREATE_IN_PROGRESS UnauthRole       AWS::IAM::Role  Sat Jun 29 2019 05:40:52 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Sat Jun 29 2019 05:40:53 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS AuthRole         AWS::IAM::Role  Sat Jun 29 2019 05:40:53 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS UnauthRole       AWS::IAM::Role  Sat Jun 29 2019 05:40:53 GMT+0900 (GMT+09:00) Resource creation Initiated
/ Initializing project in the cloud...

CREATE_IN_PROGRESS AuthRole         AWS::IAM::Role  Sat Jun 29 2019 05:40:54 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Sat Jun 29 2019 05:40:54 GMT+0900 (GMT+09:00) Resource creation Initiated
- Initializing project in the cloud...

CREATE_COMPLETE AuthRole AWS::IAM::Role Sat Jun 29 2019 05:41:05 GMT+0900 (GMT+09:00)
\ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Sat Jun 29 2019 05:41:15 GMT+0900 (GMT+09:00)
CREATE_COMPLETE UnauthRole       AWS::IAM::Role  Sat Jun 29 2019 05:41:15 GMT+0900 (GMT+09:00)
/ Initializing project in the cloud...

CREATE_COMPLETE vue-project-vuepro-20190629054049 AWS::CloudFormation::Stack Sat Jun 29 2019 05:41:19 GMT+0900 (GMT+09:00)
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify <category> add" will allow you to add features like user login or a backend API
"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

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

PS D:\vscode-projects\vue-project>
```
私はこんな感じに登録しました。
ほとんど参考のままですかね。
ビルドとかのコマンドを少し変更したくらいです。


## ユーザ認証の実装
### Cognitoの設定
AWS CognitoはAWS側でユーザIDとパスワード、Eメールのセンシティブな情報を持ってくれるサービスです。
管理者側で保管しなくていいので、保守コストの削減が期待できます。
また近年、個人情報問題が非常にナイーブなので、そういったリスクに対応することもできますね。
公式は[こちら](https://aws.amazon.com/jp/cognito/)

そんなcognitoを使ってみましょう。
マネジメントコンソールから作る方法もありますが、せっかくvscodeのターミナルを開いているので、そっから行います。

```
PS D:\vscode-projects\vue-project> amplify auth add
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 with Social Provider (Federation)
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in when using your Cognito User Pool? Email
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up? (Press <space> to select, <a> to toggle all, <i> to invert selection)Email
 What domain name prefix you want us to create for you? vuepro
 Enter your redirect signin URI: http://localhost:19002/? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:19002/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: (Press <space> to select, <a> to toggle all, <i> to invert selection)
Successfully added resource vueprojectb391d61a 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

PS D:\vscode-projects\vue-project> 
```

上記のように設定しました。
どうせなので未登録のユーザもログインできるような設定ですね。
で、設定が終わったら、それをpushしましょう
```
PS D:\vscode-projects\vue-project> amplify auth push
```
この後のログは最高に長いので写真は割愛で
最後にこのログさえ出てれば大丈夫なようです。
```
√ All resources are updated in the cloud
```
このあとマネジメントコンソールで確認してみると
![2019062906.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/08e230f2-261c-a567-7215-881723200fd0.png)
![2019062907.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/402b6431-e240-afd9-7c8a-357a9717aaba.png)
確りと出来上がっているのが確認できます。

### AppSyncの設定
リアルタイム通信ができたほうがかっこいい気がするので、こいつも設定していきます。
```
PS D:\vscode-projects\vue-project> amplify api add
```
設定内容は以下の通り

```
? Please select from one of the below mentioned services GraphQL
? Provide API name: vueproject
? Choose an authorization type for the API Amazon Cognito User Pool
Use a Cognito user pool configured as a part of this project
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No

GraphQL schema compiled successfully.
Edit your schema at D:\vscode-projects\vue-project\amplify\backend/api/vueproject/schema.graphql or place .graphql files in a directory at D:\vscode-projects\vue-project\amplify\backend/api/vueproject/schema
Successfully added resource vueproject 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
```

ログの最後の方に、先と同様にpushしろとあるので、実行します。
今回もログが長いので割愛
とりあえず下記のようにupdatedできていればＯＫ
```
√ All resources are updated in the cloud
```

マネジメントコンソールからも確認できる
![2019062908.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/3dfa58c0-a345-2c3e-c8a2-741e594dc7e0.png)

![2019062909.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318745/3e1bf6df-2f10-6653-c9fe-4c4ce3cbab1b.png)


と、とりあえずはここまででしょうか。
本当はこっからvueとかで何か作るのにつながるんでしょうけど、いかんせん全くの門外漢なもので。。。
どこかに逃げ込めないかしら。。。