【備忘録】PHPアプリのフロントを S3 + CloudFront（OAC）で公開するまで

初投稿です。
個人の備忘録として、AWSを使ったデプロイ方法についてまとめました。

---

前提

• ローカル環境で実行できる PHP の Web アプリがあること
• 今回は、試作したタイピングアプリ（index.php と音声ファイルのみのシンプルな構成）を使用します
• AWS アカウントを保持していること
  • 使用サービス：S3、CloudFront

※ 本記事では、PHP アプリの フロント部分（HTML / 静的ファイル） のみを S3 + CloudFront で配信します。

---

手順

1. HTML部分を index.html として切り出す

• PHP の HTML 部分を index.html として別ファイルに切り出します
• これにより、S3 に配置できる静的ファイルになります

---

2. S3 バケットを作成

• リージョン：東京（作成後に変更できないため注意）
• バケットタイプ：汎用
• バケット名：任意（ここでは example-typing-app-bucket とします）
• オブジェクト所有者：ACL 無効
• パブリックアクセス：すべてのチェックを外す
• バケットのバージョニング：無効
• 暗号化タイプ：Amazon S3 マネージドキーを使用したサーバー側の暗号化（SSE-S3）
• バケットキー：有効
• 詳細設定：デフォルト
• バケットを作成

---

3. 一時的にバケットポリシーを追加（確認用）

S3 の静的ウェブサイトホスティングの動作確認のため、
一時的に全公開のバケットポリシー を設定します。

※ この時点ではセキュリティ的に公開状態になるため、
後の手順で必ず削除します。

※ 本記事では動作確認のため一時的に公開設定を行いますが、
検証後は必ず削除・非公開にしてください。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadForStaticWebsite",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::example-typing-app-bucket/*"
    }
  ]
}

３．ファイルのアップロード

• 以下のファイルを、先ほど作成した S3 バケットにアップロードします
  • index.html
  • 音声ファイル（タイピング音、エラー音など）

---

４．（※一時的）静的ウェブサイトホスティングの有効化

※ CloudFront + OAC を利用する最終構成では使用しませんが、動作確認用として一時的に有効化します

• example-typing-app-bucket の プロパティ タブを開きます
• ページ下部にある 静的ウェブサイトホスティング の項目で「編集」をクリック
• 静的ウェブサイトホスティングを 有効 に設定
• インデックスドキュメントに index.html を指定
• 変更を保存

これで、以下の URL にアクセスするとアプリが表示されます。

※ 下記の URL はサンプル（ダミー）です。
実際には、ご自身で作成した S3 バケット名に置き換えてアクセスしてください。

この URL は後ほど無効化します。

次に CloudFront を利用して HTTPS 化・高速化 を行います。

---

５．CloudFront ＞ ディストリビューションの作成

• ディストリビューション名：任意
  （例：example-typing-app-distribution）
• ディストリビューションタイプ：Single website or app
• 次へ

オリジン設定

• オリジンタイプ：Amazon S3

• S3 オリジンの選択：
  example-typing-app-bucket.s3-website-ap-northeast-1.amazonaws.com

• 次へ

• 内容を確認してディストリビューションを作成

※ CloudFront の反映には数分〜十数分かかる場合があります。

---

６．S3 ＞ バケットのパブリックアクセスを無効化

CloudFront 経由のみでアクセスさせるため、
S3 バケット自体は完全に非公開にします。

• S3 バケットの アクセス許可 タブを開く
• ブロックパブリックアクセス（バケット設定） を編集
• 「パブリックアクセスをすべてブロック」を有効化して保存

• 既存のバケットポリシーを削除
• プロパティ ＞ 静的ウェブサイトホスティング を 無効 に設定

---

７．CloudFront ＞ オリジン設定の編集（OAC設定）

CloudFront からのみ S3 にアクセスできるよう、
Origin Access Control（OAC） を設定します。

• CloudFront ＞ ディストリビューション ＞ オリジンを編集
• オリジンアクセス：Origin access control settings
• 新しい OAC を作成
  • OAC 名：任意（例：example-typing-app-oac）
  • 署名動作：署名リクエスト

---

８．バケットポリシーの設定

CloudFront のみが S3 にアクセスできるよう、
以下のバケットポリシーを設定します。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFrontAccessOnly",
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::example-typing-app-bucket/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/ABCDEFG12345"
        }
      }
    }
  ]
}

123456789012 → あなたのAWSアカウントID

ABCDEFG12345 → CloudFront Distribution ID

これにより、

• S3 の URL へ直接アクセス → 拒否
• CloudFront 経由のアクセス → 表示可能

となります。

まとめ

S3 と CloudFront（OAC）だけを使った、
最小構成かつセキュアな静的サイト配信を実現できました。

設定自体もシンプルで、慣れていれば 1 時間もかからずに構築できます。

将来的にログイン機能やデータ保存が必要になった場合は、
API Gateway + Lambda + DynamoDB を組み合わせることで
フルサーバーレス構成へ拡張することも可能です。

また、CloudFront には独自ドメインを設定することもできるため、
本番運用にも十分対応できます。