技術・Web 3年前

新・WordPressブログをNuxt+Firebaseに完全移行するプロジェクト

半年ほど前に、こんな記事を書きました。  簡単にまとめると、  ・WordPressの重さや脆弱性、jQuery依存などの問題から脱却したい  ・ Vue/Nuxt、PWA・AMPなどの技術を取り入れづらい  などの理由から、今使っているこの  ・記事数5000件超という大規模なWordPressブログを ・記事データを1つも落とすことなく ・URLも変えることなく ・月額費用が一気に高くなったりもせずに  Firestoreに完全移行したい!という計画です。  で、途中まで進めていたものの、  そこから転職して忙しかったり意義を考えたり、あといろんな技術上の課題に突き当たってすっかり止まっていたのですが、  その会社の方でFirebaseを使ったプロジェクトに携わって、Firebaseの使い方を理解し始めたこと、ある程度技術的なイメージが湧いたことから、  このFirebase移行プロジェクトを進めることにしました。  ただ、この半年の間に、Firebase自体も進化しましたし、何よりも自分の知識も増えました。  4月時点に考えていた構成には、実装上の問題であったり非効率な部分が含まれていて、途中まで進めていたエディター画面なども正直今見ると別に不要だったな……という。  なので、改めてこのプロジェクトに関するロードマップを引き直すことにしました。  ……本当は別にこれを記事にする必要はなかったのですが、  「wordpress firestore」などのキーワードで検索するとまあまあ上位にこのブログが出てしまうという問題に最近気づきまして、ちゃんとやらないと申し訳ないなと……。  というわけで、以下が新しいロードマップです。

ロードマップ

フェーズ1:Nuxt + WP REST API + GCPでブログを表示する

 フロントのみをNuxt化し、WordPressに備わっているWP REST APIで必要なデータを取ってくる、ということです。  OGPなどの理由からSPAではなくSSRします。後々Firebaseと連携することも考慮して、Node.jsの無料枠があるGCPを選びましょう。  実はこれについては年始に途中まで進めていたものがあるので、ほぼ完了しています。  正直やり方は覚えてないので、SSRで表示するところまでの記事は詳細には書きません、ごめんなさい。
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する|DMM inside App Engineの標準環境でNuxtを使って無料SSR - Crieit  WordPressサイトのURL構造をクローンする方法は書くかもしれません。 https://osd-nuxt.appspot.com/ (※記事投稿時点での情報なので、その後更新されている可能性があります)  この時点では、記事投稿・データベースにはWordPressを利用しています。  Nuxtで表示はしていますが、静的サイト化ではなくSSRですし、結局ロリポップのサーバーを見に行っているので速度的に向上もしないでしょう。 (キャッシュなどを使って部分的に高速化はできるかもしれませんし、脱jQueryできるのでフロント側の速度は上がるかもしれませんが、根本的な解決ではない)

フェーズ2:FirestoreとWordPressのDBを同期させる

 FirebaseにはCloud Functionsという機能があり、外部からGET, POSTなどのメソッドと一緒に叩くことで特定のNode.js操作を実行してくれる機能があります。  これを利用して、WordPress投稿時にその記事データを自動でCloud Functionsに投げさせれば、自動でFirestoreにも記事が投稿されていく仕組みが作れるはずです。(※無料枠でできるかどうかは不明です)  現在WordPressに存在している全ての記事を特定のタイミングで一度コピーしてしまえば、あとは常にWordPressとFirestoreの同期が取れるはずです。  同様のことを記事だけでなくコメント・固定ページ・カスタム投稿タイプに対しても行えば、ブログ閲覧に際して必要なデータが全てFirestoreに渡ります。

