AWS Amplify Consoleでビルド＆デプロイ

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

Vue CLIで新規プロジェクト作成と、よくある雛形の実装

イントロダクション

VueのプロジェクトをAWS Amplify Consoleにより、プロビジョン→ビルド→デプロイ→検証します。
指定のリポジトリ&ブランチに対するコミットをトリガーにデプロイが走り、また、amplifyapp.comドメインにホストしてくれます。

コンテンツ

アプリの作成

AWSコンソール > Amplify > アプリの作成ボタンを押下します。

From your existing code
ソースコードを管理しているリポジトリサービスプロバイダーを選択します。
ここではGitHubを選択します。
リポジトリとブランチの選択
選択したリポジトリサービスプロバイダから、対象とするリポジトリとブランチを選択します。
ビルド設定の構成
入力されているものはそのまま、選択するものも既存のものを選択し、次へ。
Select a backend environment : 既存の環境でOK (work)
Select an existing service role : 既存のRoleでOK (amplifyconsole-backend-role)
確認
内容を確認し、保存してデプロイボタン押下。

デプロイ

アプリの作成が完了すると自動的にデプロイが走り、プロビジョン、ビルド、デプロイ、検証、が順に実行されてゆきます。
なお、一度アプリを作成すると、次回からは指定したリポジトリの指定したブランチに対してコードコミット(プッシュ)するたびに、このデプロイのための一連の処理が開始されます。

オールグリーンになったら完了です。
なお、ビルドエラーになったらデプロイされませんので安心ですね。

また、amplifyapp.comのサブドメインにホストまでしてくれますので、すぐにWebアプリを公開できてしまいます。

あとがき

EC2へのホストに比べて、S3へのホストはだいぶ楽になったと思うのですが、Amplify Consoleはそれを超える楽さですよね。
比較のために、同じアプリをS3へホストする手順を別の記事にしようと、今思いつきました。

一度アプリをセットアップしてしまえば、あとはリポジトリへコミットするだけで勝手にビルドしてデプロイしてくれる楽さは病みつきになります。
今回は触れませんが、独自ドメインの割り当てもここで簡単にできてしまいます。

もう、インフラ担当、要らないですよね。(嘘です)