・AWS S3 に配置したHTMLページをRoute 53 に登録した独自ドメインと紐付ける方法
はじめに
先日ランディングページをAWS S3で公開しようと思いまずは簡単なHTMLページをS3に配置してインターネットに公開する方法を紹介しました。
今回はRoute 53に登録した独自ドメインを使ってS3に紐付ける方法の紹介となります。
AWS S3を用いた簡単なHTMLページの公開方法は下記を参考ください。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/CodePipeline-で-EC2インスタンスに自動でデプロイする方法.png?resize=320%2C180&ssl=1)
独自ドメインをRoute 53に紐付ける方法は下記を参考ください。
S3にてバケットを作成
まずはHTMLページを格納する場所の作成が必要です。
S3でバケット作成を行います。
下記URLからS3の管理画面に移動します。
https://console.aws.amazon.com/s3/
移動後「バケットを作成」ボタンを押しバケットを作成します。
S3はこのバケット単位でアクセス制御を行います。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/08/image-33.png?resize=933%2C380&ssl=1)
バケットを作成画面に移動後はバケット名を入力します。
今回はRoute53に登録したドメインを使うため、Route53に登録した独自ドメインと合わせる必要があります。
サンプルとしてfreenomから取得した「osusublog-s3-test.ml」をドメインとしています。
そのためS3のバケット名も「osusublog-s3-test.ml」とします。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/image.png?resize=381%2C107&ssl=1)
バケット名を入力後はバケットに対するアクセス制御を行います。
今回はインターネットに公開するため、「このバケットのブロックパブリックアクセス設定」のチェックボックスは全て、未チェックとします。
未チェック時に表示される警告はチェックします。
この設定はバケット作成後でも変更可能です。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/08/image-35.png?resize=797%2C766&ssl=1)
あとはデフォルト設定で問題無いため、「バケットを作成」ボタンを押してバケットを作成します。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/08/image-36.png?resize=849%2C897&ssl=1)
バケット作成後の設定 とHTMLファイルのアップロードについて
この内容は先日紹介した箇所と同じため省略します。
下記を参考ください。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/CodePipeline-で-EC2インスタンスに自動でデプロイする方法.png?resize=320%2C180&ssl=1)
上記を参考しながらインデックスページとエラーページを格納すればインターネットに公開されます。
ただしURLはS3側が用意したURLとなっています。
今回は独自ドメインに紐付ける必要があるためRoute 53に取得したドメインを設定する必要があります。
Route 53の設定
ここからはRoute 53で独自ドメインを設定している方を対象としていますのでご注意ください。
まずはRoute 53の管理画面に移動します。
Route 53
https://console.aws.amazon.com/route53/
レコードの作成
管理画面にある「ホストゾーン」を選択して、「ホストゾーンの作成」を選択します。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/image-1.png?resize=878%2C203&ssl=1)
ドメイン名は取得したドメイン名(S3バケット名)を設定します。
今回はサンプルとしてfreenomから取得した「osusublog-s3-test.ml」をドメインとしています。
そのためRoute 53のドメイン名も「osusublog-s3-test.ml」とします。
それ以外の箇所はデフォルトで問題ありません。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/image-2.png?resize=656%2C636&ssl=1)
ホストゾーン作成後、レコードを作成します。
レコード作成画面に移動したらレコードを作成します。
レコード名にはS3のバケット名になるようにレコード名を設定しますが今回はそのままでも問題無いです。
「トラフィックのルーティング先」にある「エイリアス」をONにして表示されるリストボックスから「S3 ウェブサイトエンドポイントへのエイリアス」を選択します。
以降の設定はS3のバケットと合わせます。
レコード名とS3バケット名が一致している場合は最後にS3バケット名が選択出来るようになります。
「トラフィックのルーティング先」 でS3バケットを設定したら「レコードを作成」を押します。
ここでS3バケットを設定出来ない場合は上記画面とS3バケット名が一致していないため確認してください。
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/image-3.png?resize=1024%2C322&ssl=1)
レコード作成後、少し時間が経つとS3のインデックスページが表示されます。
(設定後に寝てしまったので一晩明けて確認しました)
![](https://i0.wp.com/osusublog.net/wp-content/uploads/2021/09/image-4.png?resize=621%2C269&ssl=1)