noteでもWordPressでもなく、Astro + S3 + CloudFrontでブログを書く理由

はじめに

「技術ブログを書きたい」と思い立ちました。ただ、いざ始めようとすると、どこにどうやって書くかで迷います。noteのようなサービスを使うのか、WordPressを立てるのか、それとも静的サイトジェネレータで自作するのか。

結論として、Astro + S3 + CloudFront という構成に決めました。この記事では、なぜその選択に至ったのかを書き残しておきます。

選択肢は3つあった

検討したのは次の3つです。

noteやZenn、Qiitaなどの既存プラットフォーム
WordPress（レンタルサーバ）
静的サイトジェネレータ（Astro）+ 自前ホスティング

先にざっくり比べると、こんな感じです。

観点	note・Zenn・Qiita	WordPress	Astro + AWS
始めやすさ	◎ すぐ書ける	○ 自動インストール	△ 自分で組む
学べること	△ 隠れる	△ プラグイン任せ	◎ 全部自分で
カスタマイズ性	△ プラットフォーム次第	○ 有料テーマでおしゃれに	◎ すごく自由
運用の手間	◎ なし	△ 更新・攻撃対策	○ サーバなし
月額	◎ 0円	○ 1,000円程度	◎ 350円程度
記事の場所	サービスの中	データベース	Markdown（Git）

◎ 向いている　○ ふつう　△ 苦手

順番に見ていきます。

noteと比べて

noteの強みは明確です。アカウントを作れば5分で書き始められるし、サービス自体にドメインパワーがあるので、書いた記事が翌日には読まれる可能性がある。維持費もゼロです。

読まれることが目的なら、正直これが最適解だと思います。

ただ、今回は書くこと自体と同じくらい、書く環境を作ることに興味がありました。noteだとHTMLの<head>に何が入っているかを自分で決められませんし、サーバも自分で用意しません。学びたかった部分が、まるごとサービス側に隠れてしまう。

なので今回は見送りました。とはいえ完全に捨てたわけではなく、読まれたい記事はZennに出しつつ、自分のブログは実験場にする、という併用を考えています。

WordPressと比べて

WordPressも真剣に検討しました。Web制作の案件では今も多数派ですし、触れて損はない技術です。

それでも選ばなかった理由は3つあります。

SEOがプラグイン任せになる

SEOの学習をしたかったのですが、WordPressだとYoastのようなプラグインを入れてフォームを埋めれば、裏側で勝手に良い感じのメタタグが出力されます。結果は出るけれど、何が起きているかは分からないままです。学習目的だと、この便利さが逆に邪魔になります。

運用の手間がずっと続く

WordPressは公開した瞬間から、本体とプラグインのアップデート、ログイン画面への総当たり攻撃、脆弱性の情報収集がついて回ります。個人ブログでもこれは変わりません。書くことに集中したいのに、守る対象が増えるのは避けたかった。

記事がデータベースの中にある

Astroなら記事はMarkdownファイルで、Gitで管理されます。手元に実体があるという安心感は思った以上に大きいです。

補足

WordPress自体は別途ローカルのDockerで練習するつもりです。使わないという判断ではなく、このブログには合わない、という判断でした。

レンタルサーバとAWS、どちらにするか

ここが一番迷ったところです。

レンタルサーバは本当によくできています。月1,000円弱で、独自ドメインが無料でついてきて、SSLはチェックボックスひとつ。IPアドレスを意識する必要もなければ、証明書の更新を気にすることもありません。仕事として誰かのサイトを作るなら、間違いなくこちらを選びます。

一方、AWSでS3とCloudFrontを使う場合、やることは一気に増えます。

S3バケットを作り、OACでCloudFrontからのみアクセスできるようにする
ACMで証明書を発行する
Route 53でドメインを取得し、AレコードをCloudFrontへのエイリアスで向ける

ACMはus-east-1で

CloudFrontで使う証明書は、us-east-1（バージニア北部）で発行しないとCloudFrontから選べません。

このブログのAWS構成（点線は、これから作る部分）

ボタンひとつでは終わりません。用語も概念も多く、非エンジニアの方にこの構成を勧めるかと言われたら、絶対にしません。素直にレンタルサーバを契約して、WordPressを自動インストールした方が幸せです。

