このブログはWordPressで10年以上運用していますが、ここ数年の保守をしていると限界を感じ始めていました。
まとまった時間や自分のスキル面の向上もありフロントエンド側をWordPressのThemeからAstroのSSGに変更しましたので、そのプロセスや思考を記事にします。
WordPressでの開発を離れたゆえの課題
以前はWebサイトの開発をしていたのですが最近はアプリケーションの開発が多くReactなどのJSフレームワークを使った開発に慣れておりPHPやSCSSを使うような開発はしないようになりました。
割りとこの辺りの変化がこのブログの保守運用の足を引っ張っているような感覚があり悩んでいました。
フロントエンド中心の開発に慣れてしまいPHPを書くハードルが高い
ReactやVue.jsのようなJavaScriptフレームワークに慣れていると、WordPressで必要となるPHPの書き方に頭を切り替えるのが大変です。
このギャップを埋める一つの方法は、Headless WordPressのアプローチを採用することで今回はその選択をしました。
これにより、WordPressはコンテンツ管理のバックエンドとして機能し、フロントエンドはReactなどの好みの技術を使って構築できます。
SCSSを使ったCSSのメンテナンスも時間がかかる
Reactを用いた開発ではCSS-in-JSのようなスタイリング手法が一般的ですが、WordPressテーマでは従来のCSSやSCSSが主流のままです。
CSS変数などで管理したい一方でthema側で利用されてるものもグローバルに存在するので把握が難しいと考えています。
フロントエンドビルドツールも複雑化しており、GulpなどでBuildできるようにし続けるのも課題に感じていました。
WordPressのアップデートに合わせてThemeを更新するのが大変
WordPressやプラグインのアップデートはセキュリティや機能性の向上に不可欠です。
テーマの互換性の問題を引き起こす可能性があり放置するのは避けたいです。
この課題に対応するためには、子テーマを使用してカスタマイズを行い、親テーマのアップデートによる影響を最小限に抑えることが推奨されますが良いのですが、親テーマ自身が更新されるのでアップデートのコストはそれなりについてきます。
WordPressのローカル環境を作るのが大変
最近のフロントエンド開発に慣れていると、ローカルでのWordPress開発環境の設定は、普段の開発に比べ面倒に感じています。
DockerやLocal by Flywheel、MAMP、XAMPPのようなツールを使用することで、ローカル環境のセットアップをを行うことができますが慣れない手順が入るのをストレスに感じています。
PHP主体の保守からAstroにする移行のメリット
最近のサイトのパフォーマンス、セキュリティ、そして開発の効率性が重視されます。
WordPressをバックエンドのコンテンツ管理システムとして、Astroをフロントエンドの技術として使用するHeadless CMSアプローチは、以下のような要件を満たすことができます。
- パフォーマンスの向上: Astroはビルド時に静的ファイルを生成するため、ページのロード時間を大幅に短縮します。
- セキュリティの強化: バックエンドとフロントエンドの分離することで、セキュリティリスクを低減します。
- 開発の柔軟性: 好みのフロントエンド技術を自由に選択し、カスタマイズでき長期的な運用がしやすくなります。
移行プロセス
フロントエンドをWordPressのSSRからSSGに変更するにあたり、下記の事をしました。
- astro-wordpress-starterを使い、自分のブログでBuildできるかを確認する
- Buildコマンドが通らなかったので調整と最新のAstroに合わせてアップデートをする
- WPGraphQLを使用して、動的なコンテンツを取得しプロジェクトで利用します。
- 日本語のURLはBuildで失敗するので一部URLの変更します。
- 起動ができるようになったらAstroのコンポーネントを利用して、サイトのデザインと記事内のStyleを調整します。
- プラグインで作られていたお問い合わせフォームをSSGformを使ったものに作り直す
- 既存のWordPressをAPI用のWordPressのURLに変更して移行する
- ブログのURLをVercelにCNAMEを向けて変更する
- WebHookを使い記事が更新されたら新しいものをBuildするようにする。
移行に伴う懸念点
WordPressはOSSによるアップデートが頻繁で様々なメリットがありますが、SSGにすることでそのメリットが失われる懸念もあります。
- 技術的な複雑さ: Headless CMSアプローチは、従来のWordPress開発に比べて情報量も少なく専門性も必要になるため技術的な複雑さがあり諦める事も必要になってくると思います。
- プラグインとの互換性: WordPressはプラグインで機能追加が簡単ですが、一部のWordPressプラグインがAstroとの組み合わせで期待通りに動作しない可能性があります。
- コンテンツ管理の複雑化: コンテンツのプレビューや編集がデフォルトでできるわけではないので独自で実装する必要があります。
- デプロイメントとホスティング: 静的サイトのホスティングと、WordPressホスティングとは異なるアプローチが必要になりフロントエンドとバックエンドで管理対象が増えます。
最後に
脱WordPressは長年やりたいと思っていたのですが、実現できてよかったです。
ハードルがあると思っていたのですが、ChatGPTを駆使することで想定以上に簡単にできたのでホッとしています。
Astroをしっかり使い込んだのは今回が初めてでしたが、かなり気に入っていってしまったので今後はAstroもしっかり触っていこうと考えています。