CloudFront+S3+Route53で独自ドメインでHTTPS化した静的サイトを公開
CloudFront+S3+Route53のAWSサービスを使って、独自ドメインでHTTPS化した静的サイトを作成する手順を説明します。
目次
事前準備
CloudFrontでS3を公開
CloudFrontを作成し、S3との紐づけ、SSL証明書の設定等を行います。
[Create Distribution]を押してCloudFrontを作成画面へ移動します。
[GetStarted]を押します。
CloudFrontの各種設定を行います。（長いので分割して画像を挿入しています。）
【Origin Settings】
Origin Domain Name: S3のバケット名が自動で出てくるので選択
Origin Path: 任意
Origin ID: Origin Domainを選択すると自動で記入
Restrict Bucket Access: yesにチェック。(Yes: S3のURLで直接アクセスを拒否する。）
Origin Access Identity: "Create a New Identity"を選択して、特定のディストリビューションのみからアクセス可能に設定する。
Comment: 自動で生成されたもの。そのまま。
Grant Read Permissions on Bucket: "Yes, Update Bucket Policy"を選択して、バケットポリシーを更新する。
Origin Custom HeadersHeader Name: ヘッダをカスタムしたい場合はここで追加する。
【Default Cache Behavior Settings】
Path Pattern: Default(*) で固定。
Viewer Protocol Policy: 任意で好きなものを選択してください。今回はHTTPSのみを選択。
Allowed HTTP Methods: 任意。GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETEを選択。
Cached HTTP Methods: そのまま
Forward Headers: "None"を選択
Object Caching: "Use Origin Cache Headers"を選択
Minimum TTL: 0
Maximum TTL: 31536000
Default TTL: 86400
Forward Cookies: None
Query String Forwarding and Caching: None
Smooth Streaming: ストリーム配信をしないのでNoを選択。
Restrict Viewer Access
(Use Signed URLs or Signed Cookies): 署名付きURL、クッキーを使いたい場合はYes。今回は利用しないためNo.
Compress Objects Automatically: GZIPの圧縮使いデータ転送コストが下がりページロードが早くなります。今回はYesを選択。
Lambda Function Associations: ラムダ機能と連携機能。CloudFrontのイベントをキャッチしてLambda関数を実行したい場合に設定します。今回は使用しないためそのまま。
【Distribution Settings】
Price Class: "Use All Edge Locations" 特になければすべてを選択。
AWS WAF Web ACL: "None"
Alternate Domain Names(CNAMEs): 使用するドメインを設定する。(例: example.com)
SSL Certificate: "Default CloudFront Certificate" 独自ドメインを用意してなければAWSのデフォルトのものを選択。
"Custom SSL Certificate" 独自ドメインでSSLを公開したいならこちらから作成可能。（[Request or Import a Certificate with ACM]を選択することでSSL証明書を作成する画面へ移動できます。）
Supported HTTP Versions: "HTTP/2, HTTP/1.1, HTTP/1.0"
Default Root Object: デフォルトでアクセスするオブジェクトを設定します。index.htmlを入力。
Logging: off(ログを残したい場合は、"On"を選択。専用のS3バケットを用意して"Bucket for Logs"に設定する必要があります。）
Enable IPv6: チェックを入れる。
Comment: メモを残したい場合は記入します。
Distribution State: Enableを選択。
[CreateDistribution]を押して作成します。
CloudFrontのTop画面に戻ると作成したCloudFrontが一覧に表示されます。
またStatusのところが"In Progress"(進行中)と表示されていますが、15分くらい経つと"Deployed"(デプロイ完了)に完了になります。
Route53で独自ドメインとCloudFrontを紐づけ
Route53の画面へ移動し、左部メニューから[Hosted zones]を選択し、上部の[Create Hosted Zone]を押してホストゾーンを作成します。
最初はNSとSOAしかありません。ここに独自ドメインとCloudFrontを紐づける設定を入れましょう。
[Create Record Set]を押すと右側に設定画面が出現するので以下を設定します。
Name: SSLやS3と同じドメインを設定
Type: A - IPv4 address
Alias: "Yes"を選択
Alias Target: CloudFrontのエンドポイントを選択
Routing Policy: "Simple"
Evaluate Target Health: "No"
[Create]を押して確定させます。
すると一覧に追加されます。早速ブラウザを開いて設定したドメインに対してhttpsで接続してみましょう。するとおそらく接続できないと思います。DNSは設定が伝搬するまで時間がかかるため、すぐには反映されません。長い場合は1日以上かかるようなので気長に待ちましょう。
設定については以上です。
