Posted at

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

More than 1 year has passed since last update.


きっかけ

サイト入れ替えのため、ステージング用ドメインを作ろうと、さくらのレンタルサーバーのサーバードメイン管理画面をいじっていたら、突然つながらなくなり、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