S3バケットに保存された静的ファイルを、Route 53で管理している独自ドメインからHTTPS経由でブラウザに表示させる方法について解説する記事です。
Route 53 と S3 での静的ファイルへのアクセス
S3のホスティング機能とRoute 53を組み合わせることで、独自ドメインからブラウザで（S3バケットに保存された）静的ファイルにアクセスできるようになります。
この設定を行う場合は、Route 53のドメイン名と静的ファイルを置いているS3バケット名が厳密に一致することが前提となります。Route 53 の ドメイン名が skill.for.it.com であれば S3バケット名も skill.for.it.com であるということです。
公式ドキュメントはこちら
その他、S3で設定しておくこととしては
S3の静的ウェブホスティング機能を使うと、バケット内に保存したファイルは、ウェブサイトエンドポイント経由でアクセスできるようになります。
Route 53 では、S3のウェブサイトエンドポイントをエイリアスレコードとして設定する必要があります。詳しくはこちら
上記の設定で、ドメイン名を指定するとS3に保存した静的ファイルがブラウザ上で表示されるようになります。ただ、実際のURLを見てもらえれば分かるように使われているプロトコルはHTTPとなっています。これはウェブサイトエンドポイントがHTTPしか対応していないためです。現在の主要ブラウザではHTTPSでのアクセスが一般的となっているため、HTTPSに対応した設定にする必要があります。
以降の記事では、その設定について見ていきます。
CloudFront を使用してHTTPSに対応する
S3の静的ウェブホスティング機能とRoute 53を組み合わせて、独自ドメインからHTTPで静的ファイルを配信するところまで解説しました。
しかし、実際には
- S3のウェブサイトエンドポイントはHTTPSに非対応
- 現代のウェブサイトではHTTPS対応が必須
- セキュリティ上、S3への直接アクセスも制御すべき
という課題があります。
ここからは静的ウェブサイトをHTTPSに対応させるための設定方法について紹介していきます。
結論から申し上げると CloudFront を使用します。
簡単に CloudFront を紹介しておきます。
AWSが提供するコンテンツデリバリネットワーク（CDN）サービスです。CloudFrontは、静的コンテンツ（例：HTML、CSS、JavaScript、画像ファイル）や動的コンテンツ、動画、アプリケーションコンテンツなどを、世界中のユーザーに素早く・安全に配信することを目的としています。
またここで行う構成は以下のようになります。
[ User Browser ]
|
HTTPS
▼
[ Route 53 ]
(DNS)
▼
[ CloudFront ]
+ ACM証明書
+ OAC設定
▼
[ S3 Bucket ]
(REST APIエンドポイント)
(バケットポリシーでCloudFrontのみ許可)前提として、以下は設定済みとします。
- Route 53 で独自ドメインの設定済み
- S3バケットに静的ファイル（index.html , css , JavaScript など）は配置済み
- S3バケットのホスティング機能を解除（disable）にしておく
- S3バケットのACLを無効にしておく
- S3バケットのパブリックアクセスをOFFにしておく。これにより、後ほど紹介するオリジンアクセスコントロール（OAC）の設定でCloudFrontからS3での通信のみに制限することが可能となる
- S3バケットのバケットポリシーは未設定
ACM証明書の発行
CloudFront で ACM証明書 を使用するには、米国東部（バージニア北部）リージョン（us-east-1）の証明書をリクエストしている必要があります。これは、ユーザーと CloudFront 間の通信をHTTPSで行うための設定になります。
ACMの発行方法についてはこちらをご確認ください。リージョンは us-east-1 です。お間違え無く。
なお記事内で紹介されている *（アスタリスク） をつけたサブドメインの設定も必ず行っておきましょう。
CloudFront Distributions の作成
CloudFront の Distributions で作成していきます。Distributions とは、CloudFrontでコンテンツを配信するための設定単位となります。「どこからコンテンツを取得するか（オリジンの指定）」「どのようにキャッシュさせるか」「セキュリティやアクセスコントロールはどうするか」などの様々な設定を行うことができます。
Custom domain – optional
Route 53 に設定した独自ドメイン名を入力します。Check domain で存在するドメイン名かどうかチェックされます。
Specify origin
Origin type は CloudFront がリクエストするオリジンを設定します。今回はS3となります。
S3 Origin は 今回対象となるS3バケットのREST API エンドポイントを選択します。Browse S3 ボタンより選択できます。
S3バケットのREST API エンドポイント形式：bucket-name.s3.amazonaws.com
Origin path – optional は CloudFrontがオリジン（S3バケットやWebサーバなど）にリクエストを送信する際に、指定されたパス（ディレクトリ）を必ず付加するための設定です。今回はS3バケットの直下に index.html を配置しているため不要です。
Allow private S3 bucket access to CloudFront – Recommended はチェックを入れておきます。これにより、CloudFront から S3 へのアクセス許可を行うバケットポリシーが自動で作成・適用されます。
Origin settings の Use recommended origin settings を選択することで、選択したオリジンの種類に応じてCloudFrontが推奨する安全な接続方法や最適な値が自動的にセットされます。
S3であれば、オリジンアクセスコントロール（OAC）の自動設定、HTTPS通信の推奨、カスタムヘッダーは無効 などです。
OACについてはこちら
Enable security
WAFの設定は今回行っておりません。
Get TLS certificateGet TLS certificate
Available certificates は 独自ドメインに設定したACMが表示されていると思いますので、そちらを選択します。
上記の設定で Distributions の作成が完了です。
CloudFront から S3バケットへのアクセス
Distributions を作成すると CloudFront はドメイン名 (d111111abcdef8.cloudfront.net など) を割り当てます。これで CloudFront から S3 へのアクセスを確認しておきます。
ただそのままでは、準備した index.html にはアクセスできないので、CloudFront のドメイン名の後に /index.html を追加してください。そうすることでブラウザ上にS3バケットに保存した静的ファイルの内容が表示されます。URLもHTTPSとなっていることも合わせて確認してください。
Default root object の設定
CloudFront の ドメイン名 + index.html で S3バケットの静的ファイルへアクセスすることが可能となりましたが、ドメイン名のみでアクセスしたいので、その設定を行っておきます。この設定をしておくことで 後ほど紹介する Route 53 で設定している独自ドメイン名からS3バケットへアクセスすることが可能となります。
Distribution の Settings の Edit を選択
Default root object – option に index.html を設定します。これで、CloudFront のドメイン名を指定するとS3バケット直下にある index.html へとアクセスすることができます。
今回は直接設定していませんが、CloudFront の代替ドメイン名については知っておきましょう。
Route 53 への設定
最後に CloudFront のドメイン名を Route 53 のエイリアスレコード（Aレコード）に登録します。これで、Route 53 の独自ドメイン名から CloudFront を通じて、S3バケットの静的ファイルへHTTPS通信でアクセスすることが可能となります。
今回は以上となります。
コメント