Amplify + Vue + GitHubでWebアプリの自動デプロイ環境を構築し、開発を始められる状態にする手順

Amplify + Vue + GitHubを用いてWebアプリの自動デプロイ環境を構築を構築します。

手動デプロイ、自動デプロイ、ブランチ名規則による自動デプロイ、プルリクエストによる自動デプロイの設定をします。


# 前提
- AWSアカウントは所持している

# ローカル環境準備
## Node.js/npmのインストール
> Amplify CLIではNode.jsで10.x、npmでは6.x以降のバージョンが推奨されています

なので、環境を確認。インストールされていなかったりバージョンが古い場合はアップデートする。

```
$ node -v; npm -v
v14.7.0
6.14.7
```

## Javaのインストール
> Amplify MockingはOpenJDK 1.8 以降のJavaのランタイムを必要とします

なので、環境を確認。インストールされていなかったりバージョンが古い場合はアップデートする。

```
$ java -version
openjdk version "1.8.0_265"
OpenJDK Runtime Environment Corretto-8.265.01.1 (build 1.8.0_265-b01)
OpenJDK 64-Bit Server VM Corretto-8.265.01.1 (build 25.265-b01, mixed mode)
```

## Amplify CLIのインストール
```
$ npm install -g @aws-amplify/cli@4.16.1
(略)
```

## Vue CLIのインストール
```
$ npm install -g @vue/cli@4.0.5
(略)
```

## Amplify CLIの設定
```
$ 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/
```

AWSのログイン画面がブラウザで開かれるので、ログインする。

ログイン後、ターミナルに戻って、Enter。

```
Press Enter to continue
```

リージョンを選択する。

```
Specify the AWS Region
? region:  
  eu-west-1 
  eu-west-2 
  eu-central-1 
❯ ap-northeast-1 
  ap-northeast-2 
  ap-southeast-1 
  ap-southeast-2 
(Move up and down to reveal more choices)
```

IAMユーザーを作成する。

```
Specify the username of the new IAM user:
? user name:  amplify-hoge
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-hoge&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue
```

ブラウザで開かれるので、画面に従って作成。

- ユーザー名を確認し、アクセスの種類で「プログラムによるアクセス」のチェックを確認して「次のステップ：アクセス権限」へ
- 「AdministratorAccess」のチェックを確認して「次のステップ：タグ」へ
- タグを追加する場合は追加して「次のステップ：確認」へ
- 内容を確認し「ユーザーの作成」
- 画面は閉じずにそのまま保持

ターミナルに戻り、先程の画面のIDやアクセスキーの値を入力。

```
Press Enter to continue

Enter the access key of the newly created user:
? accessKeyId:  **********
? secretAccessKey:  ********************
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify-hoge

Successfully set up the new user.

```




# Vueプロジェクトの作成
## セットアップ
```
$ vue create hoge
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes
```

接続の確認が出たら「Y」。

```
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 
```
「Manually select features」を選択してEnter。

```
? 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
```
Routerが未選択状態なので、Routerを選択肢てスペースキーで選択状態にしてEnter。

残りの選択肢はデフォルトのままEnter。

## アプリの起動確認
```
$ cd hoge
$ npm run serve
```

起動するとURLが表示されるので、ブラウザで確認。

```
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.5:8080/
```

Ctrl + C で停止。

# UIコンポーネントのインストール
それっぽい見た目になるよう、UIコンポーネントを利用する。

```
$ npm install vue --save
$ npm install vue-material element-ui --save
$ npm install @aws-amplify/ui-vue --save
(略)
```

# バックエンドのセットアップ
プロジェクトのディレクトリにて実行する。

```
$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project hoge
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? 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:  npm run-script build
? Start Command: npm run-script 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 amplify-hoge
```

空の表が出力されることを確認。

```
$ amplify status

Current Environment: dev

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



# アプリケーション全体で使用するスタイルの作成

任意のCSSを記述する。

```
$ touch src/assets/style.css
$ vim src/assets/style.css
```

# ソースコードを配置
[AWS Amplify ハンズオン アプリケーションの雛形を作成 - AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](
https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/amplify/amplify-router/) のソースコードを利用して配置する。

- src/router/index.js
- src/App.vue
- src/main.js
- src/Chat.vue
- src/AI.vue


# 動作確認
先程はnpm経由で確認したものを、amplify経由でローカル確認する。

```
$ amplify serve
(略)
 ERROR  Failed to compile with 7 errors                                                                                                                                                 13:23:11

These dependencies were not found:

* core-js/modules/es.object.to-string in ./src/router/index.js
* vue in ./src/main.js, ./src/App.vue and 4 others

