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 のソースコードを利用して配置する。

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 に従い、追記する。

$ amplify serve

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

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

$ vim src/App.vue

AWS Amplify ハンズオン認証認可機能の追加 - AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019 に従い、追記する。

$ 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に向けてプルリクエストを作成すると、自動的に環境が構築される。

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

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

前提