【2023年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法～前編～
【更新履歴】
2023年に同様にできることを確認＋加筆
—-
今回は、AWSのS3でHTTPS対応した、静的サイトを独自ドメインでホスティングする方法について説明しようと思います。
きっかけは、amazonのチュートリアルサイトが分かりにくい＆適切な情報が見つからなかったからです。
このページを見れば、S3でHTTPS通信に対応したサイトを簡単に作ることができるかと思います。
説明が長くなってしまったので、前編後編に分かれています。
前編では、HTTP接続までをカバーしています。
後編はこちら。
構成図
このように、S3の前に、ACM（AWSのHTTPS証明書サービス）に対応しているCloudFrontを使います。
なお、今回の説明では、独自ドメインはAWSのROUTE53を使って取得している前提で記述しています。
ちなみに、私の独自ドメインは[devdev.link]という少し変わったドメインです（年間＄５と安かったｗ）
なので、URLはhttps://www.devdev.link/index.html、のようになります。
そこは、みなさんの独自ドメインに合わせて、読み替えていただければと思います。
説明
独自ドメインをROUTE53で取得する
ここは特に分かりにくいところはないと思うので、任意のものを取得していただければと思います。
適当なHTMLファイルを作る
例えばこんな感じの、index.htmlファイルをつくります。
トップページなのでindex.htmlという名前にすることをお勧めします。
（確かそうしないと上手くいかなかったはずです）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet"> <style type="text/css"> body { background-color: darkseagreen; } h1 { font-family: 'Yusei Magic', sans-serif; } </style> </head> <body> <h1>こんにちは世界<br>S3を使ってHTTPSをホスティングする例</h1> </body> </html> |
S3で静的サイトを作る（HTTPのみ対応）
S3へアップロード
まずはバケットを作成をクリック。
そして、バケットに名前をつけるのですが、ここで注意点があります。
バケットの名前は、絶対にドメインの名前にしてください！
つまり、独自ドメインが[example.com]なのであれば、バケット名はexample.comにしてください。
ここは少しハマりどころかもしれません。
私の場合は、[devdev.link]なので、その名前にします。
そのままデフォルトの設定で、作成をクリックしてください。
処理が終了したら、アップロードボタンを押して、作成したHTMLファイルをアップロードします。
設定は何も変える必要はありません。
また、ファイル名はindex.htmlにしてください。
そのまま下部にあるアップロードボタンを押します。
閉じるボタンを押します。
S3の公開設定を行う
HTMLファイルをアップロードし終わりましたので、公開準備をしていきます。
静的ウェブサイトをホスティング
プロパティタブをクリックし、下部の「静的ウェブサイトをホスティング」の編集するボタンを押下します。
「静的ウェブサイトを有効にする」をクリックすると、「インデックスドキュメント」と、「エラードキュメント」という項目があるので、入力します。
先ほど作成した、「index.html」と、もし作ってあれば「error.html」を記入します。
error.htmlはS3にアップロードしていない状態で、記述してもエラーになりません。
記述後、変更の保存をクリックします。
パブリックアクセスの許可
この状態では、まだパブリックの誰でもアクセスできる状態ではないので、変更します。
「アクセス許可」タブの「ブロックパブリックアクセス（バケット設定）」の編集するボタンをクリックします。
そして、「パブリックアクセスをすべてブロック」のチェックを外します。
その後、変更の保存をクリックします。
「設定を確認するには、フィールドに確認と入力します」と聞かれるので、確認と入力して先に進みます。
バケットポリシーの変更
先ほどの「アクセス許可」タブ中部の「バケットポリシー」の編集するボタンをクリックします。
ポリシー編集画面が開きます。
もしかすると、下記のようにポリシーは空欄かもしれませんが、後述のポリシーを貼り付けます。
ここでポリシー編集画面に、下記をコピペします。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::devdev.link/*" } ] } |
“Resource”: “arn:aws:s3:::devdev.link/*” の赤字部分は、ご自身のバケットネーム（＝ドメイン名）を記入してください。
バケットネームは、Amazonリソースネームと同じで、プロパティタブを押すと確認できます。
なお、このポリシーは、こちらの公式ドキュメントを転用しました。
意味合いとしては、Actionの所に書いてあるように、
S3のオブジェクトをGetして表示することを、Resourceの対象ファイルに対して、許可する、というものです。
Sidは任意です。
ちなみに、このポリシーはAWS Policy Generatorでも作成可能です。
HTTPで接続確認
プロパティタブをクリック後下部「静的ウェブサイトをホスティング」の所に、
「バケットウェブサイトエンドポイント」がありますので、そこをクリックしてアクセスしてみます。
無事に、index.htmlが表示されたらOKです。お疲れ様でした！
（S3を使ってHTTPSをホスティングする例って自分で書いてて意味不明ですねｗ（））
以上で前編は終了です。
ありがとうございました。
後編はこちら。