To install them, you can run: npm install --save core-js/modules/es.object.to-string vue
```

となる場合、以下で回避。

```
$ vi babel.config.js 
```
設定を修正。

```
module.exports = { 
  presets: [
    //'@vue/cli-plugin-babel/preset'
    ["@vue/app", { useBuiltIns: "entry" }]
  ]
}
```

```
$ npm install --save vue
```

再度実行し、URLを取得。

```
$ amplify serve
(略)
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.5:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
```

# Amplify Vueモジュールのインストール
```
$  npm i aws-amplify aws-amplify-vue
(略)
```

# Auth機能のセットアップ
```
$ amplify add auth
```

選択肢はすべてデフォルトのままEnter。

```
$ amplify status

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | hoge7f13904xxxxxxx | Create    | awscloudformation |
```

Authが追加されていることを確認。

これをamplify pushでクラウドに反映する。「Are you sure you want to continue?」はデフォルトのYを選択し、クラウドに反映されるのを待つ。

```
$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | hoge7f13904xxxxxxx | Create    | awscloudformation |
? Are you sure you want to continue? Yes
⠏ Updating resources in the cloud. This may take a few minutes...
(略)
```

ここまでで、Amazon  Cognitoの準備が完了。

# サインインフォームの表示

```
$ vim src/main.js
```

```
$ vim src/App.vue
```

[AWS Amplify ハンズオン 認証認可機能の追加 - AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](
https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/amplify/amplify-auth/) に従い、追記する。


```
$ amplify serve
```

ローカルの画面から「Create account」でアカウントを作って認証の動作確認を実施。メールアドレスによる認証コードの機能もこれで利用可能に。

# サインアウトボタンの表示

```
$ vim src/App.vue
```

[AWS Amplify ハンズオン 認証認可機能の追加 - AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](
https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/amplify/amplify-auth/) に従い、追記する。


```
$ amplify serve
```

ローカルの画面で動作確認。

# ウェブホスティング
## 手動デプロイ
```
$ amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish
```

デフォルトの選択肢でEnter。

```
$ amplify status

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting     | Create    | awscloudformation |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |


No amplify console domain detected
```

Hostingが追加される。

```
$ amplify publish
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting     | Create    | awscloudformation |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |
? Are you sure you want to continue? Yes
(略)
```
「Are you sure you want to continue?」はデフォルトの「Y」を選択し、反映を待つ。末尾にURLが表示されるので、そのURLにアクセスするとホスティングされたアプリを確認可能。

## 環境の追加
自動ホスティングにより、GitHubを介してそれぞれの環境に自動反映されるよう、まずは各環境を用意する。

```
$ amplify env list

| Environments |
| ------------ |
| *dev         |
```

今は、最初に作成した開発環境の「dev」のみ。

ここに「staging」環境を追加する。

```
$ amplify env add 
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? No
? Enter a name for the environment staging
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 amplify-hoge
```

「Do you want to use an existing environment?」はデフォルトではなく「No」にする。「Enter a name for the environment staging」は「staging」、その他はデフォルト。

```
$ amplify env list

| Environments |
| ------------ |
| dev          |
| *staging     |
```

stagingが追加されている。なお、「*」がついているものが現在利用している環境。

```
$ amplify env checkout dev
✔ Initialized provider successfully.
Initialized your environment successfully.

$ amplify env list

| Environments |
| ------------ |
| *dev         |
| staging      |

```

環境の切り替えは「amplify env checkout」で行う。



## 自動デプロイ
GitHubと連携した自動デプロイをしたい場合はこちらの設定を行う。

ここまでで用意したソースコードをGitHubにPushしておく。

ここまでの手動手順で設定した既存のHostingを解除する必要があるので、解除する。

```
$ amplify status

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |
| Hosting  | amplifyhosting     | No Change | awscloudformation |


Amplify hosting urls: 
┌──────────────┬───────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                    │
├──────────────┼───────────────────────────────────────────┤
│ dev          │ https://dev.xxxxxxxxxxxxxx.amplifyapp.com │
└──────────────┴───────────────────────────────────────────┘

$ amplify remove hosting

? Are you sure you want to delete the resource? This action deletes all files related to this resource from the backend directory. Yes
Successfully removed resource

