Amazon CloudFront + S3 + Route 53 で独自ドメインで静的ウェブサイトを公開する方法
- 2019 8/15
- カテゴリー : Amazon Web Services
- コメントを書く
Amazon CloudFront, S3, Route 53 を利用して、独自ドメインで静的ウェブサイトを公開する方法をご紹介します。
前提
背景・各種環境など
- 日本向けのウェブサイト
- ドメイン名 your-site.example.com
S3 だけでも静的サイトは公開できる
Amazon S3 に静的ウェブサイトをホスティングする | CodeNote
で書きましたが、S3 だけでも静的ウェブサイトをホスティングすることはできます。
しかし、S3 だけで運用すると S3 bucket に大量アクセスがきたときに高額請求になるリスクがあるので、本記事では CloudFront と S3 を組み合わせて使います。
『構成 1. CloudFront のオリジンに、 S3 バケットそのものを指定する構成』 – CloudFront + S3 で静的サイトを運用する際の注意点 – Qiita
の設定していきます。
S3 バケットの作成
名前とリージョン
リージョン 米国西部 (オレゴン) が $0.023 で最安価なのでこれを利用します。
オプションの設定
特に何も選択しません。
パブリックアクセスをすべてブロック
CloudFront Distribution の作成
オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する – Amazon CloudFront
Create Distribution
- [Create Distribution]
- Select a delivery method for your content. – Web – [Get Started]
Origin Settings
- Origin Domain Name: 上記で作成した S3 bucket を選択
- Origin ID: S3 bucket 名に対応して自動入力されるのでそのまま
- Restrict Bucket Access: Yes
- Origin Access Identity: Create a New Identity
- Comment: access-identity-適当に編集
- Grant Read Permissions on Bucket: Yes, Update Bucket Policy
Default Cache Behavior Settings
- Viewer Protocol Policy: Redirect HTTP to HTTPS
HTTP リクエストは HTTPS リクエストへ redirect させたいので Redirect HTTP to HTTPS を選択します。
参考: ビューワーと CloudFront との通信で HTTPS を必須にする – Amazon CloudFront
参考: CloudFront と Amazon S3 オリジンとの間の通信で HTTPS を必須にする – Amazon CloudFront
- Compress Objects Automatically: Yes
CloudFront に gzip 圧縮して配信してもらいたいので Compress Objects Automatically は Yes にします。転送量が減るので、高速化と転送料金の節約で一石二鳥になります。
Distribution Settings
- Price Class: Use U.S., Canada, Europe, Asia, Middle East and Africa
- Alternate Domain Names(CNAMEs): your-site.example.com
- SSL Certificate: Custom SSL Certificate (example.com)
SSL 証明書を未だ作成してない場合は、[Request or Import a Certificate with ACM] から SSL 証明書を発行しましょう。
- Default Root Object: index.html
Route 53 で DNS 設定変更
最後に Route 53 で DNS を設定すれば、独自ドメインで CloudFront + S3 で静的ウェブサイトをホスティングに必要な作業は全て完了です。
以上、Amazon CloudFront と S3 で静的ウェブサイトを公開した、現場からお送りしました。
参考情報
- [CloudFront + S3]特定バケットに特定ディストリビューションのみからアクセスできるよう設定する | DevelopersIO
- Amazon S3 + CloudFront で始める静的サイトホスティング | kuune.org