microCMS + Astroを通してヘッドレス化する際の覚書

もくじ

バイブコーディングが可能になったので、手で書けるものを作ってもらうのも何か面白くないし、今っぽい開発も知っておいたほうがいいような気がして・・。

実装トレンドは今後こんな感じになるのかな(APIはwordpressでなくても良いかもしれない。microCMSとかDrupalとか・・)と思い、Gitのコマンド分からないとか、ClaodeFlareのUIが英語だからとか、そもそもnpmに拒絶反応のある自分のようなvanillaくらいしか書けないような素人でもCLIの力を借りてモダンな環境が作れないかトライしてみた備忘録です。

なお、CLIはClaudeやGPTではなく敢えてのAntiGravityです。多分なんでも良いと思います。

やってみたいこと

  • 全部タダで試したいのでmicroCMSを使ってヘッドレス化したい
  • Githubとローカルの環境を同期したい
  • GithubとCloudeFlareも連携したい。ドメインはとりあえずどうでもいい
  • ひとまずシンプルなもので慣れてみたい

全部タダで試したいのでmicroCMSを使ってヘッドレス化したい

AIに上記のようなことをつらつら聞きつつAstroに興味がある旨を述べたら、案外あっけなく「ん?今の環境ですぐできるよ?Astroのインストールする?」みたいな感じで思ったより簡単に言ってきます。こういう時のAIのシゴデキっぷりが一番個人的には恐ろしく感じます。
Astroがローカルにインストールされ、あっけなくポンと作業環境ができました。起動やビルドのコマンドも当然ですが教えてくれます。

次にやることは試しに全然使ってないホスティング環境のwordpressをAPI化するのですが、多分これはwpのREST APIを使うのだなと想像がつきます。というか個人的にwordpressが煩雑で大嫌い(phpとか書きたくない)なので、かなり前からDBだけ使って何かできないか・・と妄想していたので、REST APIだけは組み込んでいたのでした。

で、Geminiの薦めるままに、ローカルでビルドする時にwpから静的情報として記事を取ってきてくれるようになりました。とてもあっけないです。根幹の実装は当然AIがしてくれますので、Astro自体の人間側の理解が全く進みません。仕方ないのでとりあえず.astroファイルの中身だけは目を通しておきます(目を通さなくても動いてしまいます)。あとでWPからmicroCMSに移行してみます。

Githubとローカルの環境を同期したい

これは別に人間がやっても問題ないのですが、AIにGithubアカウントを把握してもらえたらどこまでやってくれるんだろう・・と試してみたら何でもやってくれました。ローカルの環境をそのまま新規のリポジトリとして同期させてくれました。今までsourcetreeとかbitBucketと睨めっこだったんですが、人間はこうしてAIに牙を抜かれ飼い慣らされていくのか・・と情けなく思いつつ甘えてしまいました。

GithubとCloudeFlareも連携したい。ドメインはとりあえずどうでもいい

ホスティング環境はCloudeFlareとかVercelがナウいらしいよと聞いたことがあるので、とにかく素人レベルではお金がかからないらしいCloudeFlare worksを試そうと思いました。あまりVercelと細かな比較はしていませんが、Vercelの公式がオシャレすぎて気後れしたのもあります。CloudeFlareもあっけなくアカウントができました。

CloudeFlareの初期設定でプロジェクトを立て、同期するリポジトリや、デプロイについての設定を立てるのですが、個人的にはここが一番苦労しました。ものすごくハマったわけではないのですが、何通りかの環境変数が必要で、言われるまま設定すれば良いわけですが、なぜそういった設定が必要なのか?などをAIに問いまくっている間にCLI側のログを見逃してしまい、設定し損ねた項目があるままデプロイをしてしまいエラーを吐きました(ワンナウト)。

そこを改善し、cloudflareでデプロイして公開するヘッドレスCMSの基礎は割とあっけなくできてしまいました。8割くらいはAIに質問する時間でしたが、正味1-2時間でできてしまいました。恐ろしい。
cloudflare見慣れたほうが絶対いいですしねと割り切ります。

https://astro-cms.mongouika.workers.dev/

こちらがモノです。このブログなのですが。次回は純粋にAstro側の仕様や、フロント側の見た目とかそういうことを考えてみたいと思います。