今までAWSのEC2にwordpressを構築してブログ運用していましたが、表示が遅いこととコストが少ないけどかかってしまっているため、性能とコストを改善するためにCloudfront+S3+Astroの構成に変えて引っ越しを行いました。

Astroとは

Astroは最近流行っている静的サイトジェネレータ（静的CMS）の１つです。wordpressのようにリクエストの都度処理を行いHTMLを返却するのではなく、事前にビルドして全てHTMLにしたサイトを静的サイトとして配置できます。

The Astro Blog | Astro

javascriptを利用しないため表示が高速、コンポーネント指向にもなっておりreactとかに慣れていれば開発もしやすいです。

サーバ構成

サーバ構成は簡単で、S3にビルドしたAstroコンテンツを配置しCloudFront経由でアクセスするだけです。EC2がいらないためランニングコストが大分下がります。

以下は構成と移行のイメージです。

1. 今までの構成 wordpressをEC2に構築してブログを運用していました
2. 移行イメージ 前面にCloudFrontを配置し、パスでEC2とS3に振り分け Astroに移行したWordpressコンテンツはリダイレクト設定を行う
3. Astroブログの構成 S3に配置するだけです。

ランニングコスト比較

証明書やDNS（Route53）の費用は変わらないため、EC2の維持費とS3＋CloudFrontの維持費で比較します。

EC2での運用での費用実績はこんな感じ。EC2＋EBSで年間70$（9100円）ぐらいかかっています。

これをCloudFront＋S3にするとこんな感じで、CloudFront+S3で年間1$以下です。 CloudFrontは個人のブログぐらいだったら無料枠に収まります。

表示速度（性能）比較

wordpressブログはCloudFrontを入れて大分改善はしましたが、それでもページを表示するのに１～２秒はかかります。

CloudFrontを入れる前だと５秒近くかかる時もありました。

Astroブログは200ms程度で表示されるため、表示速度は５～１０倍ぐらい改善しました。

Astroでブログを書く運用

AstroはVSCodeでコーディングして、ビルドしてS3に配置しますが、ブログを毎回VSCodeで書いていくのは面倒でしたので、Notionで書けるようにしました。

Astroはmdファイルを配置するとそれをビルド時にHTMLにしてくれるため、以下のような流れで運用しています。

1. Notionで書いたブログをマークダウンでエクスポートする
2. 出力したマークダウンをAstroに取り込んでビルドする
3. ビルドしたコンテンツをS3に配置する。

これで、普段はスマホでNotionアプリを使ってブログを書くことができます。