Basic認証付きの静的サイトを物凄く簡単にサーバレスで公開する【AWS Amplify Console】

Basic認証付きの静的サイトを物凄く簡単にサーバレス（AWS）で公開出来る事を知ったので、やってみた形式で紹介したいと思います。

具体的にはAWSのAmplifyConsoleを使います。

一般的にAWSで静的サイトにBasic認証をかけたい場合、S3 + CloudFront + Lambda@edgeで実現するかな、と思いますが、それより100倍くらい楽です。

ざっくりしたイメージで下図のような感じでサイトを公開出来ます。

![amplifyconsole.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/356a0a25-46a8-51f0-3092-bd90fabc6a5e.jpeg)


**【前提】**

- GitHubのアカウントを持っている。基本的な操作が出来る
- AWSアカウントを持っている
- 独自ドメインを購入済みである
    - 記事中ではお名前.comで購入したドメインを使用します
- AmplifyConsoleなどの単語を初めて聞いた人でも大丈夫です

# この記事でやる事

1. 静的サイトのHTMLをGitHubにpushする
2. GitHubとAWS Amplify Consoleを紐づける（これだけでサイトが公開されます）
3. Basic認証をかける
4. ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する
5. 独自ドメインとHTTPS化の設定をする

作業時間自体は15分ぐらい、設定の反映の待ち時間含めて30分ぐらいとなります。
※「5. 独自ドメインを設定する」の作業で、待たされる時間が発生します。

# 1. 静的サイトのHTMLをGitHubにpushする

ここからは、index.htmlのみの簡素なサイトを例に、Basic認証付きで公開する作業をして行きます。

**【作業】**
1-1. ローカル環境に静的サイトを準備する
1-2. GitHubにリポジトリを作成しコードをpushする

## 1-1. ローカル環境に静的サイトを準備する

ローカル環境に`static-site`フォルダを作り、`index.html`を下記内容で作成します（説明を容易にするため簡素なHTMLを使用しています）。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello,world!</h1>
</body>
</html>
```

# 1-2. GitHubにリポジトリを作成しコードをpushする

GitHub上に`static-site`と言う名前でリポジトリを作成したら上記のコードをpushします。

![1-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/c5b323a8-2b50-69fd-5209-e51011e7f7e4.jpeg)

# 2. GitHubとAWS Amplify Consoleを紐づける

AWSのマネジメントコンソールにログインします。

サービスの検索窓に「Amplify」と入力します。「AWS Amplify」へと移動します。

![2-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/1af65dfd-bbf8-da21-4e93-c2481caa3324.jpeg)

下記画面に遷移したら、右上のオレンジの**「New App」**ボタンをクリックします。更にボタンが現れるので**「Host web app」**をクリックします。

*※初めてこの画面に来た人は、「すべてのアプリ」が空の状態になっているかと思います。*

![2-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/28bd67ad-fbd9-49f2-2fe9-a48f1acb9ea8.jpeg)

下記画面にしたらGitHubを選択して右下の「Continue」をクリックします。

![2-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/70732a08-9203-a661-8dc2-8baa220cd0c5.jpeg)

ここでGitHubのアカウントとの紐付けを行います。紐付けの作業は初回のみです。画面の指示に従って頂くと紐付け作業を完了出来るかな、と思います。

紐付け完了後は下記画面となります。

**「リポジトリ」**のセレクトボックスをクリックします。GitHub上のリポジトリの一覧が現れるので、先ほど作成したリポジトリを選択します。

![2-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/c1b77620-2f6d-5fe9-6804-160d80570d2d.jpeg)

更にブランチを選びます。

作業したブランチを選択して下さい。

私の場合はブランチ名をリネームしたので`main`ブランチですが、`master`のまま作業をしている方は`master`が表示されるかと思います。その場合は、`master`を選択して下さい。

選択出来たら**「次へ」**をクリックします。


![2-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/12ca99ed-ca01-708c-91c3-a6c9dccb28aa.jpeg)

下記画面に遷移します。何も変更を加えずに**「次へ」**をクリックします。

*※画面上の「ビルドの設定」の項目に警告のマークがついているのが気になるかと思いますが、無視して大丈夫です。VueやReactなどのビルドを伴うサイトを扱う際には、編集を行います。今回は不要です。*

![2-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/a64e268a-c76d-da9d-ec90-5b3ace9ff4ed.jpeg)

下記画面に遷移したら**「保存してデプロイ」**をクリックします。

![2-7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/95b0700b-d890-8fd8-577d-1b32e39e1bd3.jpeg)

サイトの公開設定は以上です。

下記画面のようにプロビジョン、ビルド、デプロイ、検証に全てチェックが入るのを待ちます（２〜３分ぐらい）。

サイトのURLが発行されます。

URLをクリックしてサイトを確認します。

![2-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/ba9100c8-9292-6a11-868d-81b5c4b2520f.jpeg)

GitHubにpushしたHTMLが表示されている事を確認出来ます。

![2-9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/c3eab257-1e65-ed1d-8c42-ac9fd511de8f.jpeg)


# 3. Basic認証をかける

左のメニューより**「アクセスコントロール」**を選択し、遷移した画面で右上にある**「アクセス管理」**をクリックします。

![3-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/7a04dc19-1b7b-ac89-2549-c976d35915e1.jpeg)

下記画面に遷移します。ここでBasic認証のユーザー名とパスワードを設定出来ます。ユーザー名とパスワードを入力したら**「Save」**をクリックします。

![3-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/cc3b73ed-8ade-3b26-21c6-35b2e62041b6.jpeg)

公開したサイトをもう一度開くと（もしくはリロードすると）Basic認証のダイアログが現れます。

![3-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/17cbe0ab-ac79-9921-dd80-0c8663e750e4.jpeg)

設定したユーザー名とパスワードを入力すると、サイトが表示されます。

# 4. ソースを変更してGitHubにpush。自動でサイトが更新される様子を確認する

サイトの更新は「ローカルで更新作業をする」 → 「GitHubにpushする」 → 「Amplify Consoleがpushを検知して自動で更新してくれる」と言う流れになります。 

実際に見て行きます。

ローカルにある`static-site/index.html`をエディタで開き下記のように変更します。

（pタグを適当な内容で追加しただけです。）

```html
  <h1>Hello,world!</h1>
  <p>hellohellohellohellohellohellohello</p>
