静的サイト(性的ではない)をAWSで最速最安でホスティングする手順

きっかけ

サイト入れ替えのため、ステージング用ドメインを作ろうと、さくらのレンタルサーバーのサーバードメイン管理画面をいじっていたら、突然つながらなくなり、1時間ほどサーバーが落ち、その後、すべてのドメイン設定が消えていたこと。笑

Oops!!!!!!!
目を凝らしても、逆立ちしても、同サーバーで運営していたサイトが一切見れませんねぇwwww
笑えるwww

まさに気分は、
アンコントロールスイッチ!
ブラックハザード!
ヤベーイ!

なんとゴールデンウィークで鯖屋がサポート窓口連休中という始末。人間だから休んでくれるのは構わない。しかし水道屋が連休とったら、地域住民は大惨事!!

さて、どこのレンタルサーバーに乗り換えよう、
「そうだ、AWSへ移行!」

国産レンタルサーバーみたいにわかりやすい管理画面ではない一面はあれど、覚えちゃえば簡単に安定ホスティングできちゃうAWSってSUGEEEE!!

そのうちGCPも試してみたい。

条件

お名前.comのドメインを移管せずに使う。移管するのはそりゃいかん。
PHPなどのサーバーサイドスクリプトが無い、HTMLファイルやCSSファイルでできた完全に静的なサイト

手順

AWSのマニュアルを読んで、そのままやっただけ。
独自ドメインを使用して静的ウェブサイトをセットアップする

S3の設定

1つのサイトに対して、2つのバケットを作成する。名前は必ずURLのドメインと一致させる。
サイトが http://hogehoge.com なら、 hogehoge.com という名前のバケットと、 www.hogehoge.com という名前のバケットを作成する。

hogehoge.com

  • Static website hosting設定で「このバケットを使用してウェブサイトをホストする」を選択
  • このバケットにHTMLファイル等の一式を配置する(後述)
  • アクセス権限にパブリックの読み取り権限(オブジェクトのリスト化)を付与する。
  • パケットポリシーエディタで、下記を入力(ドメインはサイトごとに変更を忘れずに)
{
  "Version":"2012-10-17",
  "Statement":[{
    "Sid":"PublicReadGetObject",
        "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::hogehoge.com/*"
      ]
    }
  ]
}

www.hogehoge.com

  • Static website hosting設定で、「リクエストをリダイレクトする」を選択し、ドメインに「 hogehoge.com 」を入力し保存
  • アクセス権限にパブリックの読み取り権限(オブジェクトのリスト化)を付与する。

ファイルのアップロード

AWS CLIを使うのが手っ取り早いと思う。インストール方法はここでは書かない。

初めて使うときは、AWSでIAMユーザーを作成し、アクセスキーと秘密キーをaws configureコマンドで登録しておく。

該当のフォルダで同期コマンドを実行すると、一発でファイルが全てアップロードされる。

それも面倒なら一発実行リリース用のバッチファイル作っちゃうといいかも。

cd (別途作成したHTMLファイルのindexのあるフォルダへ)
aws s3 sync . s3://hogehoge.com/ --include "*" --acl public-read --cache-control "max-age=3600"

ここで、Static website hostingの設定にある、エンドポイントのURLに接続して、表示を確認しておく。

Route 53の設定

  1. ホスティングゾーンを作成
  2. レコードセットを作成、hogehoge.com Aレコード、Aliasを選択してターゲットにS3なんちゃらってのが1つだけあるのでそれを選択。
  3. レコードセットを作成 www.hogehoge.com 同上
  4. NSレコードのValueにかかれているネームサーバーを、お名前.comのネームサーバー設定にコピペし、更新するとサイト公開。

お名前の方でDNS設定が他にある場合、それをコピーするそうな。ちなみにうちはなんにもしてなかった。

その他役立つこと

DNSキャッシュクリア

ネームサーバを更新したあと、旧サイトが表示される場合は、キャッシュをクリアする。
Windowsならコマンドプロンプトで、

ipconfig /flushdns
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.