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に向けてプルリクエストを作成すると、自動的に環境が構築される。
環境はこれで準備完了です。
開発をしていきましょう。