$ amplify status

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting     | Delete    | awscloudformation |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |
```

Hosting解除の設定を反映する。

```
$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting     | Delete    | awscloudformation |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |
? Are you sure you want to continue? Yes
```


次に、Amplify ConsoleでHostingするための設置を追加する。

「Choose a type」で「Continuous deployment (Git-based deployments)」を選択。

すると、ブラウザで設定画面が開かれる。

「GitHub」を選択し、「Connect branch」。

GitHubの「Authorize AWS Amplify」の画面が表示されるので、権限許可。

再び、Amplify Consoleの画面に戻るので、自動デプロイをさせたいリポジトリとブランチを設定し、「次へ」。

「ビルド設定の構成」の「ビルド設定の追加」にある、「Select a backend environment」にて反映させたい環境を選択する。

その下にある「Create new role」をクリックし「Amplify - Backend Deployment」の権限を付与。

「次へ」、「保存してデプロイ」と進む。

しばらくすると、デプロイの進捗が画面に表示されるので確認し、コンソールに戻ってEnter。ホスティングされたURLも表示されている。

この状態で、src/App.vueの表示されている文言を変更してみるなど、GitHubの指定したブランチにPushしてみると自動デプロイされることが確認できる。

この状況ではURLが分かれば誰でもアクセスできてしまうので、Basic認証を設定する。

Amplify Consoleのメニューにある「アクセスコントロール」の「アクセス管理」を選択。設定する対象のブランチの行にある「Access setting」の値を「制限 - パスワードが必須です」にし、ID/PWを設定し、「Save」。

# design環境を追加
デザイナーがUI/UX実装時に確認できる環境を追加する。複数のフロントエンドを試したいが、バックエンドは共通の1つのstaging環境を利用し、フロントエンドのみ、デザイナーが開発しているソースコードになるようにする。

ブランチ名が「design/」で始まるものはすべて既存のstaging環境のバックエンドに向くようにする。

```
$ amplify env add
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? No
? Enter a name for the environment design
```

「Do you want to use an existing environment?」は「No」を選択。

```
$ amplify env list

| Environments |
| ------------ |
| dev          |
| staging      |
| *design      |
```

design環境が追加されていることを確認。

```
$ amplify push
✔ Successfully pulled backend environment design from the cloud.

Current Environment: design

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | hoge7f13904xxxxxxx | Create    | awscloudformation |
| Hosting  | amplifyhosting     | No Change |                   |
? Are you sure you want to continue? Yes
```

design環境を反映する。

GitHubにdesign-baseブランチを作成してPushしておく。

```
$ git add .
$ git commit -m "add design-base env"
$ git checkout -b design-base
$ git push --set-upstream origin design-base
```


次に、Amplify Consoleからdesign環境とdesign-baseブランチの紐付けの設定を行う。

アプリのトップ画面から「ブランチの接続」を選択。

ブランチは「design-base」、Backend environmentで「design」を選択して「次へ」、「保存してデプロイ」。

デプロイが完了したら、「amplify status」でURLの確認が可能。

```
$ amplify status

Current Environment: design

| Category | Resource name      | Operation | Provider plugin   |
| -------- | ------------------ | --------- | ----------------- |
| Auth     | hoge7f13904xxxxxxx | No Change | awscloudformation |
| Hosting  | amplifyhosting     | No Change |                   |


Amplify hosting urls: 
┌──────────────┬───────────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                            │
├──────────────┼───────────────────────────────────────────────────┤
│ design-base  │ https://design-base.xxxxxxxxxxxxxx.amplifyapp.com │
├──────────────┼───────────────────────────────────────────────────┤
│ master       │ https://master.xxxxxxxxxxxxxx.amplifyapp.com     │
└──────────────┴───────────────────────────────────────────────────┘
```

次に、Amplify Consoleから 「desgin/」から始まるブランチ名の時にdesign環境を使用するよう設定する。

アプリのトップ画面から「全般」、「編集」を選択。

編集画面で以下の設定を設定。

- Branch autodetection: Enabled
- Branch autodetection - patterms: design/**
- Branch autodetection - backend environment: Point all branches to existing environment
- Branch autodetection branch environment: design
- Branch autodetection access control: Enabled
- 任意のusernameとpassword

ここまでの設定で、「design/」から始まるブランチ名がPushされた際にはブランチごとにdesign環境のホスティングが実行される。

試しに2つの環境がホスティングされることを確認する。

```
$ git checkout -b design/alpha
$ git push --set-upstream origin design/alpha
$ git checkout -b design/beta
$ git push --set-upstream origin design/beta
```

## プルリクエストをホスティング
プルリクエストのソースコードを自動的にホスティングするPreview機能を設定する。

アプリのトップ画面から「Preview」、「Enable Previews」を選択。

「Install GitHub app」を選択すると、GitHubの画面が開かれるので、対象のリポジトリを選択して「Install」。

Amplify Consoleの画面に戻ると、対象リポジトリのブランチ一覧が表示される。

ここでは、masterブランチを選択し、「Manage」を選択。

「Pull Request Preview」を「Enabled」にして、「Pull Request Preview - backend environment」で「Point all Pull Requests for this branch to an existing environment」を選択して「dev」を指定して「確認」。

これで、masterに向けてプルリクエストを作成すると、自動的に環境が構築される。

環境はこれで準備完了です。

開発をしていきましょう。




# 参考
- [Amplify SNS Workshop :: Amplify SNS Workshop](
https://amplify-sns.workshop.aws/ja/)
- [AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](
https://feature-ai-service.dma9ecr5ksxts.amplifyapp.com/)
- [Getting started - Amplify Docs](
https://docs.amplify.aws/start/q/integration/js)
- [AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS](
https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/)