フェーズ3:Nuxtでデータを見に行く先をFirestoreにする

 WP REST APIから取っているデータをFirestoreに変えます。APIをきっちり分けておけばここは対応できるはずです。  Firestoreからデータを取ってくる際に制約となるのは、 ・別テーブルの情報を一発で取ってこれない(クライアント側で2回リクエストして取ってくる必要がある。ただし、ブログレベルだとあまりデメリットにはならなさそう。関連記事のリンクを取ってくるのがちょっと辛いかも) ・offset指定ができない(例えば投稿日ソートするなら、startAfterで日付を渡してそれ以降を10件、みたいな指定になる) ・キーワード検索ができない  このキーワード検索だけがネックで、Algoriaなどの外部サービスと連携させる必要がありそうです。 https://firebase.google.com/docs/firestore/solutions/search?hl=ja  逆に言えば壁になりそうなのはほぼキーワード検索のみと言って良いでしょう。Algoriaと繋げるつもりですが、ここから2ヶ月くらいでFirestore公式にもう少しマシなソリューションが追加されないかなーと淡く期待しています。

フェーズ4:コメント・いいねの投稿先をFirestoreにする

 これはその名の通り。むしろ本来のFirestoreの使い方なのであんまり苦労しないと思います。  commentsやlikesのサブコレクションに書き込み権限を与えるか、cloud functionsでどうにかするかは、考え中です。  これを行うことで、WordPress側には存在せずFirestoreにしかない情報がついに生まれ始めます。

フェーズ5:記事を投稿するたびに自動で静的サイト化・デプロイが行われるようにして、JAMStack化する

 そもそもREST APIでJAMStack化できないのは、5000件もあるこのブログの記事のデータを静的サイト化のために取得しようとするとロリポップさんが確実に落ちるからであって、  無限のパワーを持つFirestoreであれば、記事更新のたびにリクエスト10000件投げてもたぶん大丈夫ですよね?無料枠でも1日50000回まで読み取り可能らしいですし、従量制でも10万回読み取るごとに6円。  静的サイト化するということは、デプロイ時以外にはFirestoreへのリクエストが行かなくなるということでもあるはずなので。……まあ実際には、コメントやサイドバーなどは静的サイト化せずにクライアントから取りに行っても良さそうですが。  ここまで行けば悲願のJAMStack化が達成されます。  自動で静的サイト化は、NetlifyならGitHubにpushするたびに更新できますが、Firebase Hostingだとどうするんだろう? やはりCircleCIになるのでしょうか。 Circle CIからFirebase Hostingに自動ビルド&デプロイする - Qiita  この記事が参考になりそうです。

フェーズ6:WordPressのレンタルサーバーとGCPを解約する

 この時点で、WordPressの機能は「記事投稿時に投稿内容をFirestoreに投げるだけ」になっているはずです。  エディターとしてWordPressを使うのだとしても、この機能であればWordPressサイトをローカルに作っても良さそうですよね。  とはいえバックアップとしては使えますし、わざわざ自作する理由もそんなになさそうなので、月250円ならしばらくは持っていても良いのかなと思います。  脆弱性に関しても、POSTしかしないならWordPressサイトごとbasic認証かけてしまって問題ないはずです。  フェーズ5で静的サイト化した時点でFirebase HostingかNetlifyに上がっているはずなので、SSRは確実に不要です。

技術構成

 フロントサーバーホスティングデータベースエディター
...

comment  0
favorite  3
ひとりごと 3年前

爛爛と

