前回はVue.jsと関連コンポーネント一式をセットアップし、動確するところまで完了。
第二回となる今回は、AWS Amplifyを使ってバックエンドリソースを作成するのと、git pushをトリガーとしてCICDパイプラインを一周させるところまでをやってみる。
前回の内容はこちら。
Vue.js、AWS Amplifyおよびboto3でサンプルアプリを作ってみる（第一回：Vue.jsセットアップ編）
（今回）やりたいこと
- AWS Amplifyをセットアップする
- AWSバックエンドリソースをCLIで作ってみる
- AmplifyによるCICDパイプラインを回してみる
そもそもAWS Amplifyとは
AmplifyはWeb/モバイルアプリをラクに作るためのサービスで、用途は大きく三つ。
- AWSバックエンドリソースを簡単に作り、使う。
- 通常、WebアプリをホストするにはS3（コンテンツホスティング）を始めCloudFront（CDN）、Route 53（DNS）、ACM（証明書）、Cognito（認証）、DynamoDB（NoSQL）、API Gateway（API）、Lambda（関数）等々をしかるべくセットアップする必要がある。
- Amplifyの場合、Amplify CLIを使って
amplify XXXとするだけで、目的に沿ったサービスを勝手に構成してメンテしてくれる。ラク。
- ツールを使う。
- 大概の設定や操作はCLI（Amplify CLI）で、ビルド設定や独自ドメイン設定・ログ追跡など地味に面倒な作業はWebコンソールでできる。ラク。
- CICDパイプラインをマネージドで用意してくれる。CodePipelineやCodeBuildを自動構成するのかと思ったら、少なくとも表にはそれらのリソースは出てこなかった。メンテフリーということで、これもラク。
- フロントエンド開発支援機能を使う。
Step by Step
1. Amplify CLIのインストール
まずはCLIをインストールする。
% npm install -g @aws-amplify/cli
Amplify CLIについては公式の他、以下も参考にさせていたきました（感謝）。
AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜
2. Amplifyの認証/認可設定
CLIをインストールしたら、プロジェクトルートに移動した上で、AWSアカウントを使うための認証/認可設定をする。
AWS CLIなどと同じで、IAMを使って認証/認可を行う。より正確には、
- 認証：署名バージョン4（SigV4）、いわゆるアクセスキー/シークレットキーによる署名
- 認可：IAMポリシー
...で行う。ここでやることは、そのためのIAMのセットアップとキーの保存。
% cd ~/SPA/my-amplify-app
% amplify configure
詳細は上記の記事や公式に詳しいので、ここでは省略。
3. バックエンドの初期化
AmplifyがAWSのバックエンドリソースを操作するための初期設定をする。
CICDのためのビルドコマンドなどもここで、言語と一緒に指定する模様。
% amplify init
実行すると色々なプロンプトが出るので、しかるべく設定すると、ビルド設定（amplify.ymlに相当）やS3バケット、IAMロールなどが出来上がる。後で出てくる定数定義用ファイルsrc/aws-exports.jsも、このタイミングで作成されるようだ。
完了したら以下のコマンドで現況確認。
% amplify status
ここまで進めば、バックエンドリソースの作成の準備は完了。
4. バックエンドリソースの構成
AWSバックエンドリソースは、いずれもamplify add XXXで構成する。
主だったものは以下。
| コマンド | 概要 | 関連するAWSサービス |
|---|---|---|
| amplify add auth | 認証用リソース | Cognito |
| amplify add hosting | Webホスティング用リソース | CloudFront, S3 |
| amplify add api | API用リソース | API Gateway, AppSync |
| amplify add function | 関数用リソース | Lambda |
ここで作りたいのはWebホスティング環境なので、以下のコマンドを実行する。
% amplify add hosting
あれこれと試行錯誤して分かったのは、WebホスティングのオプションにはセルフマネージドとAmplifyマネージドの二種類があるということ。
-
セルフマネージドの場合、CloudFrontディストリビューションやS3バケットは自動作成されるが、ユーザーのマネジメントコンソールに出てくる。またRoute 53やACMは、それぞれのコンソールで別途作業する必要がある。CICDは、レポジトリを接続した上で
git pushするか、amplify publishで簡易にやるかを選ぶ。 -
Amplifyマネージドの場合、CloudFrontとS3は完全マネージドとなり、ユーザーのマネジメントコンソールから確認することはできない。Route 53やACMも、Webコンソールから構成できる（DNSや証明書はオープンな仕組みなので、リソース自体はさすがに各コンソールに出てくる）。CICDは完全マネージドで、レポジトリへの
git push一択となる。なおこちらの場合、選択後マネジメントコンソールに移動するので、プロジェクトを選択し、CICD用のレポジトリプロバイダを選択する（ここではCodeCommit）。CloudFront/S3は、その存在すら意識することなく、フルマネージドで構成される。
両方試した結果、ここではあえてAmplifyマネージドで運用してみることを選択。
インフラにそれなりに知見があり、運用上の可視性を高めたいということであれば、セルフマネージドでもよいのではないかと感じた。少なくとも、こっちの方が勉強にはなる。
5. バックエンドリソースのデプロイ
バックエンドリソース作成後、amplify pushを実行すると、バックエンドをデプロイしてくれる。
ちなみにamplify publishとすると、フロントエンド（コンパイル+デプロイ）とバックエンドのデプロイを一緒にやってくれる。事前にamplify add hostingと、CICDの構成が条件。
さらに余談だが、amplify serveとすると、amplify pushでバックエンドをデプロイ/更新した上で、テストサーバーをnpm run serveで起動してローカルテストさせてくれる。https://localhost:8080でローカルにアクセスすれば、実際にデプロイされたAWSバックエンド込みで、あれこれテストできるというわけだ。AWSリソースは実際に出来上がっているので、本番デプロイと遜色ないレベルで動確ができたりする。便利な世の中になった。
脇道に逸れたが、ここではひとまずバックエンドだけ構成できればよいので、以下を実行する。
% amplify push
6. ビルド設定の確認
何度かビルドに失敗し、試行錯誤の結果、辿り着いたビルド設定は以下の通り。
なお、ブランチ固有の設定が必要なければ、グローバルに適用されるビルド設定を、Webコンソール上で設定しておけばよい。ブランチ固有の設定が必要であれば、amplify.ymlとしてダウンロードしておく。
version: 0.1
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
7. ビルドテスト
うまく設定されていれば、Vue.jsのコード編集後、プロジェクトルートで以下のコマンドを実行するだけでフルオートでCICDが回り、パブリックにWebアプリを公開してくれる。
% git add .
% git commit -m "（コメント）"
% git push -u origin master
動いた。
参考までに、ビルド周りの落ち穂拾い。
-
amplify initの過程でビルドコマンド（npm run build）やテストサーバー起動コマンド（npm run serve）を指定するが、誤ったコマンドを入力してしまっていないか確認する。自分はここで誤ってnpm run startと謎の文字列を入力してしまい、後続のビルドステップで1時間ほど無駄にした。 -
npm run buildでXcodeが見つからない旨のエラーが出る場合は、開発環境のMacを一度疑ってみる。以下を参考に、Xcodeやnode_modulesを再インストールしてみると動くかも。
Macでyarn installしたらnode-gypのエラーが出た
【初心者】npm ERR! の対処法
-
awsexports.jsが見つからないエラーの場合は、.gitignoreで除外されていていないか念のため確認する。自分の場合は、何故かAmplifyが自ら除外していていた。
今回はここまで。
次回はAmplifyからaxios経由でAPIを呼び出し、AWS上のデータを引っ張ってくるところをトライする。