WordpressからGatsbyに切り替えた話

みなさんこんにちは。i氏と申します。このたびGatsbyでBlogを始めることにしました。以前Wordpressで行き詰まって以来、8年ぶりですかね。

以前筆者はWordpressを使ったブログを運用していましたが、挫折してしまいました。もともと遅筆で記事の更新に時間がかかる¹、というのも大きな要因だったのですが、もう1つの要因として、やりたいことができず、ストレスが溜まってしまったというのがありました。

本記事ではWordpressの何が問題で、それをGatsbyがどう解消するのか、ということを紹介したいと思います。もし、同じ悩みを抱えている方の参考になれば幸いです。

注：この記事ではWordpressからGatsbyへの移行には触れていません。

TL;DR

• Wordpressには脆弱性対応やデータ管理などの運用に課題があった
• Jamstackのアイディアは安価で安全でかつ便利なホスティング方法としてとても有効
• 具体的なツールとしてMarkdown＋Gatsby＋Cloudflare Pagesを採用した

Wordpressの何が不満だったか

脆弱性対策が大変

1つ目の課題は脆弱性対策です。真面目にWordpressを運用する場合、脆弱性対策は欠かせません。対応方法はいくつか考えられ、筆者はWEBホスティングサービスと、Wordpress.comのマネージドサービスを利用しましたが、いずれもうまくいきませんでした。

WEBホスティングサービスではLinux＋Apatch＋PHP＋MySQLのパッチ適用をサービス事業者側で実施されると期待していましたが、実際に利用してみると、パッチ適用はされませんでした ² 。

Wordpress.comのマネージドサービスではパッチ適用の問題はありませんでしたが、データ容量増量やプラグイン利用が可能になる料金と自分の予算が見合いませんでした。

DBでのデータ管理が面倒

2つ目はデータ管理です。Wordpressを使っていると記事データがDBの中に格納されてしまい、簡単に取り出しができません。参照も更新もWordpress経由でないとできないなど、（ブログの記事とはいえ）CMSというシステムに自分のデータを入れる、ということがだんだん嫌になってしまいました。

普通のファイルみたいに、フォルダにデータ入れておいて、適切なアプリでサクッと確認・更新する、というのができないのですし、ローカルに環境を用意するのも大変です。

結果として、記事を更新するモチベーションよりも、もやもや感が勝ってしまいました・・・。

ブログシステムに求めていたもの

WordpressのようなブログシステムやCMSには、以下の大きく4つの機能が具備されています。

• 記事の中身などのデータ保存と管理
• データ更新のためのインターフェイス
• タグの付与や記事へのリンクを動的な作成
• 生成したページのデザインテンプレート

でも実際に筆者が便利だと思ったのは、タグを付与したり、前後の記事にリンクを動的に張ったりする動的なページ生成だけで、他は特に不要だということが分かりました。

今回筆者がブログシステムに求めるのはこういう要望にまとまりました。

• タグの付与や記事へのリンクを動的に作成する機能は欲しい
• 脆弱性対応などのパッチあてが必要な環境は使いたくない
• 記事データはオープンなファイルで管理したい
• 自分の予算やニーズに合ったサービスを組み合わせて使いたい

脆弱性対応が不要なのに、動的にWebページを作成することなんて実現できるのでしょうか？それができるのです！これを実現するのが、静的サイトジェネレーター＋静的WEBホスティングサービスです！

Jamstackというアーキテクチャ

Jamstackという言葉はJavaScript/APIs/Markupから取られているそうですが、全く中身が伝わってきません（笑）。

アーキテクチャー的には下記の3つから成り立っています。

• データ管理
• 静的サイトジェネレーター
• 静的WEBホスティングサービス

1つずつ順番に見ていきましょう。

データ管理

Jamstackではデータ管理に2つの方法があります。1つ目はHeadless CMSと呼ばれるデータ管理システムです。イメージとしてはWordpressからページ生成の機能やテンプレートなどいわばViewにあたる機能をとったもので、データ管理と更新のインターフェイスに特化しています。JamstackのAPIに当たる部分です。ただこの方法ではDBによるデータ管理が必要だったり、脆弱性対策が難しくなることから筆者は採用していません。

もう1つの方法がMarkdown形式のファイルです。Markdownファイルなので、PCやiPadなどの好きなデバイスとアプリで編集ができますし、バックアップも写真ファイルなどと一緒にすることができます。

静的サイトジェネレーター

Jamstackで鍵となるのが、静的サイトジェネレーター、通称SSG（Static Site Generatorの略）です。静的サイトジェネレーターは、データ管理しているもの（Headless CMSやMarkdownファイル）からデータを読み込んで、Wordpressのように、最新記事の一覧や、記事のページを動的に生成したり、記事間のリンクなどを動的張ってくれるものです。筆者はGatsbyを使っています。

この静的サイトジェネレーター自体を動かすのはサーバでもローカルでもよく、公開する必要がありません。つまり攻撃を受ける心配がありません。出来上がったHTML（Markupファイル）やJavaScriptファイルだけ公開すればOKです。

静的サイトジェネレーターはフロントエンド技術から派生して生まれたので、JavaScriptで実装されているものが多いです。JamstackのJavaScriptはここで登場します。このため生成するHTMLなどの変更には（WordpressがPHPの知識が必要だったように）JavaScriptの知識が必要です。

静的WEBホスティングサービス

そして出来上がった（静的な）HTMLなどのファイルを公開するのが静的WEBホスティングサービスです。通常マネージドサービスですし、スクリプトを動かすこともないので、脆弱性管理とかしなくてよいです！有名どころにはAmazon S3とかFirebaseとかありますが、筆者はCloudflare Pagesを使っています。

静的WEBホスティングサービスの中には、静的サイトジェネレーターの実行環境を提供してくれるものもあり、GitHubなどと連携して、コードを更新すると、HTMLの生成ビルドを走らせてくれたりします ³ 。

留意点

技術には適用範囲があるのでそこを確認しておきましょう。ログインして一人ひとりにカスタマイズしたページを見せる、といった内容は不向きです（まさに動的なページ生成が必要なケース）。また、データが多くなるとSSGでのHTML生成に時間がかかるといわれています ⁴ 。

まとめ

最後にブログシステムの機能や要望がどのように満たされているか確認してみましょう。

• 記事の中身などのデータ保存と管理・・・Markdownファイルでオープンな方法で実現可能
• データ更新のためのインターフェイス・・・Markdownファイルを編集できるアプリ
• タグの付与や記事へのリンクを動的な作成・・・静的サイトジェネレーターで生成
• 生成したページのデザインテンプレート・・・静的サイトジェネレーターで利用者がコーディングして実装
• 脆弱性対応などのパッチあてが必要な環境は使いたくない・・・静的サイトジェネレーターも静的WEBホスティングサービスも脆弱性対応は基本不要

Wordpressで悩んでいた脆弱性対応やデータ管理などの解決策と、ブログシステムとしての機能が見事に実現されています。

一般的にJamstackはウェブページの表示速度対策（≒CDNの活用）という文脈で利用されることが多いのですが、スピードが求められないようなサイトでも、安価で安全でかつ便利なホスティング方法としても十分メリットがあると思います。

参考文献

• "Jamstackって何なの？何がいいの？"、Qiita
• "Jamstackとは？"、株式会社ピクセルグリッド