$ node -v
# v10.14.2

$ npm -v
# 6.4.1

# ionic のインストール
$ npm i -g ionic

# 新規プロジェクトの作成
$ ionic start ionic-amplify-demo

# （中略）

? Try Ionic 4? (y/N) y

# （中略）

? Starter template: (Use arrow keys)
❯ blank    | A blank starter project # Enter
  sidemenu | A starting project with a side menu with navigation in the content area
  tabs     | A starting project with a simple tabbed interface

# （中略）

────────────────────────────────────────────────────────────

? Install the free Ionic Appflow SDK and connect your app? (Y/n) n

# （中略）

[INFO] Next Steps:

       - Go to your newly created project: cd ./amplify-demo
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://beta.ionicframework.com/docs/building/scaffolding
       - Get Ionic DevApp for easy device testing: https://bit.ly/ionic-dev-app

$ cd amplify-demo
$ ionic serve

<ion-content padding>
-  The world is your oyster.
-  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://beta.ionicframework.com/docs/">docs</a> will be your guide.</p>
+   <ion-list>
+     <ion-item>
+       <ion-input type="password" placeholder="email" [(ngModel)]="email"></ion-input>
+     </ion-item>
+     <ion-item>
+       <ion-input type="password" placeholder="password" [(ngModel)]="password"></ion-input>
+     </ion-item>
+   </ion-list>
+
+   <div padding>
+     <ion-button shape="round" color="primary" expand="full" (click)="postLogin(email, password)">Sign In</ion-button>
+   </div>
</ion-content>

export class HomePage {

+  constructor() {} // 今回は不要ですが、習慣です
+  postLogin(email, password) {
+    // ここは後ほど実装します
+  }

}

$ npm i -S aws-amplify
$ npm i -S aws-amplify-angular
$ npm i -S ionic-angular

$ npm i -g @aws-amplify/cli

# + @aws-amplify/cli@0.1.38
# added 5 packages from 9 contributors, updated 55 packages and moved 1 package in 42.942s

$ amplify -h


  █████╗  ██╗    ██╗ ███████╗      █████╗  ███╗   ███╗ ██████╗  ██╗      ██╗ ███████╗ ██╗   ██╗
 ██╔══██╗ ██║    ██║ ██╔════╝     ██╔══██╗ ████╗ ████║ ██╔══██╗ ██║      ██║ ██╔════╝ ╚██╗ ██╔╝
 ███████║ ██║ █╗ ██║ ███████╗     ███████║ ██╔████╔██║ ██████╔╝ ██║      ██║ █████╗    ╚████╔╝
 ██╔══██║ ██║███╗██║ ╚════██║     ██╔══██║ ██║╚██╔╝██║ ██╔═══╝  ██║      ██║ ██╔══╝     ╚██╔╝
 ██║  ██║ ╚███╔███╔╝ ███████║     ██║  ██║ ██║ ╚═╝ ██║ ██║      ███████╗ ██║ ██║         ██║
 ╚═╝  ╚═╝  ╚══╝╚══╝  ╚══════╝     ╚═╝  ╚═╝ ╚═╝     ╚═╝ ╚═╝      ╚══════╝ ╚═╝ ╚═╝         ╚═╝

（以下略）

$ amplify configure # ここで自動で AWS マネジメントコンソールが開きます

Specify the AWS Region
? region:  (Use arrow keys) ap-southeast-2 #東京リージョンがないため

Specify the username of the new IAM user:
? user name:  (amplify-mxvPk) amplify-mxvPk #自動で IAM ページが開きますので、作成してください

Enter the access key of the newly created user:
? accessKeyId:  (<YOUR_ACCESS_KEY_ID>) A********** #実際はもっと長いです
? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>) C******************** #実際はもっと長いです
This would update/create the AWS Profile in your local machine
? Profile Name:  (default) default #あとで使います

Successfully set up the new user.

$ amplify init

Note: It is recommended to run this command from the root of your app directory
? Choose your default editor: Visual Studio Code #好きなものを選んでください
? Choose the type of app that you are building (Use arrow keys) javascript #今回はこちらを選んでください
Please tell us about your project
? What javascript framework are you using  ionic #もちろん ionic 一択ですw
? Source Directory Path:  src #変更している方は変更ディレクトリ名を指定してください
? Distribution Directory Path:  www 
? Build Command:  npm run-script build
? Start Command:  ionic 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  default #先ほど指定した profile name で。

（...以下略）

$ amplify status

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |

$ 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? #No, I will set up my own configuration.

? Select the authentication/authorization services that you want to use:  #User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and more)

? Please provide a friendly name for your resource that will be used to label this category in the project: #　cognitoa33e4684(任意の名前を指定してください)

? Please enter a name for your identity pool. # amplifydemoa33e4684_identitypool_a33e4684(デフォルトの方が良いかもです)

? Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) # No

? Do you want to enable 3rd party authentication providers in your identity pool? # No

? Please provide a name for your user pool: # amplifydemoa33e4684_userpool_a33e4684(ここもデフォルトで良いかと)

? Multifactor authentication (MFA) user login options: # OFF(二段階認証はオフで)

? Email based user registration/forgot password:  # Enabled (Requires per-user email entry at registration)

? Please specify an email verification subject:  # Your verification code(好きな文言に変更してください)

