エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

CloudFront+S3でUnity WebGLを配信した

先日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のファイルアップロード、メタデータの設定については↓の記事を参照ください。

tm-progapp.hatenablog.com

手順

S3の設定

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

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

CloudFrontを作成

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

オリジン

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

  • ビューワープロトコルポリシー: 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のドメイン名を入れて、アクセスできるか確認してみましょう。