Amplifyホスティングで1枚物のHTMLを配信する

1枚物のHTMLをAmplifyホスティングでサクッと配信した際のメモです。

Amplify & Amplifiホスティングとは
Amplifyホスティング利用手順
Amplifyホスティングの機能＋GitHubを利用して、CI/CDしてみる
感想
参考にしました

Amplify & Amplifiホスティングとは

Amplifyは、モバイルアプリやWebアプリの作成、デプロイ、ホスティングを行うためのツールやサービスの総称。
その中で、Amplifyホスティングは、WebアプリのCI/CDを行えるサービス。
Amplifyホスティングのページでは、React, Angular、Vue、Next.jsをサポートする旨書いてあるが、1枚物のHTMLでもOK。
CI/CDに加え、

CDN
HTTPS通信
Basic認証
WAF

等もサポートしており、静的ページを手軽に、そしてセキュアかつスケーラブルに配信するのにうってつけです。

Amplifyホスティング利用手順

前提

1. GitHubにパブリックリポジトリを作成し、下記HTMLファイルをプッシュ済みであること。
2. AWSアカウントを開設済みで、Ampliyに関する権限を持つこと(横着してFullAccess権限でやりました)

配信対象のHTMLファイル

高い買い物するとき、1年使うから、1日いくらだな、って計算しませんか？
そんな計算をできるWebページを作りました。

手順

1. https://ap-northeast-1.console.aws.amazon.com/amplify/にアクセスし、「アプリケーションをデプロイ」を押下

2.「新しいアプリを作成」を押下

3. Gitプロバイダーとして「GitHub」を選択

4. 緑のボタン(作成したいリージョンにより異なる)を押下し、AmplifyがGitHubアカウントにアクセスする許可を与える

5. 今回は特定のリポジトリに対して許可を与えるため、「Only select repositories」を選択して、特定のリポジトリに対してのみアクセス権を付与する

6. GitHubのアカウント認証をPassKeyを用いて行う(GitHubアカウントのPassKey設定をしている場合)

7. リポジトリおよびブランチを指定の上、「次へ」を押下(モノレポの場合、「私のアプリケーションはモノレポです」にチェックの上、今回のルートディレクトリとなるディレクトリを指定)

8. アプリケーション名他、ビルド設定を行う。今回は単純なHTMLにつき、アプリケーションの名前以外は空欄で、「次へ」を押下

9. 確認画面が表示されるため、確認の上、「保存してデプロイ」を押下
[デプロイされる

10. デプロイ後、URLが発行されるため、発行されたURLにアクセス

11. HTTPS対応されています

Amplifyホスティングの機能＋GitHubを利用して、CI/CDしてみる

やりたいこと

1. 本番用の「main」ブランチと、開発用の「dev」ブランチを作る
2. まずは「dev」ブランチで資産を更新する
3. 「dev」ブランチの内容も配信するが、Basic認証をかけて閲覧可能者を限定する
4. 「dev」ブランチの内容がOKであれば、「main」ブランチにマージする(ビルドが走るはず)
5. 「main」側にも変更内容が反映される