2022/03/05

CloudFront+S3でUnity WebGLを配信した

目次

動作環境
前提条件
手順
S3の設定
CloudFrontを作成

先日S3の静的ウェブサイトホスティングを使ってUnity WebGLを配信しました。ただhttps化したい場合、S3単独ではできないのでCloudFrontと組み合わせる方法を解説してます。

手順的にはほぼReactやAngular等のフロントエンドアプリを独自ドメイン配信する時と同じです。

動作環境

Unity 2020.3.30f1
Windows11 Home 21H2(OSビルド 22000.493)

前提条件

Route53でドメイン登録、CloudFrontに割り当てるAレコード登録済み
S3にUnity WebGLのビルド後のファイルはアップロード済み
- 一部ファイルのメタデータも編集・追記済み

S3のファイルアップロード、メタデータの設定については↓の記事を参照ください。

AWS S3のStatic Website HostingでUnity WebGLを配信してみた

手順

S3の設定

今回、CloudFrontがサイト訪問者の為のエンドポイントとなるので、S3は静的ウェブサイトホスティング、パブリックアクセスを有効化する必要はありません。セキュリティ的にアクセス許可は必要最低限に絞った方が良いので、下記のように設定します。

静的ウェブサイトホスティング: 無効
ブロックパブリックアクセス: パブリックアクセスをすべてブロックをオン
バケットポリシー: 未指定(後からCloudFront作成時に自動適用させます)
Cross-Origin Resource Sharing: 下記のように設定

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

CloudFrontを作成

CloudFrontを新規作成します。設定値は下記のようにします。記述のない項目はデフォルト値のままです。

オリジン

オリジンドメイン: {S3バケット名}.s3.ap-northeast-1.amazonaws.com
S3バケットアクセス: 「はい、OAIを使用します」を選択。
- オリジンアクセスアイデンティティ: 新しいOAIを作成
- バケットポリシー: 「はい、バケットポリシーを自動で更新します」を選択
  - これを選択することでS3のバケットポリシーが自動追加され、CloudFrontからS3の参照が許可されます。

デフォルトのキャッシュビヘイビア

ビューワープロトコルポリシー: Redirect HTTP to HTTPS
許可された HTTP メソッド: GET, HEAD, OPTIONS
キャッシュキーとオリジンリクエスト: Cache policy and origin request policy (recommended)
- キャッシュポリシー: CachingOptimized
  - キャッシュポリシーはあくまで例なので運用に合わせて適宜チューニング下さい。

設定

代替ドメイン名 (CNAME) - オプション: {Route53で定義したAレコード名}
カスタム SSL 証明書 - オプション: Route53で取得したSSL証明書を選択
デフォルトルートオブジェクト: index.html

数分後に作成が完了します。完了したらブラウザのURLバーにCloudFrontのドメイン名を入れて、アクセスできるか確認してみましょう。