【AWS】S3で静的ウェブサイトをホスティング

2020-12-24AWS,S3CloudFront,Route53,S3

前提・やりたいこと

PHPやDBを使わない、HTML(とCSS,JS)ファイルだけの静的サイトを安価に公開したい。

AmplifyでもできるしGitHub連携がすごく楽なのですが、S3でバケットを作ってサイトを公開する方法もメモ。

前提として既にRoute53でドメインを管理していて、ACMも使っているのでSSL証明書はあるものとします。

S3で静的Webサイトホスティングを設定

S3にWeb公開用のバケットを作成します。HTTPSアクセスとかを考えなければこれだけでもうホスティングできてしまう。

バケットを作成

バケット名に最終的に表示したいドメインを入れて作成

バケットのプロパティ編集

作成されたバケットを選択し、「プロパティ」タブから設定する

静的Webホスティングを有効にする

「静的ウェブサイトホスティング」→「編集する」

以下を設定して変更の保存

  • 静的ウェブサイトホスティング：有効にする
  • ホスティングタイプ：静的ウェブサイトをホストする
  • インデックスドキュメント：index.html(任意ファイル名)
  • エラードキュメント：error.html(任意ファイル名)

バケットのアクセス許可を編集

作成されたバケットを選択し、「アクセス許可」タブから設定する

アクセス許可とバケットポリシーを設定する

パブリックアクセスのブロックをすべて解除

バケットポリシーの作成

Resourceにバケット名を設定して保存

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::new-s3.mkdev.work/*"
            ]
        }
    ]
}

公開の確認

index.htmlをバケットにアップロード

エンドポイントのURLに遷移して確認

「静的ウェブサイトホスティング」→「バケットウェブサイトエンドポイント」

「バケットウェブサイトエンドポイント」のURLにアクセスして表示されればOK。ただしSSLはS3単体では使えないので「保護されていない通信」と出る。

CloudFrontをS3に関連付け

S3で静的Webサイトが公開できたのを確認できたので、次はSSLを使えるようにCloudFrontを設定していく。

CloudFront ディストリビューションの作成

CloudFrontを開き「Create Distribution」を押下


「Web」の「Get Started」を押下

「Origin Settings」で以下を設定

  • Origin Domain Name：作成したS3バケットのエンドポイントを選択
  • Origin ID：自動入力

「Default Cache Behavior Settings」で以下を設定

  • Viewer Protocol Policy：Redirect HTTP to HTTPS
  • それ以外：デフォルト

「Distribution Settings」で以下を設定し保存

  • Alternate Domain Names(CNAMEs)：S3バケット名
  • SSL Certificate：Custom SSL Certificate ※あらかじめACMで証明書を発行しておく
  • Default Root Object：index.html(S3と同じ)
  • それ以外：デフォルト

公開の確認

作成されたディストリビューションの「General」→「Domain Name」にアクセスしてみる

ページが表示され、HTTPS通信もされていることが確認できる

Route53をCloudFrontに関連付け

サブドメインをCloudFrontに関連付けてURL短縮。

レコードを新規作成

Route 53を開き、ドメイン（ホストゾーン）を選択し、以下の内容でレコードを作成

  • レコード名：S3のバケット名に指定したサブドメイン
  • ルーティング先：S3と関連付けたCloudFront
  • レコードタイプ：A

公開の確認

設定したサブドメインのURLにアクセスして表示されればOK。やったー

2020-12-24AWS,S3CloudFront,Route53,S3

Posted by ケイ