Zenn
Open3

S3 + CloudFront + カスタムドメインで静的サイトをホスティングする

kwappakwappa

S3での静的サイトホスティング

バケットの作成

  • オプションはすべてデフォルト
    • パブリックアクセス設定→パブリックアクセスをすべてブロック
    • バケットのバージョニング→無効にする
    • デフォルトの暗号化→無効にする
    • 詳細設定→オブジェクトをロック→無効にする

コンテンツをアップロード

静的サイトホスティングを有効にする

  • バケット詳細→「プロパティ」タブ→静的ウェブサイトホスティング→「編集」
    • 静的ウェブサイトホスティング→有効にする

  • オプション設定
    • ホスティングタイプ→「静的ウェブサイトをホストする」
    • インデックスドキュメント→ index.html

パブリックアクセスを許可

  • バケット詳細→「アクセス許可」タブ→ブロックパブリックアクセス→「編集」

  • 「パブリックアクセスをすべてブロック」のチェックを外す
    • 下位項目のチェックがすべて外れてるのを確認
  • 「変更の保存」
    • 内容がインターネットに公開されるのだよ、の警告を確認

バケットポリシーを編集

  • バケット詳細→「アクセス許可」タブ→バケットポリシー→「編集」
    • 公式サンプルをコピーして貼り付け
    • Bucket-name をこのバケットの名前に修正

  • 「変更の保存」

パブリックアクセスを確認

  • バケット詳細→「プロパティ」タブ→静的ウェブサイトホスティング
    • 「バケットウェブサイトエンドポイント」のURLにブラウザでアクセスして表示を確認
kwappakwappa

GoogleDomainsからRoute53へネームサーバを移管

義務感で取った kwappa.dev が未使用なので流用する。どうせならRoute53で使いたい。

Route53側の作業

  • パブリックホストゾーンを作成
    • Route53→「ホストゾーンの作成」

  • S3のエンドポイントをエイリアスレコードとして登録
    • Route 53 に登録されたカスタムドメインを使用した静的ウェブサイトの設定 - Amazon Simple Storage Service
    • ホストゾーンの詳細→「レコードを作成」→「ウィザードに切り替える」
    • 「シンプルルーティング」を選択→「次へ」→「シンプルなレコードを定義」
      • レコードタイプ→「A」
      • 値/トラフィックのルーティング先
        • エンドポイントを選択→「S3 ウェブサイトエンドポイントへのエイリアス」
        • リージョンを選択→バケットのあるリージョン（今回は ap-northeast-1 ）
        • S3 エンドポイントを入力→サジェストされるので選択
        • ターゲットのヘルスを評価→「いいえ」

  • 次の画面でも「レコードを作成」ボタンを押し忘れないように

Google Domains側の作業

  • Google Domainsにログイン→マイドメイン→対象ドメイン→「DNS」→「カスタム ネームサーバー」
    • Route53のホストゾーンにあるNSレコードをネームサーバーとして追加
    • 「これらのネームサーバーに切り替える」をクリックしてカスタムネームサーバーを有効にする

ブラウザでアクセスできない罠

以上で kwappa.dev をバケットウェブサイトエンドポイントに向ける作業は完了だが、このままではブラウザで kwappa.dev を表示することはできない。 .dev ドメインはHTTPS接続を強制する HSTSという仕組みのプリロード対象なので、対応ブラウザ（少なくともmacOS版 Chrome 92.0.4515.131, Safari 14.1.2）では http:// でのアクセスを https:// にリダイレクトしてしまう。ここでの動作確認は curl で済ませておく。

% curl kwappa.dev | head -n 10
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 10266  100 10266    0     0  40577      0 --:--:-- --:--:-- --:--:-- 40577
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>企業・ビジネスサイト向け 無料ホームページテンプレート tp_biz55</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ここにサイト説明を入れます">
<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<link rel="stylesheet" href="css/style.css">
kwappakwappa

CloudFrontを建てる

HTTPS で通信させるためにはS3の手前にCloudFrontを建てるのが一番ラクなので準備する。

CloudFront ウェブディストリビューションを作成

  • CloudFront→「Create a CloudFront Distribution」
    • 「Origin Domain」→S3のプロパティから「バケットウェブサイトエンドポイント」をコピー&ペースト→http://を削除
      • ドメインの即値を指定してカスタムオリジンにする
    • 「Viewer」→「Viewer protocol policy」→「Redirect HTTP to HTTPS」
      • .dev 以外でもHTTPSを強制したいので

ACMで証明書を作る

  • 「Settings」→「Custom SSL certificate」→「Request certificate」
  • 別タブが開くので証明書を作成
    • 手順はまるっとこちら
      • 「ドメイン名の追加」→ 利用するドメインを入力（ kwappa.dev ）
      • 「検証法補の選択」→DNSの検証
      • 「Route 53でのレコードの作成」をクリック→CNAMEレコードを作成
      • しばし待つ→証明書が「発行済み」になるのを待つ

ディストリビューションに設定

  • CloudFrontタブに戻る
    • 独自ドメインの設定
      • 「Settings」→「Alternate domain name (CNAME)」
      • 利用するドメインを設定（ kwappa.dev ）
    • 証明書の設定
      • 「Settings」→「Custom SSL certificate」→リロードボタンを押す
      • 今作った証明書がACM certificatesのリストに出るはずなので選択
  • ディストリビューションの作成
    • 一番下「Create Distribution」
    • Distributionの詳細でLast modifiedが「Deploying」→日時に変わるまで待つ

DNSの変更

  • CloudFront→さっき作ったディストリビューション→「Distribution domain name」をコピーしておく
  • Route53→前回作ったホストゾーン→Aレコードを「編集」
    • 「トラフィックのルーティング先」→「CloudFront ディストリビューションへのエイリアス」
    • さっきコピーしたDistribution domain nameをペースト（ https:// は削除する）
    • 「保存」

キマシタワァ

サブディレクトリのデフォルトルートオブジェクト

  • CloudFrontディストリビューションの「Default root object」に index.html を指定しておくと、 https://kwappa.dev/ にアクセスしたとき index.html を表示してくれる
  • しかし https://kwappa.dev/subdir/ のようなサブディレクトリには適用してくれない
    • 403 Forbidden が返る
  • サブディレクトリにもデフォルトルートオブジェクトを適用させるにはいくつか方法がある

今回はS3直接アクセスでも特に困らないので静的ウェブサイトホスティングで済ませる。