Help us understand the problem. What is going on with this article?

静的サイトを AWS で (S3+CloudFront+Route53+CertificateManager)

More than 1 year has passed since last update.

使うサービスなど

  • AWS: S3 (ファイルストレージ)
  • AWS: CloudFront (キャッシュサーバ)
  • AWS: Route53 (サブドメインのネームサーバ)
  • AWS: CertificateManager (SSL化)
  • お名前.com (ドメインの取得)

概略図

サーバレス概略図

なぜこサービス群?

S3

そんなに更新頻度が高くないサイトなら、 WordPress をはじめとした CMS などは必要ないのでは?と思った。
なにより自分でサーバを管理するのがだるくなった。
メンテナンスフリー最高!

CloudFront

S3 を独自ドメインで運用し、かつ SSL 化したかった。
S3 で発行される URL も HTTPS でアクセスできる(一部例外あり)が、独自ドメインには対応していない。

Route53

後述する CertificateManager を用いた SSL 化する際に手続きがお手軽になるため。
これを使わなくても S3 の独自ドメインと SSL 化は可能。

CertificateManager

Route53 を使っていると無料で使えるし、自動更新が有効になるらしいので。
メンテナンスフリー最高!!

お名前.com

もともとここでドメインを取得していた。
全部 Route53 に移管しても良かったのだが、メインのドメインは別で使うかもしれないので、とりあえずサブドメインだけ名前解決を Route53 に移譲した。

課題

この構成で静的サイトを運用するにあたって解決できていない点がある。

  1. S3 には直接アクセスさせたくない
  2. ディレクトリにアクセスした時に index.html を自動的に割り当てたい
  3. www や index.html の正規化 (SEO 対策)

模索

実は 1 と 2 は、それぞれ単独でなら解決できる。
1 は S3 でウェブサイトのホスティング設定をやめ、 CloudFront でバケットを指定するだけ。
2 は S3 でウェブサイトのホスティング設定をして、 CloudFront でバケットではなく S3 の URL を指定すれば良い。
だが両方の要件を満たす方法が今のところ探し出せていない。
要研究。

SEO

また、 SEO を考えて、 index.html の正規化などもうまくできない。
S3 は Apache ではないので .htaccess などを置いても当然むだである。

SEO だけを考えるなら、カノニカルを使えば良いのだが、下記の通りジェネレータを使っているため、一筋縄にはいかない。
ペライチのサイトならサクッとカノニカルをキメよう。

費用

まだ構築したばかりなので、数ヶ月後にまた記事として書く予定。
現時点(4月2日構築、4月5日記述)での請求ダッシュボードによる予測だと、月額150円くらいになりそう。

内訳

  • Route53 による固定料金
  • Route53 による従量課金
  • CloudFront による従量課金
  • S3 による従量課金

現時点での費用感

期間も短く手探りで色々試しているため、正確な運用費は出せないが、現在のところ以下の感じ。
Route53 による固定料金 >> S3 による従量課金 > CloudFront による従量課金 > Route53 による従量課金

S3 はアップロード・ダウンロード共に費用がかかるが、ブログという性質上アップロードの頻度はそんなに高くない。
そして CloudFront を使っているので、ダウンロードもそんなにかかるとは思えない。
最終的には 「CloudFront による従量課金」 と 「Route53 による固定料金」が費用のほぼ全てを締めることになるのではないかと予測している。
Route53 の従量課金も名前解決の方法を考えるとそんなにかからないのではないかと楽観中。
(これで大量アクセスがあったりしたら死ぬかも?)

静的サイト

実際のサイト

こちら -> 黒柴の柚子

静的サイトジェネレータ

静的サイトを構築するにあたって、 Hexo というブログジェネレータを利用した。
node とマークダウン記法の知識がある人なら、お手軽に静的なブログを構築できる。
テーマやプラグインが色々あるので、気に入ったものを探すといいかも。
Hexo については別記事にして書くかも。

shimon_haga
フルスタックWebエンジニア。 インフラからフロントエンドまで。 Webシステムやアプリで使う知識と経験は一通り。 PHP/JavaScriptなどが主戦場。 最近は React(Native), Vue, Laravel あたりをふらふらと。
https://shimon.biz
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした