AWSのAmazon S3で静的ウェブサイトをホスティングする

AWSのAmazon S3で静的ウェブサイトをホスティングする

December 2, 2021

S3 でホスティングしてきた静的サイトを別の場所に移したので、再び実施する時のために手順を残しておく。

詳細な実施方法は調べればいくらでも出てくるし、公式もドキュメントを整えてくれているため、この記事では簡略化して記載する。

1. S3 にバケットを作成 #

作成時はデフォルトの設定のままで OK。バケット作成後に以下を実施する。

  1. パブリックアクセスを有効化する
  2. サイトをアップロードする
  3. 静的ウェブサイトホスティングを有効化する
  4. 静的ウェブサイトホスティングのエンドポイントを控える

1-1. アクセス許可設定変更後のキャプチャ #

バケットポリシーは後ほど変更するので、今のところ空欄で構わない。

S3

1-2. サイトをアップロード後のキャプチャ #

S3

1-3. 静的ウェブサイトホスティング設定変更後のキャプチャ #

S3

1-4. 静的ウェブサイトホスティングのエンドポイント #

次で使用するため、プロパティタブ下部の静的ウェブサイトホスティングの項目に表示されるバケットウェブサイトエンドポイントを控えておく。

例：http://********.s3-website-ap-northeast-1.amazonaws.com

S3

2. Cloud Front にディストリビューションを作成 #

オリジンドメインには先の作業内で控えておいたバケットウェブサイトエンドポイントを入力する。この時、先頭の http:// は除く。

入力例：********.s3-website-ap-northeast-1.amazonaws.com

SSL の設定等は後ほど実施する。その他項目はお好みで。以下は一例。

  • オブジェクトを自動的に圧縮：Yes
  • ビューワープロトコルポリシー：HTTPS only
  • 許可された HTTP メソッド：GET, HEAD

3. Certificate Manager で証明書を発行する #

Cloud Front で利用する SSL 証明書は、バージニア北部リージョン(us-east-1)で取得する必要があることに注意。

証明書取得後のキャプチャ #

Certificate Manager

4. Cloud Front に SSL および独自ドメインを設定する #

  1. 発行した SSL 証明書をディストリビューションに適用する
  2. CNAME を設定する

作業後の Cloud Front のキャプチャ #

Cloud Front

作業後の Route 53 のキャプチャ #

Route 53

5. Cloud Front および S3 に Referer 設定を追加する #

これを実施することで ユーザが S3 のバケットエンドポイント（http://********.s3-website-ap-northeast-1.amazonaws.com）に直接アクセスした時にはエラーとすることができ、Cloud Front 経由でのアクセスを強制することができる。

  1. Cloud Front に Referer ヘッダー（カスタムヘッダー）を追加する
  2. S3 にバケットポリシーを追加する

作業後の Cloud Front のキャプチャ #

ヘッダー名と値は実際には任意だが自分の場合は以下としている。

  • ヘッダー名： Referer
  • 値： ディストリビューションドメイン名（例：http://**************.cloudfront.net）

Cloud Front

作業後の S3 のバケットポリシー # 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Allow requests only originating from CloudFront.",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::バケット名/*",
      "Condition": {
        "StringLike": {
          "aws:Referer": "[Cloud Frontに設定したRefererの値]"
        }
      }
    }
  ]
}

以上 #

以上で作業は全て終了。

なお、資産を S3 にアップロードするのは AWS コンソールの GUI でもできるが、 AWS CLI を使うと楽。デプロイしたい資産のディレクトリにいる状態で以下を実行。

aws s3 cp . s3://bucket-name --recursive

（bucket-name のところに実際のバケット名を入力）