Zenn
🦁

OACを利用したCloudFront + S3の静的ウェブサイトの作成手順

2024/04/14に公開
AWS
S3
CloudFront
oac
tech

OACを利用したCloudFront + S3の作成手順を今回は作成しようと思います。

こんにちは！ オンプレインフラエンジニアとして働かせていただいているこうきと申します！

AWSは業務ではあまり現在触れておりませんが、今後AWSエンジニアに転身したいという思いもあり、
ゆるくAWSに関する技術ブログを掲載させていただいております。

今回は、OAC対応のCloudFront + S3構成を作成してみようと思います。

OACとは？

OACは、"Organization Access Control" の略で、AWSにおいて組織全体でのアクセス管理を行うための仕組みです。OACを使用すると、AWSリソースへのアクセスを組織全体で統一的に管理し、セキュリティとコンプライアンスを強化できます。

構成図

今回の構成図としてはざっくり以下となります。

それでは以下の手順で作成します！

S3バケットの作成

  1. S3バケットを作成します。
  2. 命名は一意の名前で今回は「cloudfront-oactest-20240413」と私は名付けます
  3. パブリックアクセスをすべてブロックをオフにするように設定してください

他はデフォルトの設定のままで問題ありませんので、バケットを作成をクリックします。

S3バケットテスト用のhtmlファイルをアップロード

  1. 作成したS3バケット内のオブジェクトにテスト用のhtmlファイルをアップロードします。
    ▼アップロードに使用したテスト用のファイルの中身は以下となります。
<!DOCTYPE html>
<html>
  <head>
    <title>CloudFront-oac-test</title>
  </head>
  <body>
    <h1>CloudFront-oac-test</h1>
    <p>test html</p>
  </body>

S3バケット設定編集

  1. バケット内のプロパティタブを選択 > 静的ウェブサイトホスティングの欄の編集をクリックします。
  2. 静的ウェブサイトホスティングを有効にする選択 > インデックスドキュメントとエラードキュメントの欄に適当なファイル名を記載します。
    ※筆者は「cloudfront-oactest.html」、「error.html」と記載しました。
  3. 変更の保存をクリックします。


S3バケットのACLを編集

現在の状態ですと、静的ウェブサイトに接続しても403エラーになりますので
以下の手順でアクセス許可の設定を行います。

  1. 対象のオブジェクトを選択 > アクセス許可タブをクリック
    ※筆者だとcloudfront-oac-test.html
  2. おそらく現時点だと編集不可なので、バケット所有者の強制リンクをクリックし、ACL有効を選択し変更を保存いたします。
  3. 再度オブジェクトのアクセス許可タブに戻り、編集画面が編集画面が押下可能になっている為、クリックします。
  4. パブリックアクセス読み込みを選択 > 表示される警告文もクリックし変更の保存をクリックします。



▼上記までの手順を終え、オブジェクトURLに接続してみると、問題なく閲覧できることが確認できました！

Cloudfrontを作成し、S3の静的ウェブサイトと連携する。

上記までの手順でS3バケットの設定などは完了しましたので
続いて下記手順でCloudfrontの作成、S3バケットとの連携を行なっていきます。

  1. Cloudfrontサービスを選択 > ディストリビューションを作成をクリックします。
  2. オリジンドメインに先程作成したバケットを選択 > オリジンアクセスの欄でOrigin access control settingsを選択 > Create new OACを選択しOACを作成します。
    ※OACの命名はデフォルトのままでOKです。
  3. 料金クラスを北米、欧州、アジア、中東、アフリカを使用に選択し、ディストリビューションを作成をクリックします。

  4. 作成完了後に「S3バケットポリシーを更新する必要があります」とポップアップで表示されるので、ポリシーをコピーし、「S3バケットの権限に移動してポリシーを更新する」をクリックします。
  5. アクセス許可タブが表示されるので、バケットポリシーを編集をクリックし、ポリシー欄に先程コピーしたポリシーをペースト後に変更の保存をクリックします。

上記までの設定でCloudfrontのディストリビューションドメイン名 + オブジェクト名をURLを入力し、
検索した後に先程確認したページが閲覧できていればS3とCloudfrontの連携は完璧です！
※筆者の環境だと「d3nbvwu2ji5aag.cloudfront.net/cloudfront-oac-test.html」がドメインとなります。

OACを利用したCloudfront経由でのS3アクセスだけを許可するようS3バケットポリシーを編集する

現在の状態ですと、CloudfrontのURL、S3のURL両方から接続ができる様になっておりますので
CloudfrontのURLのみ許可したい為、S3のバケットポリシーを編集します！

  1. S3オブジェクトのアクセス許可タブを選択 > 編集をクリックします。
  2. パブリックアクセスの読み込みのチェックを外します > 変更の保存をクリックします。


  1. 次にS3バケットのアクセス許可タブをクリックします。 > ブロックパブリックアクセス (バケット設定)の編集をクリックします。
  2. パブリックアクセスをすべてブロックのチェックを外します。 > 保存をクリックします。


5.これでCloudfront経由でのみS3バケットオブジェクトに接続できることができました。
試しにS3バケットのURLを新たに接続してみると、画像のようにアクセスできないことを確認できました。

▼Cloudfront経由では変わらずアクセスできることも念の為確認しましょう

最後に

今回はOACを利用したCloudFront + S3の静的ウェブサイトの作成手順を記載しました。
余裕があればこちらをCloudformationで作成できるコードを今後展開していければと思います。

Discussion