ただ、自分で組めるのであれば、費用は一番安くなります。

構成	ざっくり月額
S3 + CloudFront + Route 53	350円程度（ドメイン代込み）
レンタルサーバ	1,000円程度（ドメイン込み）
EC2 + Elastic IP	1,500円〜（ドメイン代は別）

Astroは静的なHTMLを吐き出すだけなので、そもそもサーバが要りません。S3の保存料は数円、CloudFrontは毎月1TBまで無料枠があるので、個人ブログの転送量なら当面超えることはない。EC2を立てないので、Elastic IPの固定料金もかかりません。

AWS構成の内訳は、ざっくりこんな感じです。

項目	料金	月あたり（日本円）
S3 + CloudFront	ほぼ無料枠の中	100円程度
Route 53 ホストゾーン	月0.5ドル	約75円
ドメイン（.com）	年15ドル前後	約190円
合計		350円程度

補足

1ドル＝150円で計算しています。ドメイン代は、.comや.netなどの種類によって変わります。レンタルサーバと違ってドメインは無料でついてこないので、実際にかかるお金はS3やCloudFrontよりも、ドメインまわりのほうが大きくなります。

手間は一番多いけれど、費用は一番安い。 そして今回は、その手間こそが目的でした。

最終的な決め手

振り返ると、決め手は次の5つでした。

1. AWSの資格を取ったので、実際に運用してみたかった

AWSのCLF・SAA・CloudOpsを取得しました。ただ、資格は取ったものの、自分で何かを継続的に運用した経験はありません。試験に出た構成を、小さくてもいいから本番として動かしてみたかった。ブログはちょうどいい題材でした。

2. Gitを使う練習をしたかった

Gitを日常的に触る機会が、今はほとんどありません。記事をMarkdownで書いてcommitしてpushする、という流れを毎週繰り返せば、自然と手が慣れます。ブログを書くこと自体がGitの練習になる、というのは大きな利点でした。

3. GitHub Actionsによる自動化を経験したかった

pushしたら自動でビルドされ、S3に同期され、CloudFrontのキャッシュが飛ぶ。CI/CDという言葉は知っていても、自分で組んだことはありませんでした。一度は自分の手で通っておきたい経験です。

4. SEOを学びたかった

Astroはメタタグもsitemapも構造化データも、自分で書くことになります。面倒ですが、だからこそ何をやっているのかが分かる。Search Consoleに登録して、インデックスされるまでを観察するところから始めるつもりです。

5. ブログを自由にカスタマイズしたかった

note・Zenn・Qiitaは、見た目や機能がプラットフォームに依存するので、自分でカスタマイズすることはできません。WordPressなら、有料テーマを使えばオシャレにできます。

Astroなら、デザインも部品も自分で作れるので、すごく自由にできます。たとえばこの記事の手描き風の図も、自分で作った部品です。書く場所そのものを、自分の好きな形に育てていけるのも、選んだ理由の1つです。

目指す構成

目指す構成はシンプルです。

記事を書いてから公開されるまでの流れ（点線の枠は、これから自動化する部分）

サーバは存在しません。

これから

実はまだ、独自ドメインすら取っていません。今の時点ではCloudFrontのデフォルトドメインで表示されているだけの状態です。

これから着手するのは次の3つです。

Route 53でドメインを取得する — DNSを自分で触るのは初めてなので、ホストゾーンやAレコード、エイリアスといった概念から確認していきます
ACMで証明書を発行してHTTPS化する — us-east-1で取らないとCloudFrontから選べない、という制約があるらしいので、そこで一度ハマる気がしています
GitHub Actionsで自動デプロイを組む — アクセスキーを直接書くのではなく、OIDCでIAMロールを引き受ける形にしたい

どれも資格の勉強では名前を見た用語ばかりですが、手を動かすのは初めてです。ハマりどころも含めて、進めながら記録していくつもりです。

技術ブログを書きたいだけなら、正直noteで十分でした。それでもこの構成を選んだのは、ブログを書くという行為そのものを、学習のサイクルに組み込みたかったからです。記事を1本書くたびにGitを触り、デプロイが走り、検索結果を確認する。それが続けば、書く習慣と技術の習得が同時に進みます。

しばらく走らせてみて、また振り返り記事を書きます。