はじめに
この記事では、AWS（AWS Amplify） を使って、簡単に自分のHTMLサイトをパスワード（Basic認証）付きで公開する方法を解説します。
次の2つの方法での公開を紹介します。
- GitHubと連携して公開する方法
- ZIPをアップロードして公開する方法
GitHubと連携して公開するイメージ
↓ざっくり
【前提】
- AWSアカウントを持っている
- GitHubのアカウントを持っている
ZIPをアップロードして公開するイメージ
↓ざっくり
【前提】
- AWSアカウントを持っている
動画版ハンズオン
動画版ハンズオンも作成しています！
「とりあえず眺めたい」「動画を見ながら手を動かしたい」と言う方は是非ご覧ください
（※）GitHubと連携しての公開のみ収録
手順
- HTMLサイトを準備
- Amplify × GitHubでサイト公開・Basic認証
- Amplify × ZIPアップロードでサイト公開・Basic認証
- コードをアップデートしたい
- 独自ドメインを設定
1. HTMLサイトを準備
GitHubにコードを用意しています。
アクセスして「Download ZIP」してください。
ちなみに、内容は下記の通りで、めちゃくちゃシンプル。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
p {
font-size: 48px;
}
</style>
</head>
<body>
<main>
<p>Hello, world !</p>
</main>
</body>
</html>
2. Amplify × GitHubでサイト公開・Basic認証
GitHubにPushすると、その内容でサイトが公開されます。
GitHubリポジトリ作成
GitHubの「Repositories」タブにて右上にある緑の「New」ボタンをクリックします。
Repository nameを「simple-static-site」と入力したら「Create repository」します。
実行すべきコマンドが表示されます。
↑のコマンドをコピーして、下記のようにプロジェクトフォルダにて貼り付けます。
エンターして実行すると、コードがGitHubにPushされます。
AmplifyとGitHubの連携設定
AWSにログインしてAmplifyのページに移動します。「アプリケーションをデプロイ」します。
「アプリケーションをデプロイ」で「GitHub」を選択し、「次へ」をクリックします。
GitHubと連携していいか？という画面が立ち上がります。「Authorize AWS Amplify」します。
AWSからアクセスできるリポジトリの選択画面が現れます。
「All repositories」を選択すればOKです。
アクセスできるリポジトリを制限したい場合は「Only select repositories」を選択すると、アクセスさせるリポジトリの選択欄が現れますので「simple-static-site」を選択してください。
Amplifyに戻りリポジトリは「simple-static-site」、ブランチは「main」を選択します。
「次へ」移動します。
Basic認証設定
「自分のサイトをパスワードで保護」にチェックを入れるとユーザー名とパスワードの入力欄が現れます。それぞれ好きなものを入力してください。後で簡単に変更可能です！
もし迷ったら下記のように入力してみてください。入力できたら「次へ」移動します。
- ユーザー名
- guest
- パスワード
- guestguest
確認画面です。特に何もいじらずに「保存してデプロイ」します。
左下に「デプロイ済み」と表示されるのを待ちます。１分ぐらいです。
「デプロイされたURLにアクセス」するとBasic認証の画面が現れます。
先ほど設定したユーザー名とパスワードを入力すると、サイトが表示されます。
✅ これだけで、Basic認証付きのサイトを公開できました！いかがでしょう？
自動でHTTPSの設定もしてくれます！
3. Amplify × ZIPアップロードでサイト公開・Basic認証
GitHubを使わずにZIPアップロードすることでもBasic認証付きでサイト公開が可能です。
ZIPの準備
コードを次のように圧縮します。フォルダごと圧縮はNGです。 キャプチャ画像はMacのものですが、Windowsでも同様にできるはずです。右クリック →「送る」→「圧縮（zip形式）」でいけると思います。
CSSファイルなどもアップロードしたい場合は、まとめて選択して圧縮します。
↓はNG！！！！！
ZIPをアップロード
AWSにログインしてAmplifyのページに移動します。「アプリケーションをデプロイ」します。
「Gitなしでデプロイ」を選択して「次へ」移動します。
アプリケーションの名前：static-site-zip
ブランチ名：main
方法：ドラッグアンドドロップ
上記選択したら、先ほど圧縮して作成したZIPをドラッグ&ドロップします。
「保存してデプロイ」します。これでサイト公開は完了です！
Basic認証設定
「ホスティング」→「アクセスコントロール」→「アクセスの管理」をクリックします。
アクセス設定を「制限 - パスワードが必須です」に変更します。Basic認証に必要なユーザー名とパスワードを入力してください。もし、迷ったら次のように設定してみてください。
- ユーザー名
- guest
- パスワード
- guestguest
入力できたら「保存」します。
「概要」→「デプロイされたURLにアクセス」します。
Basic認証画面が現れます。
ユーザー名とパスワードを入力するとサイトが表示されます。
エラー画面が表示される場合
次のような画面が現れた場合は圧縮の仕方を間違っている可能性が高いです。
圧縮方法を確認した上で、圧縮し直した上でアップロードしてください。「アップロードをデプロイ」をクリックすると再度アップロード可能です。
✅ ZIPファイルでのBasic認証付きサイトの公開ができました！！
4. コードをアップデートしたい
サイトを公開後に内容を変更したい場合があるかと思います。
コードを変更
次のようにmainタグを置き換えます。
<main>
<p>こんにちは、世界 !!!</p>
</main>
GitHubで公開してる場合
下記コマンドを順に実行します。
git add .
git commit -m "change"
git push origin main
コードを push するだけで、変更がすぐサイトに反映されます！
ZIPアップロードで公開してる場合
下図のようにファイルを選択・圧縮してZIPファイルを作成します。
フォルダごと圧縮すると上手くいかないので注意です。
「概要」→ 右下「アップデートをデプロイ」します。
ZIPファイルをアップロードしたら「保存してデプロイ」します。
更新内容が反映されました！
5. 独自ドメインを設定
ドメインを購入
ドメインの購入がまだな人は下記動画を参考に購入してください。お名前.comで購入した人は、AWSで使う設定が必要です。やはり、動画を参考に設定お願いします。
- AWSでドメインを購入（Route 53）
- 6分8秒 ~
- お名前.comでドメインを購入・AWSで使う設定
- 16分33秒 ~
独自ドメインを設定
「ホスティング」→「カスタムドメイン」→「ドメインを追加」します。
検索窓にカーソルを当てると独自ドメインが現れます。選択して「ドメインを設定」します。
特に何もせず「ドメインを追加」します。
次のよう設定待ちの画面になります。15分 ~ 30ぐらい待ちます。
設定が完了すると「ステータス」が「使用可能」に変わります。
URLをコピーしてブラウザに貼り付けると、独自ドメインでアクセスできます。
↓
おわりに
簡単にBasic認証付きでサイトの公開（HTTPSも！）ができたのでは無いでしょうか？
HTML以外にも、React・Next（SSR・SSG）・Vueなどのサイトも公開が可能です。
記事内で紹介した動画では、通常のHTMLに加えてNext.jsでの公開方法も扱っています。もし、興味があれば是非ご覧ください。
少しでも役に立つ内容になっていましたら幸いです。
ここまで読んでいただきありがとうございましたー！