LoginSignup
2
0

More than 5 years have passed since last update.

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

Posted at

きっかけ

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