サブドメインのコンテンツを Amazon S3 で管理する方法

https://youtu.be/d2sfQ6PnbJs?t=15s

見つからない。

どんなに探しても、見つからない

カバンの中も、机の中も、Google 検索してみたけれど見つからないの。笑
(きっと近い年代の人は分かってくれる。。)

サブドメインを AWS S3 で管理したかったんだけど、XSERVER だとできないとずっと思い込んでいた。

でも、ある時ふとひらめいて、試してみたらあっさりできました。オラ、スゴイ。

きっと探すものではなかったんですかね。。

同じように探している方のために、手順を紹介したいと思います。

結論

まずは結論から。
サブドメイン用のコンテンツを AWS S3 で管理するには、

XSERVER 上で、Amazon S3 のエンドポイントを CNAME で設定 or
Amazon CloudFont を使って HTTPS 化する場合、CloudFront のエンドポイントを CNAME で設定

をするだけで良いんです！！

おーそーなのか。だったら、XSERVER を使う！という方は ↓↓↓下のリンク↓↓↓ から。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

ドメイン購入がまだの方はお名前.com から購入できます。

これまでの経緯

念のために、これまでの経緯をお話します。

なぜ、別サーバーで管理したいかがわかります。

ドメインを Amazon Route 53 で購入
- 大体のケースでお名前.com の方が多少安い
- ただ、ウェブサービスを AWS 上で管理するには後々の設定がめちゃめちゃ楽になるから
上記ドメインを使って Amazon S3 で管理しているコンテンツをウェブ公開
- 設定はすごい簡単
サブドメイン名 www がなくても、www あり URL にリダイレクトするように Amazon S3 で設定
- 設定はすごい簡単
- 「Amazon Route 53 を使って、サブドメイン(www)なしから、ありドメインへリダイレクト」で記事を書いてますので、興味あるかたは見てくださいね
HTTPS に対応するために、Amazon S3 で管理しているコンテンツを CloudFront 経由で公開
- やはり設定はすごい簡単
- ただ、エッジサーバーにコンテンツが反映されるのに少々時間がかかる (= 確認作業に時間がかかる)
Amazon S3 上のコンテンツのアップロード・確認作業が面倒になってきたので XSERVER 上の WordPress で管理することに
- 実は、単純に WordPress 使ってみたかったから。。ﾃﾍｯ。
- サーバーはネット界隈では XSERVER が有名でしたのそちらを選びました
ドメインのネームサーバーを変更
- Amazon Route 53 上ネームサーバーを変更
- これでドメインは XSERVER が管理することに
ただ、勉強がてら開発した脆弱性満載であろうウェブアプリは、サブドメイン & Aamazon S3 を使いたいと考える
- 単純に、セキュリティーのため
- まだまだウェブ開発の初心者なので、作成した脆弱なアプリから root 権限とられて、同一サーバーにある記事とかが盗られたり改ざんされたりするのが嫌だったので。。考えすぎですかね？笑

という流れから、何度かサブドメインの管理を AWS でできないか検索していたのですが、その度に見つからず諦めていました。

ただ、あるとき「CNAME」使えばよくね？とひらめいてやってみるとあっさりできちゃいました。。

ほんと自分のひらめきに感動です。。笑

やりたいこと

ということで、下記がやりたいことです。

サブドメインにアクセスしたときに、Amazon S3 のコンテンツを表示させる
HTTPS でアクセスできる

それでは、その方法を見ていきましょ。

STEP 1: Amazon S3 でコンテンツ管理

ここはシンプルですね。

まずは、Amazon S3 でバケットを作成します。

Create Bucket

ポイント: バケット名はサブドメインを含んだ URL です！ (例: subdomain.abcdefg.com という名のバケットを作成)
Name Bucket

サブドメインを含んだ URL にしないと、のちのちの設定で AWS S3 からアクセスエラーがでます。

その他の設定は特に何も設定変更せずに進めます。

Create Bucket 2

Create Bucket 3

Create Bucket 4

バケットの作成直後のトップページがこちらになります。

S3 Top Page

その後、任意に HTML ファイル (index.html) を作成し、バケットに入れます。

