AWS Amplify Hosting で Web サイトをホスティングする
記事の「実践」を 1 項目ずつ進めるためのページです。AWS マネジメントコンソールで操作したら、右の一覧にチェックを入れてください。チェックはこのブラウザに保存されます。
準備 7 項目中 1 番目
前提条件
- リージョン:
ap-northeast-1（東京） - AWS マネジメントコンソールにログイン済みであること
- Amplify のアプリを作成できる権限があること
- 手元の PC でテキストファイルを作成し、zip 形式に圧縮できること（GitHub などの Git プロバイダーのアカウントや独自ドメインは不要です）
準備 7 項目中 2 番目
作成するリソース一覧
| リソース種別 | リソース名 | 用途 |
|---|---|---|
| Amplify アプリ | amplify-handson-site | 手動デプロイで静的サイトをホスティングする |
| Amplify ブランチ | main | アプリのデプロイ先。https://main.<アプリID>.amplifyapp.com で公開される |
手順 7 項目中 3 番目
ステップ1: 公開する HTML を zip にまとめる
- 手元の PC に作業用のフォルダー
amplify-handsonを作成します - テキストエディターで以下の内容を書き、文字コード UTF-8 で
amplify-handsonフォルダーの中にindex.htmlという名前で保存します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Amplify Hosting ハンズオン</title>
</head>
<body>
<h1>Amplify Hosting で公開しました</h1>
<p>バージョン: v1</p>
</body>
</html>amplify-handsonフォルダーを開き、中のindex.htmlを選択して zip に圧縮します。フォルダーamplify-handsonそのものではなく、中のファイルを選んで圧縮するのがポイントです- macOS の場合: Finder で
index.htmlを右クリックし、「"index.html"を圧縮」を選択します。index.html.zipが作成されるので、site-v1.zipに名前を変更します - Windows の場合: エクスプローラーで
index.htmlを右クリックし、「圧縮先」→「ZIP ファイル」（Windows 10 は「送る」→「圧縮 (zip 形式) フォルダー」）を選択します。作成された zip ファイルの名前をsite-v1.zipに変更します
- macOS の場合: Finder で
site-v1.zipを開き、いちばん上の階層にindex.htmlがあること（フォルダーが挟まっていないこと）を確認します
手順 7 項目中 4 番目
ステップ2: 「Git なしでデプロイ」でアプリを作成する
- AWS マネジメントコンソールにログインし、リージョンが
ap-northeast-1（東京）であることを確認します - 上部の検索バーに
Amplifyと入力し、表示された「AWS Amplify」を選択します - Amplify の「すべてのアプリ」画面で「新しいアプリを作成」をクリックします
- 「Amplify を使用して構築を開始」の画面で、「Amazon S3 または Zip ファイルからアプリケーションを手動でデプロイするには、[Git なしでデプロイ] を選択します。」の下にある「Git なしでデプロイ」を選択し、「次へ」をクリックします
- 「手動デプロイを開始」の画面で以下を設定します
- アプリケーションの名前:
amplify-handson-site（初期値は自動で付くappで始まる名前です） - ブランチ名:
main（初期値はstagingです） - 方法:
ドラッグアンドドロップ（初期値のままで構いません）
- アプリケーションの名前:
- ドロップゾーンに
site-v1.zipをドラッグ&ドロップするか、「.zip フォルダを選択」をクリックしてsite-v1.zipを選択します。「アップロード済み」と表示されれば準備完了です
- 「保存してデプロイ」をクリックします
手順 7 項目中 5 番目
ステップ3: 発行された URL で表示を確認する
- デプロイが始まり、アプリの「概要」画面に移ります。下の「ブランチ」欄で、ブランチ
mainのステータスが「デプロイ済み」になるまで待ちます（手動デプロイはビルドがないため、数秒から数十秒で完了します） - ブランチ
mainの「ドメイン」に表示されている URL（https://main.<アプリID>.amplifyapp.com）を控えます
- 控えた URL をクリックするか、ブラウザの新しいタブで開きます
- 「Amplify Hosting で公開しました」「バージョン: v1」と表示されることを確認します。アドレスバーを見ると、自分で証明書を用意していないのに
https://で表示されていることも確認できます
https:// で始まる amplifyapp.com の URL を開き、「バージョン: v1」のページが表示されている状態手順 7 項目中 6 番目
ステップ4: HTML を直して再デプロイする
- 手元の
index.htmlの<p>バージョン: v1</p>を次のように書き換えて保存します
<p>バージョン: v2（再デプロイしました）</p>- ステップ1と同じ手順で
index.htmlを zip に圧縮し、site-v2.zipという名前にします - Amplify コンソールに戻り、アプリ
amplify-handson-siteの「概要」画面を開きます - 下の「ブランチ」欄にあるブランチ
mainの「アップデートをデプロイ」をクリックします - 表示された「Deploy updates: main」の画面で、方法が
ドラッグアンドドロップであることを確認し、site-v2.zipをドラッグ&ドロップするか、「.zip フォルダを選択」から選択します - 「保存してデプロイ」をクリックし、ステータスが「デプロイ済み」になるまで待ちます
- ステップ3で開いたブラウザのタブを再読み込みし、「バージョン: v2（再デプロイしました）」に変わったことを確認します。表示が変わらないときは、ブラウザのキャッシュを無視して再読み込み（スーパーリロード）します
手順 7 項目中 7 番目
ステップ5: デプロイの履歴を確認する
- Amplify コンソールでアプリ
amplify-handson-siteの「概要」画面を開き、ブランチ一覧のmainをクリックします - 「デプロイ」画面の「デプロイ履歴」に、最初のデプロイ（デプロイ 1）と再デプロイ（デプロイ 2）の 2 件が並び、どちらもステータスが「デプロイ済み」になっていることを確認します。履歴の名前は「デプロイ 1」「デプロイ 2」の連番で、zip ファイルの名前は表示されません