Amazon CloudFront + S3 + Route 53 で独自ドメインで静的ウェブサイトを公開する方法

Amazon CloudFront, S3, Route 53 を利用して、独自ドメインで静的ウェブサイトを公開する方法をご紹介します。

AWS | Amazon Web Services

前提

背景・各種環境など

  • 日本向けのウェブサイト
  • ドメイン名 your-site.example.com

S3 だけでも静的サイトは公開できる

Amazon S3 に静的ウェブサイトをホスティングする | CodeNote

で書きましたが、S3 だけでも静的ウェブサイトをホスティングすることはできます。

しかし、S3 だけで運用すると S3 bucket に大量アクセスがきたときに高額請求になるリスクがあるので、本記事では CloudFront と S3 を組み合わせて使います。

『構成 1. CloudFront のオリジンに、 S3 バケットそのものを指定する構成』 – CloudFront + S3 で静的サイトを運用する際の注意点 – Qiita

の設定していきます。

S3 バケットの作成

名前とリージョン

S3 Create bucket

リージョン 米国西部 (オレゴン) が $0.023 で最安価なのでこれを利用します。

参考: AWS S3のリージョン毎のストレージ価格比較

オプションの設定

特に何も選択しません。

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

CloudFront Distribution の作成

オリジンアクセスアイデンティティを使用して Amazon S3 コンテンツへのアクセスを制限する – Amazon CloudFront

Create Distribution

  1. [Create Distribution]
  2. Select a delivery method for your content. – Web – [Get Started]

Origin Settings

Create Distribution - Origin Settings | CloudFront

  • 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

Default Cache Behavior Settings | CloudFront

  • 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

Distribution Settings | CloudFront

  • 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 | CloudFront

  • Default Root Object: index.html

Route 53 で DNS 設定変更

最後に Route 53 で DNS を設定すれば、独自ドメインで CloudFront + S3 で静的ウェブサイトをホスティングに必要な作業は全て完了です。

Create Record Set | Route 53

以上、Amazon CloudFront と S3 で静的ウェブサイトを公開した、現場からお送りしました。

参考情報