```

変更を保存したら、GitHubに変更をpushします。

マネジメントコンソールに戻ると、再びプロビジョニングが始まっている事を確認出来ます。

![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/a45e8248-688a-0409-9ee1-f730224da1f8.jpeg)

全てチェックが入ると更新完了です。

更新内容が反映された事を確認します。

HTMLファイルを手動であげる作業は発生しません。

それっぽい言葉を使うとCICDのCDを実現している状態です。

[（参考）CIとCDの違い](https://penpen-dev.com/blog/ci-cd-tigai/)

![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/09ba9f7b-a7d5-4157-8e11-a27b55912580.jpeg)

# 5. 独自ドメインとHTTPS化の設定をする

Basic認証同様に簡単に独自ドメインの設定も出来ます。

例として予めお名前ドットコムで購入した「staticsite.work」と言うドメインを公開したサイトにくっつけて行きます。

**【作業】**
5-1. Route53でホストゾーンの登録
5-2. お名前.comでネームサーバーの設定
5-3. Amplifyコンソールでカスタムドメインの追加

## 5-1. Route53でホストゾーンの登録

Route53に移動して**「ホストゾーンの作成」**をクリックします。

![5-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/d9e33c24-9950-7fb2-74ef-ed389bf3e8e0.jpeg)

ドメイン名に取得したドメインを入力して**「ホストゾーンの作成」**をクリックします。繰り返しになりますが、例では「staticsite.work」と言うドメインの設定をしています。

![5-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/a4981776-0f44-bda0-ba69-8324c54c29f1.jpeg)


## 5-2. お名前.comでネームサーバーの設定

作成したホストゾーン（staticsite.work）クリックします。

![5-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/76693c59-9680-f281-46fe-0b11f96b8240.jpeg)

下記画像で網掛けしている4つのURLを、お名前.comに登録して行きます。

![5-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/a344f28c-6df8-0f7d-0957-26ff16b37a13.jpeg)


別タブでお名前.comの管理画面を開き、ログインします。

**「TOP」**に移動して**「ネームサーバーの設定をする」**をクリックします。

![5-5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/83609b68-00f2-cd4b-4be2-003aec228606.jpeg)

下図のように購入したドメインにチェックを入れます。

更に「2.ネームサーバーの選択」項目で「その他」タブをクリックします。

ネームサーバー1~4までを先ほどの画像で網掛けした部分に対応するように1行ずつコピペして行きます。1~4まで埋め終わったら**「確認」**を押します。

![5-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/b917ab6e-8717-30bd-0ed2-326db1cc5cb1.jpeg)

## 5-3. Amplifyコンソールでカスタムドメインの追加

Amplifyの画面に戻ります。

お名前.comとRoute53での作業は終了です。

左メニューの**「ドメイン管理」**を選択して現れた画面の右上にある**「カスタムドメインの追加」**をクリックします。

![5-7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/9faf7ddc-6239-3e6e-173b-d3078a2623e8.jpeg)

ドメインの検索ボックスをクリックすると、Route53に登録したドメインの一覧が現れるので、先ほど登録したドメインを選択します。

更に**「ドメインの検索」**をクリックします。下記のようにサブドメインの項目が現れます。画像中の「main」の部分は紐付けているGitHubのブランチ名となります。なので、「master」ブランチを使っている方は「master」が表示されているはずです。

またサブドメインも自由に設定出来ます。デフォルトでは「www」となっていますが、お好きなものに変更する事可能です（後から変更出来るので一旦wwwのまま作ってみるのが良いかな、と思います）。

**「保存」**をクリックします。

![5-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/f79b5820-f04f-0a33-04fd-f3b52e8f4e5d.jpeg)


下記画面に遷移します。

設定が反映されるのを待ちます（15分ぐらい）。

ドメインの設定だけではなくHTTPS化も自動でしてくれます。

![5-9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/a0c11d0b-caf9-daa8-d840-71f8f7da4627.jpeg)

設定が終わると下記のような画面に変わります。

![5-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/6be3aad3-42be-38bb-4baa-248c2389f57e.jpeg)

ブラウザのアドレスバーに登録したドメイン（www.staticsite.work）を入力するとサイトが表示されます。

![5-11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/392b3e91-af70-9256-4d46-63cad0b01009.jpeg)

以上です。

# 終わりに

下記記事をめちゃくちゃ参考にしました。Nuxt.jsでの実装となっています。下記記事のフレームワークを使わない静的サイト版と言う位置付けを意識して、~~パクリでは無いと言い聞かせて~~書きました。どなたかのお役に立つ事が出来たら幸いです。

[Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します](https://blog.microcms.io/frontend-amplify-console/)