ISIT自習室ENGINEERING LOG
TECH / AWS

ENGINEERING ARTICLE

CloudFrontと非公開S3で静的サイトを配信する方法｜OAC構成を解説

WRITTEN BYManabu
# AWS # CloudFront # S3 # OAC # 静的サイト

この記事は約3分で読めます

こんにちは、 @Manabu です。

S3に配置した静的ファイルを公開する場合、S3バケット自体をインターネットへ公開する方法があります。

ただ、CloudFrontを利用するのであれば、S3を非公開にしたままCloudFrontからだけアクセスできる構成にすることができます。

今回は、CloudFrontとS3で静的サイトを公開する時に使用できる、OACの構成と設定時のポイントについて紹介します。

この記事は、以下のような方におすすめです。

こんな方におすすめ

  • CloudFrontとS3で静的サイトを公開したい
  • S3をパブリックにせず、安全にファイルを配信したい

同じような構成を検討している方は、ぜひ参考にしてください。

構成

使用するサービスは次のとおりです。

  • Amazon S3：HTML、CSS、JavaScript、画像の保存
  • Amazon CloudFront：HTTPS通信とコンテンツ配信
  • Origin Access Control：CloudFrontからS3へのアクセス許可
  • AWS Certificate Manager：独自ドメインの証明書
  • Route 53：独自ドメインの名前解決

S3を非公開にする

S3ではBlock Public Accessを有効にし、一般ユーザーから直接アクセスできない状態にします。

CloudFrontのオリジンには、S3の静的Webサイトエンドポイントではなく、通常のS3バケットオリジンを指定します。そのうえでOACを作成し、CloudFrontから署名付きリクエストを送信します。

バケットポリシーを設定する

OACを作成しただけではS3のファイルを読み取れません。CloudFrontディストリビューションからのGetObjectを許可するバケットポリシーも必要です。

CloudFrontの画面に表示されるポリシーを利用すると、対象ディストリビューションだけを許可できます。

URLの解決に注意する

S3バケットオリジンでは、/aws/example/から自動的に/aws/example/index.htmlを返しません。

ブログのようなURLを使う場合は、CloudFront FunctionなどでリクエストURIを書き換えます。

/aws/example/
↓
/aws/example/index.html

CloudFront Functionの作成方法と、静的ファイルやAPIのパスを除外しながらURLを書き換える方法は、以下の記事で詳しく紹介しています。

REFERENCEOACで非公開S3を使う静的サイト！CloudFront Functionでindex.htmlへ変換IT自習室

まとめ

今回は、CloudFrontと非公開S3を使って静的サイトを配信する方法について紹介しました。

S3のBlock Public Accessを有効にし、OACとバケットポリシーを適切に設定することで、CloudFrontからだけファイルを取得できるようになります。

S3を直接公開せずに静的サイトを配信したい方は、ぜひ参考にしてみてください。

参考資料

REFERENCEAmazon S3 オリジンへのアクセスを制限する - Amazon CloudFrontdocs.aws.amazon.com