サブドメイン付きURLで静的なWebサイトをAWS S3/Clounflont/Route53で作成する


2021/03/10

ウェブサイトのお引越しは管理者にとっても大変な作業です。

AWS S3/Clounflont/Route53を利用した静的ウェブサイトのホスティングは結構知られていて多くの記事も目にしますが、サブドメイン付きのURLでのパターンはネット検索しても技術記事の少なさそうな感じがしましたのでここで一度まとめておきます。


サブドメイン付きのウェブサイト?

複合的な業態をもつ企業などが自社のウェブサイトの運用に採用している場合がほとんどです。

例えばYahoo社が有名で

            
            www.yahoo.co.jp(メインのドメイン)
travel.yahoo.co.jp
finance.yahoo.co.jp
weather.yahoo.co.jp
auctions.yahoo.co.jp
shopping.yahoo.co.jp
....
        
というふうに細分化されております。

これは全てyahoo.co.jpというドメイン名の派生ブランチであるサブドメインを利用したもので、もし
yahoo.co.jpが競売に出されたらこのドメインの価値は計り知れないものになっていることでしょう。

いわゆるサブドメインで区分けされたウェブサイトはその企業や組織のブランド力がものを言いますので、良いイメージが付けばユーザーからアクセスして頂きやすいメリットもあります。

反面、デメリットはどこかブランドの一部で悪いイメージが付いてしまうと、全てのサブドメインの評価を下げてしまう諸刃の剣のようなこともあるようですので、万人にあまり良い印象を与えないテーマのウェブサイトを運用したい場合には別ドメインを利用する方が良いでしょう。


作業① ~ S3でHtmlファイル等を準備

ここからは実際の作業です。

まずは
AWS S3のダッシュボードから静的ウェブサイト用のS3バケットを作成していきます。

バケットの作成

まずは静的なウェブサイトホスティングでは、サブドメイン付きのURLと同じ名前をもつS3バケットを新規作成する必要があります。

今回は弊社の保有しているドメイン名に、サブドメインを付けてた以下のURLにウェブサイトを作成してみます。

            
            geek.tacoskingdom.com
        

合同会社タコスキングダム|蛸壺の技術ブログ

S3のリージョンはお好みで選択できますが、弊社は西日本ですのでなんとく最近出来た大阪リージョンを選んでみました。

バケット名の他はデフォルト値で
[バケットを作成]ボタンを押してS3バケットが完成です。

合同会社タコスキングダム|蛸壺の技術ブログ

S3からのウェブサイトホスティングを試すだけの以下のようなステータスコード404用の
index.htmlを作成し、このバケットにアップロードしておきます。

            
            <!doctype html>
<html lang="jp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>404 not found</h1>
    </body>
</html>
        

合同会社タコスキングダム|蛸壺の技術ブログ

ポリシーの付与

このバケットからindex.htmlを公開するのですが、先にアクセス用のポリシーを付与して読み取り専用にしてみます。

まずこのバケットを選んで、
[アクセス許可]のタブから、ブロックパブリックアクセス(バケット設定)でデフォルトで有効になっていたブロック項目を全てオフに変更します。

合同会社タコスキングダム|蛸壺の技術ブログ

次に
バケットポリシーに以下のようなアクションをs3:GetObjectだけ許可したポリシーを追加します。

※ご自身のバケット使う場合にはそのバケットの
ARN値geek.tacoskingdom.comの部分を読み替えたもので以下のjsonの内容を修正してお使いください。

            
            {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public Policy #1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
        }
    ]
}
        
これでひとまずはS3での作業はOKです。


作業② ~ CloudFrontの設定

次はCloudFrontダッシュボードから作業します。

なお、サブドメインも含めたhttps付きのURLでアクセスしたい場合には、以前説明した
AWS Certificate ManagerでSSL証明書の発行の記事で解説しています。

ここでは既に
AWS Certificate ManagerからSSL証明が発行済になってhttpsを使えるようにしている状態から話を始めさせていただきます。

まずは新しいCFディストリビューションを作成します。

合同会社タコスキングダム|蛸壺の技術ブログ

上の図では
Create Distributionの変更点を下線でマークしましたが、他の設定項目はひとまずデフォルト値で構いません。(心配せずとも間違った値は後で編集可能です)

ご自身のドメインで試される場合には
geek.tacoskingdom.comのところを置き換えたような設定で試してみてください。

地味な設定で、
Default Root Objectindex.htmlを指定しないとCloudFrontがどこを見に行くと良いのか分からずに機能しませんので良く確認しましょう。

設定できたら下部の
[Create Distribution]ボタンで作成します。

CloudFrontのダッシュボードトップに戻ると、先程新規作成したディストリビューションが
in Progressになっていたら作成中ですので、デプロイされるまで〜15分程待ちます。

合同会社タコスキングダム|蛸壺の技術ブログ

S3バケットポリシーの修正

上のCFの設定で、Grant Read Permissions on BucketYes, Update Bucket Policyを選択した場合、自動で以下のようにSid:2の設定がバケットポリシーに追加されています。

            
            {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public Policy #1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity *******"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
        }
    ]
}
        
S3のバケットポリシーのPrincipalターゲットを不特定多数('*')からCloudFrontのCloudFront Origin Access Identity <ID値>に絞っておきたいので、'*'の方のポリシーは削除して以下のように整理しておきます。

            
            {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public Policy #1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ***************"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::geek.tacoskingdom.com/*"
        }
    ]
}
        
なおこの時点で、新規作成したCloudFlontディストリビューションのURLにアクセスしてみると、

合同会社タコスキングダム|蛸壺の技術ブログ

ちゃんとS3バケット側をホスティングしてくれているようです。


作業③ ~ Route53の設定

では最後にRoute53のダッシュボードから作業をしましょう。

ホストゾーンから取得しているドメインを選択し、新規のレコードを作成します。

作成するレコードの設定として、

            
            レコード名:
    <サブドメイン名>.ドメイン
レコードタイプ:
    A
エイリアス:
    はい
エイリアス先:
    CloudFrontディストリビューション
    > どこかのリージョン
        > 先程設定したCFデストリビューションのURL
        

合同会社タコスキングダム|蛸壺の技術ブログ

ではいよいよ
https://geek.tacoskingdom.comへアクセスしてみますと、下の図の左側のように独立したウェブサイトとして立ち上がっています。

合同会社タコスキングダム|蛸壺の技術ブログ

なお、正しく
S3/CloudFront/Route53の設定が正しく出来ていても、何故かhttps://geek.tacoskingdom.com.s3.ap-northeast-3.amazonaws.com/index.htmlにアクセスして上手くhttps://geek.tacoskingdom.comにリダイレクトしてくれない場合があります。

これはS3バケットのエンドポイントとCloudFrontのエンドポイントが違うリージョンにあるために、別のリージョンを跨いで新規に作成したS3バケットを探せるようになるまで最大24時間かかるようです。

つまり、一日後にまたアクセスしてみるか、以下のリンク先の記事のようにCloudFrontの
Origin Domain Nameの項目に明示にリージョン情報を付け加えてあげると良いようです。

            
            Origin Domain Name(変更前):hoge.piyo.com.s3.amazonaws.com

👇(S3バケットのあるリージョンをつける)

Origin Domain Name(変更後):hoge.piyo.com.s3-ap-northeast-1.amazonaws.com
        

参照:S3+CloudFrontでS3のURLにリダイレクトされてしまう場合の対処法


まとめ

以上、サブドメイン名を使ったAWSによる静的ウェブサイトのホスティング方法を詳しく解説してみました。


参考サイト

Route 53 にサブドメインを設定する2種類の方法

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。