前提
- S3に静的ホスティングするhtml等は用意できている
ちなみに、S3の静的ホスティングのみでhttps接続を実現できるんですかね？
それができないっぽかったので、CloudFrontを間に設けてhttpsアクセスを実現しようと考えました。
Tips
先にハマったところというか、個人的に直感的でなかったことを挙げておきます。
CloudFront で OAI 設定してアクセスする場合、S3側は静的ホスティング有効しなくて良い
正確には OAI 設定が関係ある革は確認していませんが、少なくとも S3 側で静的ホスティング有効にしなくても CloudFront 経由でバケットにアクセスできます。
これは個人的にはちょっと？？？です。静的ホスティングの設定ってあれなにやってるんだろ？
CloudFront で OAI 設定した場合、バケットポリシーは S3 側に手動で設定する必要がある
下記説明で書いていますが、なんでこんな仕様？ハマりました。
CloudFront からS3バケット内の index.html にアクセスする場合、URLに「index.html」まで記述しないとアクセスできない
たとえS3側で静的ホスティング有効にしていても、CloudFrontからアクセスするときはURLを拡張子までちゃんと入力する必要がります。（というかたぶんCloudFrontからすると静的ホスティングとか関係ない？）
これを対処する方法として、下記説明でかいていますが、「デフォルトルートオブジェクト」を設定すると「index.html」を省略できます。
手順
1. S3のバケットを作成し、ソースをアップロードする
アップロード方法は説明省略します。
ここでポイントは、ただアップロードするだけで、パブリック化も静的ホスティングも有効にしない（つまり全てデフォルトのまま）ということです。
2. CloudFront でディストリビューションを作成する
- CloudFront の画面に行き、「ディストリビューションを作成」を選択します
- 「オリジンドメイン」には、１．で作成したS3のバケットをプルダウンから選択します
- 「名前」の欄は、自動で入力されます
- 「S3バケットアクセス」は「Oring access control settings」を選択します
- 「コントロール設定を作成」ボタンを押します
- ポプアップが表示されますが、そのまま「作成」でよいです
- 「ビューワープロトコルポリシー」はリダイレクトを選択することで https アクセスに限定できます
- 「許可されたHTTPメソッド」は用途に応じて選択する感じでしょうか
- 「デフォルトルートオブジェクト」に
index.htmlとします（重要）
上記でディストリビューション完了です。
反映されるまでに数分かかりますので、それまでにS3のバケットポリシーを更新します（超重要）
3. S3のバケットポリシーを更新する
- 下記画面で「オリジン」を選択します
- オリジンを選択し、編集ボタンを押します
- 「ポリシーをコピー」を押して、「S3バケットアクセセウ許可に移動」を押します
- S3のバケット設定に飛ぶので、そこで「バケットポリシー」の「編集」を押します
- ポリシーの欄に先ほどコピーしたポリシーを貼り付けます
＊この際、何故か先頭にスペースが入った状態でコピーされることがあります。その状態だと保存エラーになるので、えらーになったらjsonの先頭にスペースが入ってないか確認してみてください - 「変更を保存」します
動作確認
下記画面のコピーボタンを押すことで、URLがコピーされます。
これをブラウザに貼り付けてURL移動するとサイトが表示されるはずです。
コメント