【2021年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法~前編~

【2021年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法~前編~

今回は、AWSのS3でHTTPS対応した、静的サイトを独自ドメインでホスティングする方法について説明しようと思います。

きっかけは、amazonのチュートリアルサイトが分かりにくい&適切な情報が見つからなかったからです。

このページを見れば、S3でHTTPS通信に対応したサイトを簡単に作ることができるかと思います。

説明が長くなってしまったので、前編後編に分かれています。

前編では、HTTP接続までをカバーしています。

後編はこちら

構成図

このように、S3の前に、ACM(AWSのHTTPS証明書サービス)に対応しているCloudFrontを使います。

なお、今回の説明では、独自ドメインはAWSのROUTE53を使って取得している前提で記述しています。

ちなみに、私の独自ドメインは[devdev.link]という少し変わったドメインです(年間$5と安かったw)

なので、URLはhttps://www.devdev.link/index.html、のようになります。

そこは、みなさんの独自ドメインに合わせて、読み替えていただければと思います。

 

説明

独自ドメインをROUTE53で取得する

ここは特に分かりにくいところはないと思うので、任意のものを取得していただければと思います。

適当なHTMLファイルを作る

例えばこんな感じの、index.htmlファイルをつくります。

トップページなのでindex.htmlという名前にすることをお勧めします。

(確かそうしないと上手くいかなかったはずです)

 

S3で静的サイトを作る(HTTPのみ対応)

S3へアップロード

まずはバケットを作成をクリック。

 

そして、バケットに名前をつけるのですが、ここで注意点があります。

バケットの名前は、絶対にドメインの名前にしてください!

つまり、独自ドメインが[example.com]なのであれば、バケット名はexample.comにしてください。

ここは少しハマりどころかもしれません。

私の場合は、[devdev.link]なので、その名前にします。

そのままデフォルトの設定で、作成をクリックしてください。

処理が終了したら、アップロードボタンを押して、作成したHTMLファイルをアップロードします。

設定は何も変える必要はありません。

また、ファイル名はindex.htmlにしてください。

 

S3の公開設定を行う

HTMLファイルをアップロードし終わりましたので、公開準備をしていきます。

静的ウェブサイトをホスティング

プロパティタブをクリックし、下部の「静的ウェブサイトをホスティング」を押下します。

「静的ウェブサイトを有効にする」をクリックすると、「インデックスドキュメント」と、「エラードキュメント」という項目があるので、入力します。

先ほど作成した、「index.html」と、もし作ってあれば「error.html」を記入します。

error.htmlはS3にアップロードしていない状態で、記述してもエラーになりません。

記述後、変更の保存をクリックします。

パブリックアクセスの許可

この状態では、まだパブリックの誰でもアクセスできる状態ではないので、変更します。

「アクセス許可」タブの「ブロックパブリックアクセス(バケット設定)」をクリックします。

そして、「パブリックアクセスをすべてブロック」のチェックを外します。

その後、変更の保存をクリックします。

「設定を確認するには、フィールドに確認と入力します」など聞かれますが全てYESでクリックします。

 

バケットポリシーの変更

先ほどの「アクセス許可」タブ中部の「バケットポリシー」の編集するをクリックします。

ポリシー編集画面が開きます。

ここでポリシー編集画面に、下記をコピペします。

“Resource”: “arn:aws:s3:::devdev.link/*” の赤字部分は、ご自身のバケットネーム(=ドメイン名)を記入してください。

バケットネームは、Amazonリソースネームと同じで、プロパティタブを押すと確認できます。

なお、このポリシーは、こちらの公式ドキュメントを転用しました。

HTTPで接続確認

プロパティタブをクリック後下部「静的ウェブサイトをホスティング」の所に、

「バケットウェブサイトエンドポイント」がありますので、そこをクリックしてアクセスしてみます。

無事に、index.htmlが表示されたらOKです。お疲れ様でした!

(S3を使ってHTTPSをホスティングする例って自分で書いてて意味不明ですねw())

 

以上で前編は終了です。

ありがとうございました。

後編はこちら