<h1>hello world!</h1>

サンプルなので、適当な HTML ファイルです。。。笑

アップロードの際も特に設定の変更は必要ありません。

upload1

upload2

upload3

upload4

アップロード後は、このようにリストで確認できます。

select index file

その後、Static web hosting の設定を行います。

プロパティタブを選択して、下記のように設定していきます。

static web hosting properties

static web hosting settings

ここで表示されているエンドポイントを選択した際に、指定したファイル (index.html) を開くという設定になります。

デフォルトでは、ファイル共有は OFF ですので、エンドポイントにアクセスしてもエラーがでます。

後の CloudFront の設定で、CloudFront からのファイルアクセスを許可するようにしますので、一先ずここままで設定完了です。

任意の設定

下記項目は、CloudFront を利用し HTTPS 化する場合は削除することになりますが、HTTP のままで良い場合に必要な設定になります。

S3 permission

こうすることで、Amazon S3 のエンドポイントから、指定したバケット内のファイルが見れる ようになります。

下が実際のコードです。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<バケットの名前 = サブドメイン含む URL>/*"
        }
    ]
}

Amazon S3 の金額は、ホストしている容量に対し、激安の従量課金 (2-3 円/GB) ですので、全然気にはならないですね。

料金詳細が知りたい場合は、「料金ページ」から確認できます。

STEP 2: サブドメインの CNAME 設定

それでは、Amazon S3 のエンドポイントとサブドメイン入り URL を紐づけ、サブドメイン入り URL から Amazon S3 のデータにアクセスできるようにします。

そこで XSERVER のサーバーパネルに移動し、DNS レコードの設定を行います。

注意: 「サブドメイン設定」ではなく、「DNSレコードの設定」です。

DNS Settings

そして、サブドメインの CNAME として、S3 のエンドポイントで設定 します。

ここで「DNSレコードの追加 (確定)」を押すことを忘れずに！！まだ登録できてませんよ！

DNS confirmation

登録後は、リストから CNAME で登録されていることが確認できます。

DNS の設定には、少々時間がかかりますので、気長に待ちましょ (丸 1 日かかる場合もあるようです)。

ちなみに、サブドメインをいくら増やしても、DNS をどんなに編集しても、追加のコストはかかりません (さすがに、無限というわけにはいかないと思いましたが、無制限のようです。。XSERVER へのリンク)。

STEP 3: Amazon CloudFront で HTTPS 化

サブドメインを使った URL から Amazon S3 にアクセスできるようになりましたが、Amazon S3 のウェブホスティングは HTTPS 化対応していません。

なので CloudFront を経由して HTTPS 化する必要があります。

Create CDN 1

次の設定は超重要です！！ので、まとめておきました！

Origin Domain Name: サブドメイン入りの URL で作成した Amazon S3 バケットを選択
Restrict Bucket Access: YES して、CloudFront 経由でないと Amazon S3 にアクセスできないようする
- 注意: Step 1 の「任意の設定」をしている場合は、記述した部分を削除しないと、本設定に関わらずアクセスできたままになります
Origin Access Identity: Create a New Identity で新規に作成
Grand Read Permission on Bucket: Yes, Update Bucket Policy を選択
Viewer Protocol Policy: Redirect HTTP to HTTPS を選択
Alternative Domain Names (CNAMEs): サブドメイン入りの URL を入力
Custom SSL Certificate: 無償なのでまだ作成していなければ “Request or Import a Certificate with ACM” をクリックして作成・選択
Default Root Object: “index.html” と記入

Create CDN 3

そしてここでエンドポイントが確認できるので、これを CNAME として Step 2 で行った作業を実施します。

Create CDN 5

気になる金額ですが、HTTP/S リクエストとその配信量によりますが、約 20 円/GB ほどなのでこちらも全然気になる金額ではないですね。

詳細、が知りたい場合は「Amazon CloudFront の料金表」から確認できます。

まとめ

悩んだわりには、結構簡単に設定ができました。

セキュアに且つ低価格 (月額、数十円) でアプリ配信ができそうなので、作成したアプリを本格運用するまではこの運用でいこうと思います。