3連休です。嬉しいです。 --------------------  スタバ。「エスプレッソアフォガートフラペチーノ」がとうとうレギュラーメニューになりました。嬉しい。  スタバにハマってそろそろ4年くらいだと思いますが、覚えている限りで歴代2番目に好きなメニューなので、今後も飲みまくります。  ちなみに1位は一昨年の夏に登場した「コールドブリュークリームフロート バレンシア」。復活してほしい。というかせめてバレンシアシロップを通年にしてください……。 --------------------  auのデータMAXプランに変えて1ヶ月経ちましたが、  10月のデータ使用量はスマホだけで41GBでした。これにiPadを足すともう1~2GBくらい増えます。  気にせず使うとこんなに行くんだなーという以上に、これまでは本来40GB使いたいところを4割我慢して25GBに抑えてたと言えるわけで、それだけ恩恵があるならプラン変えて良かったなと思います。  代償としてiPadに使えるデータ量が2GBになりましたが、こちらはそんなに困らなかった。au Wi-Fiも使えるし、電車ではあまり使わないし。ユニエアやガルパのデータDLをLTEでやったりしますが、それでも全然容量は余ったので、2GBで十分なんだなと思います。  なので来月3年縛りが終わったらUQ mobileの3GBプランにする予定です。2GBで十分なのだから3GBなら余裕。 --------------------  ユニエアに『キュン』追加。待望の、だけど、前から書いている通り本当にやりたいのは『ドレミソラシド』と『キツネ』。早くしてほしい。  11月になってそろそろ今年のベストソングを選び始める時期ですが、この2曲はおそらく上位。  今年はリリスクもあまり聴かなくなったし、もうすぐ出るブクガのアルバムが楽しみ。 --------------------  『さよならたりないふたり』ライブビューイングのチケット入手しました。  先行抽選に応募するの忘れてて絶望してたのですが、0時の解禁日にTOHOシネマズサイトで買ってきました。行ってきます。楽しみです。 --------------------  『リングフィットアドベンチャー』ついに1週間続きました。褒めてください。  自分は運動嫌いというより「運動しているのを人から見られるのが嫌」だったのかなと思いました。  身体を動かすのっておそらく人間の本能的に備わった快楽であるので、それ自体は別に嫌ではなくて、  学校の体育とか部活とかへの嫌悪って結局「周りと比べて劣っていることの恥ずかしさ」でしかなかったんだろうなと。  勉強できなくてもそれを晒し上げられる機会ってあんまりないけど、運動できないと週3で晒し上げられるのが学校という空間であるわけで。  リングフィットは自分のペースで続けられるし、運動強度が低めだったり1日10分しかやってなかったりしてもそれで馬鹿にされたりしない。だから続けられる。  「心理的安全性」という言葉がしっくりくるかもしれません。大事ですよね。  いつまで続くかわかりませんが楽しいので続けます。  欲を言えばリングに付けたままで充電できるようにリングにUSB-C差せるようにしてほしかったくらいですね。毎回Joyコン外して充電するのが面倒。 -------------------- 20191102_004025  京都のライブ会場で予約したBlu-ray、11/4発売のはずなのになぜか昨日帰ったら届いてました。京都は時差があるのでしょうか? [amazon_link asins='B07YX147LF' template='Original' store='galeglad-22' marketplace='JP']  Lovelessの方は上映会で観てきました、まあ、感想は後日改めて書きますが、買った方が良いですよ。 --------------------  先週は仕事があまりにも楽しすぎてあっという間に1週間過ぎていきました。  普通に7時間じゃ足りないくらい楽しくて毎日自主的に1時間残業するくらいだったのに、それで3連休なんでもうずっと幸せです。  何でこんなに楽しいかというと今週担当してるのがFirebaseに関するものだったからです。  Firebaseの知識を身に着けたいというのは前々から思っていて、ブログ移行プロジェクトとかも、  結局「サーバーレスが今後のスタンダードになる」と信じているからやろうとしていることであったりします。  その知識を仕事で得られるのだから楽しくて仕方ない。何だかんだ言って自分はプログラミングが好きなんだなあと思いました。もともと趣味から始めているわけですしね。 --------------------  この3連休の目標、  ・レビュー記事をたくさん書く(3連休に上げないストックも含めて)  ・ブログのNuxt/Firestore移行に関する目標を立て直す  ・その他いろいろ  まあ主に、開発とブログだけをする3日間にしたいですね。  と言いつつ土曜日は相変わらずの前職手伝いとその他の用事で終わってしまったのですが……。美容院行ったりとか。  とはいえあと2日あります。たりないふたりのLVもあるので全力は出せませんが、いろんなものを前に進めたいところですね。  今年もあと2ヶ月ですが、仕事もプライベートの開発もこれから、つまり今年から来年にかけてやるべきことの光、やればちゃんとその先に繋がりそうな道筋が何となく形になってきてて、  人生が充実している感じが今すごくあります。本当に。なので、その熱が途切れる前に頑張ります。 ...

comment  0
favorite  3