Severless Wordpress Blog #1

// 前ブログからの移行です。 Serverless Wordpress Blog on Google Cloud で構成している前のブログの構成についてです。CMS は WordPress で Frontend は Frontity(Nextjs) を使って、Google Cloud の Serverless サービス上にデプロイしました。

System Overview

Tech stack は以下の通りで特にカスタマイズしなければ半日あればリポジトリをつくるところから最初の記事を公開するまでできると思います。

• Frontity 1.15.0 – Google App Engine

初期構成について

Frontity は ’The React framework for WordPress’ というもので簡単に WordPress を REST API で Headless 的に使って React で Web UI を作れる、という Framework です。デフォルトでテーマが提供されていて、それを参考にして TypeScript (tsx) で作りました。まずは MVP ということで トップの記事一覧、ポスト、ページの表示を作ってリリースしました。レスポンシブ対応や検索機能や細かいバグ取りは順にやっていこうと思います。さしあたり、コードを載せたときに Syntax Highlight がうまくいってないので、それをなんとかしたいと思っています。

開発フローとツール

開発フローは GitHub Actions で GitHub の main ブランチに PR をマージしたときに App Engine にデプロイしています。WordPress は Official docker image を使ってそのまま Cloud Run で稼働しているので今の所特に自動化はしていません。Wordpress と MySQL の通信部分は Serverless VPC Access を使って MySQL の Private IP に接続しています。

何回かに分けてこのブログを構築した手順などをポストする予定です。基本的には自分のログとして記載していくつもりですが、もしかしたら同じことにハマってここにたどり着く方がいるかもしれないので、その時に役に立てばいいなと願っています。