LoginSignup
2
2

More than 5 years have passed since last update.

Route 53 で独自ドメインをホストして、Amazon s3で静的ウェブサイトを公開

Posted at

今回の目的

  • AWSのアカウントを使ってウェブサイト公開をしたい
  • Amazon s3で静的ウェブサイトを公開したい
  • 独自ドメインをRoute 53で取得して公開したい

AWSのメリット

Route 53もs3もAWSのサービスです。

  • AWSではRoute 53のドメインのみサブドメインなしの利用が可能
  • s3のアカウントを作成すると、最初の1年間は無料利用枠が自動的に適応される(ただしRoute 53での独自ドメイン取得は適用外)
  • ドメインにこだわりがなければ、s3の料金だけで(初年度無料利用枠あり)静的ウェブサイト公開可能
  • ウェブサイト公開、独自ドメイン反映が早い

など

料金:https://aws.amazon.com/jp/s3/pricing/

手順1:Route 53で独自ドメイン購入(取得)

まずは独自ドメインを取得(Route 53では購入する必要があります)してから、公開作業に入ります。

※ 今回はあくまでも全てAWSのサービスのみで独自ドメインも取得、静的ウェブサイト公開を目的としていますが、Route 53以外で独自ドメインを取得する場合でも、独自ドメイン取得は先に済ませる必要があります。理由はウェブサイト公開手順(s3使用時)に書きます。

  • AWSのアカウントにログイン
  • Console Home 画面で以下画像のようにRoute 53で検索
    Screen Shot 2017-07-24 at 3.12.54.png

  • 独自ドメインを取得する。以下画像のRegister Domainで希望するドメイン名が使用可能かチェック。.comはAWSでは$12するが、差し障りがなければ.de.ukは他のドメインよりは安く、$9。(2017年7月現在)
    Screen Shot 2017-07-24 at 3.16.34.png

  • 希望するドメイン名の右横のAdd to cartをクリック。右横のShopping Cartに選んだドメイン名と価格が表示されるので、確認したらContinueをクリック
    Screen Shot 2017-07-24 at 3.28.22.png

  • ドメイン管理者情報入力画面になるので、記入。記入が済んだらContinueをクリック
    Screen Shot 2017-07-24 at 3.35.54.png

  • Terms and Conditionsでチェックを入れ、Complete Purchaseをクリック

  • Route 53のConsole画面に戻るとAlertsでドメインが申請中であることが確認できる。Statusが画像のようにDomain registration successfulとなっていれば反映されたということになる
    Screen Shot 2017-07-24 at 3.42.19.png

反映されたらAWSからメールが届きます。私の場合は.deでドメイン取得を申請しましたが、1時間未満で反映されました。

手順2:s3で静的ウェブサイトを公開する設定をする

  • Home Console画面からs3と検索
  • Create Bucketをクリック
    Screen Shot 2017-07-24 at 3.57.35.png

  • Bucket Nameは、必ずRoute 53で取得した独自ドメインにする。理由は、Bucket名がドメイン名と異なる場合、ウェブサイト公開に反映されないため。Regionは日本人向けならTokyo
    kaki-kukeko.comなら.comまで記入
    Screen Shot 2017-07-24 at 3.59.10.png

  • Reviewの項目までNextをクリックしてcreate bucketをクリック

  • 新しく追加されたBucketをクリックして開く

  • Propertiesタブを開いてStatic website hostingを選択
    Screen Shot 2017-07-25 at 2.18.21.png

  • Use this bucket to host a websiteにチェックを入れ、以下の図のハイライトの箇所にindex.htmlと記入してsave
    Screen Shot 2017-07-25 at 2.21.38.png

  • PermissionsタブからBucket policyを開き、以下画像でハイライトしてある箇所にJSONをコピペ(画像下のJSONをコピペしてください)
    Screen Shot 2017-07-25 at 2.25.10.png

bucketPolicyJSON
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ここにドメイン名と同じBucket名*"
        }
    ]
}
  • Overviewタブに戻り、UPloadをクリックしてindex.htmlのファイルをアップロード
  • Propertiesタブ→Static website hostingより上部にあるEndpointのURLでブラウザ表示確認

手順3:AレコードAliasを登録して、独自ドメインをアクティベートする

文字通り、先ほどRoute 53で購入した独自ドメインからアクセスできるようにします。

  • Route 53のコンソールからHosted zonesをクリック
  • 該当のドメイン名をクリックして、Create Record Setをクリック
    Screen Shot 2017-07-25 at 2.47.30.png

  • Nameにサブドメイン名を設定したい場合はwwwなど記入(独自ドメインでアクセスしたときに、ドメイン名と同じBucket名が見当たりませんとブラウザで表示される場合はここを空白にして、サブドメインなしにすると表示される)

  • AliasYesEnter Target Nameをクリックして画像でハイライトになっているように、s3で公開するBucketのエンドポイントを選択
    Screen Shot 2017-07-25 at 2.50.30.png

  • Createをクリックして、独自ドメインでブラウザに反映されているか確認できれば成功

参考記事: https://aws.amazon.com/jp/getting-started/tutorials/get-a-domain/

備考
Dot TKでは独自ドメインが、ドメインによっては無料で取得できます。ただ、アクセス数が一定数を下回る場合は削除されたり、.comなどメジャーなドメインは有料だったりします。とりあえず静的ウェブサイトをホストしたい場合はs3だけで終わらせると、最初の一年は無料でホストできます。

参考記事: http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146#a%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89alias%E3%81%AE%E7%99%BB%E9%8C%B2

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2