? Please specify an email verification message:  # Your verification code is {####}(好きな文言に変更してください)

? Do you want to override the default password policy for this User Pool? # Yes

? Enter the minimum password length for this User Pool:  # 8(今回は8文字)

? Select the password character requirements for your userpool:  # Requires Lowercase, Requires Uppercase, Requires Numbers, Requires Symbols(任意に選択してください)

? Userpool users are created with a standard set of attributes defined by the OpenID Connect specification.  Mark the required attributes below: # 
 (Press <space> to select, <a> to toggle all, <i> to invert selection) (今回は選択なし)

? Specify the app s refresh token expiration period (in days):  # 30(任意の有効期限を設定してください)

? Do you want to specify the user attributes this app can read and write?  # Yes(今回は読み込み、書き込み権限を付与)

? Specify read attributes: (Press <space> to select, <a> to toggle all, <i> to invert selection) # Email(今回はEmailのみで)

? Specify write attributes: (Press <space> to select, <a> to toggle all, <i> to invert selection) # 選択なし

Successfully added resource cognitoa33e4684 locally
Some next steps:
（略）

$ amplify add storage
? Please select from one of the below mentioned services (Use arrow keys) # Content (Images, audio, video, etc.) (今回は静的コンテンツですので)

? Please provide a friendly name for your resource that will be used to label this category in the project: # 好きな名前を設定してください

? Please provide bucket name: # こちらも任意の名前を設定してください

? Who should have access: # Auth and guest users(今回はログインしたユーザーもアクセス可とします)

? What kind of access do you want for Authenticated users (Use arrow keys) # read/write(認証済みユーザーは読み書き可)

? What kind of access do you want for Guest users (Use arrow keys) # read(ゲストは読みこみのみ可)

Successfully updated auth resource locally.
Successfully added resource sampleStorage0082 locally

Some next steps:
"amplify push" builds all of your local backend resources and provisions them in the cloud
"amplify publish" builds all of your local backend and front-end resources (if you added hosting category) and provisions them in the cloud

$ amplify push

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Auth     | cognito14b7e1bb | Create    | awscloudformation |
| Storage  | s3896eac7f      | Create    | awscloudformation |
? Are you sure you want to continue?  Yes #ここでなぜ続ける？って聞かれるんだろう🤔

# （しばし待つ）

✔ All resources are updated in the cloud

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

"scripts": {
  "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ionic serve; ionic serve",
  "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ionic build --prod; ionic build --prod"
}

+import Amplify from 'aws-amplify';
+import amplify from './aws-exports';
+
+Amplify.configure(amplify)

 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    AmplifyAngularModule,
     RouterModule.forChild([
       {
         path: '',
         component: HomePage
       }
     ])
   ],
+  providers: [AmplifyService],
   declarations: [HomePage]
 })

 <ion-content padding>
-  <ion-list>
-    <ion-item>
-      <ion-input type="email" placeholder="Email" value="" [(ngModel)]="email"></ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-input type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
-    </ion-item>
-  </ion-list>
-
-  <div padding>
-    <ion-button shape="round" color="primary" expand="full" (click)="postLogin(email, password)">Sign In</ion-button>
-  </div>
+  <amplify-authenticator></amplify-authenticator>
 </ion-content>

$ amplify -h

? We detected the project was initialized using an older version of the CLI. Do you want to migrate th
e project, so that it is compatible with the latest version of the CLI? #true

The CLI is going to take the following actions during the migration step:
1. If you have a GraphQL API, we will update the corresponding Cloudformation stack to support larger annotated schemas and custom resolvers.
In this process, we will be making Cloudformation API calls to update your GraphQL API Cloudformation stack. This operation will result in deletion of your AppSync resolvers and then the creation of new ones and for a brief while your AppSync API will be unavailable until the migration finishes
2. We will be updating your local Cloudformation files present inside the ‘amplify/‘ directory of your app project, for all the added categories so that it supports multiple environments
3. After the migration completes, we will give you the option to either push these Cloudformation files right away or you could inspect them yourselves and later push the updated Cloudformation files to the cloud
4. If for any reason the migration fails, the CLI will rollback your cloud and local changes and you can take a look at https://aws-amplify.github.io/docs/cli/migrate?sdk=js for manually migrating your project so that it’s compatible with the latest version of the CLI
5. ALL THE ABOVE MENTIONED OPERATIONS WILL NOT DELETE ANY DATA FROM ANY OF YOUR DATA STORES
Before the migration, please be aware of the following things:
1. Make sure to have an internet connection through the migration process
2. Make sure to not exit/terminate the migration process (by interrupting it explicitly in the middle of migration), as this will lead to inconsistency within your project
3. Make sure to take a backup of your entire project (including the amplify related config files)

? The CLI would be modifying your Amplify backend configuration files as a part of the migration proce
ss, hence we highly recommend backing up your existing local project before moving ahead. Are you sure
 you want to continue? #true
✔ Migrated your project successfully.
If you have added functions or interactions category to your project, please check the 'Auto-migration' section at https://github.com/aws-amplify/docs/blob/master/cli/migrate.md

Current Environment: NONE

（中略）

? Are you sure you want to continue? (Y/n) #Yes
⠏ Updating resources in the cloud. This may take a few minutes...

（中略）

✔ All resources are updated in the cloud