AWSを使ってみる-S3で静的ウェブページ配信

静的サイトを作りたいとき、即座にS3を使って配信できるようにいろいろと使っておく。

結論

• 自前のドメインでS3のバケットにアクセスできました。
• 料金
  • ドメイン代を除くとRoute53のhosted zone料が高く、月57円くらいかかる。
  • そんなにアクセスがないと仮定すると、年間のRoute53/S3の利用料は、60円x12か月で720円程度と見積もってよさそう。
    • 1USD 114円計算
  • ドメイン取得料も含めて、おおざっぱに１サイトあたり、年間2,000円かかると考えればよいかも？
    • もちろんRoute53にホステッドしたドメインをサブドメインで使いまわしたり、無料のドメインを利用するなどで、より安くすることは可能です。
• 手順
  • Route53のHosted Zone設定
    • 作るだけ
  • 取得ドメインのネームサーバ設定
    • Route53のNSを指定
  • S3でバケット作成 ＋バケットの設定
    • 作って設定する
    • バケット作成時に「新規のパブリックバケットポリシーをブロックする (推奨) 」のチェックを外しておく
    • バケットポリシーの設定以外は詰まらないと思う（といっても簡単です）
  • 静的サイトのアップロード
  • Route53でAレコードの設定
    • Aliasを利用
    • 独自ドメインが、S3のバケットのエンドポイントを引くようにAレコードを設定

実際にかかった料金

追記：EC2を一瞬立てた料金がかかっているが、概ね予想通りでひと月70円程度だった。

利用するAWSサービス

• S3
• Route53

前提知識

• AWSのアカウントを持っている
• 独自ドメインを取得しており、Route53などの外部のDNSでホスティングできる
  • = ドメインを取得したサイトで、ネームサーバの指定ができる
• DNSについて基本的なことを知っている
  • Aレコード：hoge.com は123.123.123.123というIPだよ！という対応表

料金

• S3
  • リージョンごとに異なるが、アジアパシフィック(東京)の場合以下(2018/11/26)
  • ストレージ利用料(標準ストレージ)
    • 最初の 50 TB/月 0.025USD/GB
    • 次の 450 TB/月 0.024USD/GB
    • 500 TB /月を超える分 0.023USD/GB
  • リクエスト料金(標準ストレージ)
    • S3 Select によって返されたデータ 0.01USD/GB
    • S3 Select によってスキャンされたデータ 0.00225USD/GB
    • PUT、COPY、POST の各リクエスト リクエスト 1,000 件あたり 0.01USD
    • GET、SELECT および他のすべてのリクエスト リクエスト 1,000 件あたり 0.001USD
•  Route53
  • Hosted Zones
    • ホストゾーンごとに 0.50 USD/月 – 最初の 25 個のホストゾーン
    • ホストゾーンごとに 0.10 USD/月 – それ以上のホストゾーン
  • query
    • 100 万件のクエリごとに 0.400 USD – 最初の 10 億件のクエリ/月
    • 100 万件のクエリごとに 0.200 USD – 10 億件を超えた分のクエリ/月
• ドメイン
  • ドメインを取得したサイトでかかる
  • 「.com」などなら1000円/年くらい

具体的な手順

自分が後から見て実施できる粒度で記述しているため、だいぶざっくりしています。細かい部分はgoogle先生やQiitaなどで検索してください。

1. 静的サイトができている（ローカル）
   • index.html,js/*,css/*などがまとまっている
2. ドメイン取得
   • お名前.com
     • 用途：ちゃんとしたサイトを作るときに利用
     • 有料でドメイン取得する
     • https://www.onamae.com/
   • Freenom
     • 用途：開発やテストで利用
     • 5種類のドメイン(.tk/.ml/.ga/.cf/.gq)が無料
     • https://my.freenom.com
3. Route53のHosted Zone設定
   • 「Create Hosted Zone」でドメインをホストする
   • 入力するのは、ほぼドメイン名だけでOK
     • ドメイン名：取得したドメインを入力
     • コメント：必要なら入力日本語も行ける！
     • タイプ：Public Hosted Zoneのまま
   • 作成すると、ネームサーバ(NS)のサーバ一覧が見れる
4. 取得ドメインのネームサーバ設定
   • Route53の作成したHosted Zoneに表示されているネームサーバ(NS)を、ドメインを取得したサイトからネームサーバとして登録する
5. S3でバケット作成 ＋バケットの設定
   1. 「Create bucket」
      • 公開バケットにして独自ドメインでアクセスしたい場合、バケット名は独自ドメイン名（かそのサブドメイン名）にする必要があります
        • バケット名=FQDN
      • 「新規のパブリックバケットポリシーをブロックする (推奨) 」のチェックを外しておく。外さないと後からBucket policyが変更できません
   2. 「Staticwebsite hosting」
      • 静的ウェブホスティングを有効にする
      • バケットのエンドポイントでアクセスが来た場合のindexドキュメント（ex. index.html）とerrorドキュメント(error.html)のパス設定
   3. 「Bucket policy」
      • バケットポリシーを追加する
      • ウェブサイトなので「匿名ユーザーへの読み取り専用アクセス許可」のポリシーを付与します
      • 詳細：https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2
6. 静的サイトのアップロード
   • 作成したバケットにアップロード
   • 「Staticwebsite hosting」にあるエンドポイント（http://<バケット名>.なんか）でアクセスできる
7. Route53でAレコードの設定
   • 「Create Record Set」でAレコードを設定する
   • バケット名=FQDN（独自ドメイン/サブドメイン）でアクセスがあったときに、先ほど叩けたエンドポイント（「Staticwebsite hosting」にあるエンドポイント）のIPに飛ばすようにAレコードを設定すればよい。
   • 設定内容
     • Name:：バケット名(FQDN)を記入
     • Type：Aレコードを選択
     • Aliasをyes
       • Alias Targetのプルダウンに先ほど公開した「Staticwebsite hosting」にあるエンドポイントがあるはずなので、それを選択
       • S3のバケット名をFQDNにしていないと、ここに表示されないらしい
8. 独自ドメインでアクセス！