Nuxt.js＆Firebase で WordPressブログをフルリニューアルしたまとめ
2020年2月に、WordPressブログ（このサイト）をFirebaseでフルリニューアルしました。 現在このサイトはFirestoreのデータを取得してFirebase Hostingから配信されています。 今年2月よりFirebaseでの運用を開始し、3ヶ月ほどかけて少しずつ調整を加えつつ、ようやく費用感などの実態を掴むことができたので、記事としてまとめることにしました。 ※FirebaseやNuxt.jsのことをある程度わかっている方に向けて書いていますのでご了承ください。 サイト更新からデプロイ、表示までの全体像はこのようになっています。 （※細かい処理の流れ・役割は後で詳しく説明します） 
見ての通りFirebaseフル活用です。ここまで全部使っているサイトは珍しいのではと思います。 よく、「WP REST API + Nuxt.jsでリニューアルしました」とか、「WordPressを捨ててContentful + Netlifyに移行しました」という記事はそれなりに目にしますが、そのどちらでもなく、 「WordPress上にある記事データが、常にFirestoreに同期され、そのデータを元にNuxt.jsで生成された静的サイトがFirebase Hostingから配信される」という形を取っています。 一見すると無駄の多い構成に見えますが、これによって
- Firebaseの豊富な機能と、最適化されたクラウドサーバー Vue.js / Nuxt.jsによるUX向上と、PWA・静的化などの最新技術への対応しやすさ WordPressの優秀な管理画面・データベース・プラグイン
技術選定の理由
WordPressからFirebaseへの移行
このブログは2016年から今年1月までWordPress（ロリポップ!レンタルサーバー）で運用していました。そこからの脱却を考え始めたのが1年前。当時考えていた理由は下記の4つでした。①サイトの速度が明らかに遅いため、Lighthouseなどのスコアが上がらないのがSEO・利便性の両面で不利。jQueryやPHP・サーバー応答速度といったボトルネックは、WordPressを使っている限り解消することができない ②NetlifyやFirebaseなどの無料で使えるサービスが充実してきている中、レンタルサーバーを使っているのはコスパも悪い ③今後のことを考えると、記事データはMySQLではなくJSON形式の方がバックアップしやすく安全 ④Vue.js、CSSフレームワーク、PWA・AMPなどといった新しい技術とWordPressの相性が致命的に悪すぎる WordPressからFirebase＋Nuxt.jsのHeadless CMSに完全移行するまでの記録 ①導入・技術選定 | Our Story's Diary最終的には、記事データはWP依存のままだし費用も下がっていないので、当初の想定とは若干ズレていますが、 とにかくメインの理由は、速度改善のボトルネックになっていたことと、Vue.jsを使いたい（＝PHPを使いたくない）という2点。 以前は会社でよくWordPressを使っていたのですが、昨年6月に転職し、ほとんどNuxt.jsしか書かなくなったため、スキルアップとしても脱却したいという気持ちがますます強くなりました。
なぜWordPressを使い続けるのか
サーバーレス・静的サイト化・Firestoreに魅了されると「WordPressは要らない！オワコン！」という短絡的な結論に辿り着きやすいです。私も最初は「WordPressをどうやって捨てるか」という方向で考えていました。 しかし、WordPressからの移行先として考えると、NoSQLである現状のFirestoreには足りない機能も多いです。 連番機能、全文検索、カテゴリー・タグ・月別アーカイブの件数カウント。この記事で使っている目次やなどもWordPressプラグインで実現されていますし、管理画面もCMSとしては貧弱。私が数年前から愛用しているOpen Live Writerのようなエディターソフトとの連携も厳しいです。 もちろん、個々の機能を一つずつ見ていけばCloud FunctionsやFirestoreクエリハック、Algoriaなどの外部サービス連携を使って実装する方法はあるのでしょうが、 それらを全部やってくれているWordPressというシステムが既にあって動いているのに、わざわざ自分で作り直す理由はどこにあるのでしょうか？ 考えれば考えるほど単なる車輪の再発明にしかなっていないことに気づき、WordPressでデータが更新されるたびにFirestoreにPUTするだけで十分だと考えるようになりました。 もちろん、将来的にはWordPressへの依存度を段階的に下げていくのが理想です。特に、画像・コメント・検索といった、フロントからWordPressにアクセスしている部分は、セキュリティ観点からもなくしていきたいですし、最終的に管理画面まで不要になれば ただ、セキュリティと表示速度というデメリットを回避した上であれば、￥270/月で使える高機能エディター＆データ管理ツール＆画像ストレージとして、WordPressは十分に有用であると思います。Nuxt.jsを使う理由
自分がVue.js / Nuxt.jsをずっと使っていて好きだから、ということに尽きるのですが。 Nuxtは静的サイト化の機能が組み込まれているためFirebase Hostingとの相性が良いこと、Google Adsense、Google Analytics、PWA Moduleなどの豊富なプラグインが公式に提供されていることなどから、WordPressの機能を維持したまま移行する際にはベストな選択肢なのではないかと思います。 また、この記事の主題ではありませんが、Vueのv-forやv-ifでテンプレートに直接ロジックを書いていく感覚はPHPに近いところがあるので、コードを移植しやすいというメリットがあります。 例えば、WordPressのトップページで記事一覧とサムネイルを表示する場合、 <?phpif (have_posts()) : while (have_posts()) : the_post();?> <article id="post-<?php the_ID(); ?>" <?php post_class('box ...