限られたユーザ向けにユーザ名とパスワードで守られた静的Webサイトを低価格で実現する（AWS Amplifyを使う）

背景

• 書籍執筆でレビューア向けの専用サイトを作りたい。
• レビューアに提供するものはテキストファイルとPDFファイルだから静的Webサイトで十分である。
• レビューアのみに提供したいのでユーザ名とパスワードで守りたい。

問題

• 静的WebサイトだからNetlify.comなどでホスティングする方法があるが、パスワードで守られたサイトは有料になる。
• 簡単なWebアプリを用意すればパスワードで守られたサイトを用意することはできるがメンテナンスがやや面倒になる。

解決法

• AWS(Amazon Web Services)が提供しているAWS Amplifyを使う。
  • GitHubと接続することでリポジトリにpushするだけでデプロイできる。
  • コンソールでユーザ名とパスワードを設定すればアクセスコントロールができる。
  • 独自ドメインが利用できる。
  • 超低価格（数十人がときどきアクセスする程度ならば1ドル行かないだろう）。

手順概略

AWS準備

• AWS Amplify Consoleの概略説明
• FAQ
• WEBサーバの代わりに AWS Amplify Console を利用できるか検証してみた
• AWSのアカウントを作る。

サイト準備

• サイトを作ってリポジトリを作る（たとえばGitHub上にindex.htmlだけのリポジトリ作る）

アプリを作る

• AWS Amplify Consoleへ行く。
• アプリの作成をする。
  • リポジトリサービスプロバイダと接続（たとえばGitHub）
  • リポジトリブランチの追加（たとえばmaster）
  • ビルド設定の構成（index.htmlがすでにあるなら何もしない）
• デプロイしてみる
  • https://master.XXXXXXXXXXX.amplifyapp.comみたいなところに静的サイトができる。

ドメイン管理する

• AWS Amplify Consoleにて:
  • 自分の管理するルートドメインを指定する（たとえばexample.com）
  • アプリのサブドメインを指定する（たとえばmysiteとして、mysite.example.comになることを期待）
  • このあたりこまごま設定が必要だけど、画面を見て適宜判断する。
  • CNAMEレコードをどう指定するかを確認すること。
• 自分のDNSプロバイダ（たとえばさくらDNS）にて:
  • CNAMEレコードを設定する。
  • 「Amazon Certificate Manager’s validation server用」と「Amplify domain用」と二つ要る
  • Connecting to Third-Party Custom Domains

アクセスコントロール設定する

• AWS Amplify Consoleにて、ブランチごとにユーザ名とパスワード設定する。

関連ツイート

https://twitter.com/hyuki/status/1140114740997267456

@ikemoさんに感謝。

https://twitter.com/ikemo/status/1140169871382077447