先日S3の静的ウェブサイトホスティングを使ってUnity WebGLを配信しました。 ただhttps化したい場合、S3単独ではできないのでCloudFrontと組み合わせる方法を解説してます。
手順的にはほぼReactやAngular等のフロントエンドアプリを独自ドメイン配信する時と同じです。
動作環境
- Unity 2020.3.30f1
- Windows11 Home 21H2(OSビルド 22000.493)
前提条件
S3のファイルアップロード、メタデータの設定については↓の記事を参照ください。
手順
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
- キャッシュポリシーはあくまで例なので運用に合わせて適宜チューニング下さい。
- キャッシュポリシー: CachingOptimized
設定
- 代替ドメイン名 (CNAME) - オプション: {Route53で定義したAレコード名}
- カスタム SSL 証明書 - オプション: Route53で取得したSSL証明書を選択
- デフォルトルートオブジェクト: index.html
数分後に作成が完了します。完了したらブラウザのURLバーにCloudFrontのドメイン名を入れて、アクセスできるか確認してみましょう。