パート2〜Heroku + WordPress + Netlify + Nuxtで無料ブログ環境構築してみた〜の巻

1. アーキテクチャ

全体的なアーキテクチャを作ってみました。（アーキテクチャ図がオシャレじゃない、、と言うのは聞かなかったことにしますw）

簡単に前回の記事では触れなかったGit HubとMySQLについて。

WebアプリケーションのCI/CDは全てGit Hubを中心に実施しています。Git Hubへコードをデプロイしたら、公開用画面のNuxt.jsアプリケーションならNetlifyでビルドが走り、管理用のWordPressならHerokuでビルドが走り、それぞれデプロイされます。設定自体は”超楽”でした。この仕組みを作った人たちは天才だなと思いました。感謝しかないですね。

MySQLはWordPressのデータベースとして採用しました。HerokuのClearDB MySQLというサービスを使っています。こちらもIgniteという無料プランを適用していますので、10,000行しか登録できない、などの制約はありますが無料で運用しています。

各サービス間で色々やりとりをしていますので、それぞれに番号を振ってみました。以下で説明していきたいと思います。

2. 開発の流れ

開発（プログラミングから資源反映まで）の流れを説明しようと思います。画像でいう赤い矢印の部分です。

2. 1 コードのコミット

自分のローカルPCでプログラムを書いたら（私は使いやすいのでVS Codeを愛用しています）、自身のGit HubへPushします。図でいう①の部分ですね。Netlifyアプリ用とHerokuアプリ用に二つリポジトリを作っています。

正直必要ないですが、今回はローカルからはdevブランチへPush、devブランチからmasterブランチへはGit Hub上で一人Pull Requestをして同期をとっています（今後devブランチをステージング環境とかにする可能性がゼロではないので）。

2. 2 各アプリへの自動ビルド＆デプロイ

NetlifyもHerokuもGit Hub上のそれぞれのリポジトリのMasterブランチへCommitがあったらビルド＆デプロイが走るように設定しています。図でいう②、③の部分です。

Netlifyの設定は、直感ですぐにできました。特に難しいことはないと思います。調べれば多くの方が記事を書いていますので参考にすればすぐにできます。

Herokuも今となればとても簡単に設定できましたが、最初は使ったことのないHeroku Pipelineというサービスを使用する必要があり、少し戸惑いました。

どちらも比較的簡単にCD(継続的デプロイメント)の設定ができました。

ちなみに、何か環境的な原因でNetlifyのビルドがコケた際、いちいちdevブランチに小さな変更を入れてmasterブランチに変更を反映させて、それをまた戻して、、といったようにして再ビルドするのは面倒ですよね。

心配しなくて大丈夫です。当たり前ですが、Netlifyのポータル上で手動でビルド＆デプロイができます。図でいう③’です。（矢印的にはローカルから直接Netlifyへデプロイしているように見えちゃってますが、、）

2. 3 Nuxt.jsはSSG

今回Nuxt.jsで作成したアプリはSSG（Static Site Generator：静的サイトジェネレーター）としてビルドしています。Nuxtでは他にもSPAやSSRといったモード？でビルドできます。

その名の通り、静的ファイルを吐き出している訳です。なぜSSGとしたか、というと理由は２点あります。

1点目は、静的サイトなのでセキュリティの面で安心、だからです。Webサーバーに侵入されて個人情報を盗まれる、なんてことはなくなります。わざわざ認証機能など実装したくないですし、大変なのでw

2点目は、静的サイトなので表示が速い、からです。WordPressって動的にDBから記事の情報を取得してHTMLを生成しているですが、それだとどうしても画面描画が遅くなってしまうんですよね。なのであらかじめ記事を静的に生成しておけばその時間を短縮できるから速いよね、ということですね。

3. 記事反映をトリガーにフロントアプリをビルド

ここまで設定できればかなり継続的デプロイメントとしては上出来かなと自分では思っていました。如何せん私が今まで実施してきた仕事では手動デプロイが当たり前だったのでw

しかし、2.2でも記載したように、記事の更新があった際に、いちいち手動ビルド＆デプロイも面倒だなと思ったわけです。

そこで記事投稿をしたら、Netlifyを自動でビルドできるようにさらに設定を追加しました。図でいうオレンジの矢印の流れです。

まず④のように記事を投稿・更新します。そうすると⑤のようにWordPressがMySQLへ記事を格納します。

そうしたら、⑥のようにWordPressからNetlifyへWebhookをしてビルドをするように設定します。この設定、Netlify自体の設定はとても簡単でした。Webhook用のURL払い出すだけですからねw

少し手間がかかったのはWordPressの設定。本来であれば、便利なJAMstack Deploymentsというツールがあるのですが、私のこの当時の最新のWordPressでは上手く動きませんでした（WordPress5.8）。プラグインを有効化するとWordPrssがエラーを吐いてしまい、、

色々試行錯誤した結果、自力でWordPressのソースを修正し、記事の更新時にWebhookするようにしました。以下がコードですので同じ事象の方がいれば参考にしていただければ。。

修正対象ファイルは「/wp-contnet/themes/自身が適用しているテーマ/funtions.php」を修正してくださいね。他の階層にもfunctions.phpってあるので間違わないようにしてください。下記のコードをファイル末尾に追加すればOKです！

            function post_discord($content,$embeds=null){
                $jsonData=$embeds!==null?json_encode(array('content'=>$content,'embeds'=>$embeds)):json_encode(array('content'=>$content));
                $ch=curl_init('ご自身のNetlifyで払い出したWebhook用のURLを入れてください');
                curl_setopt($ch,CURLOPT_POST,true);
                curl_setopt($ch,CURLOPT_HTTPHEADER,array('Content-Type: application/json'));
                curl_setopt($ch,CURLOPT_POSTFIELDS,$jsonData);
                curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
                curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
                $res=curl_exec($ch);
                curl_close($ch);
                return $res;
            }
            
            function post_notify($new,$old,$post){
                if($new!=='publish')return;
                switch($old){
                    case 'new':
                    case 'draft':
                    case 'pending':
                    case 'auto-draft':
                    case 'future':
                        post_discord('new_post',array(array('title'=>get_the_title($post),'url'=>get_permalink($post),'description'=>get_the_excerpt($post),'color'=>30719)));
                }
            }
            
            function update_notify($new,$old,$post){
                if($post->post_status!=='publish')return;
                post_discord('update_post',array(array('title'=>$post->post_title,'url'=>get_permalink($post->ID),'description'=>get_the_excerpt($post->ID),'color'=>30719)));
            }
            
            add_action('transition_post_status','post_notify',10,3);
            add_action('post_updated','update_notify',10,3);
        

私は奇跡的にこの記事を見つけて実装ができました。丸パクリしてます。雑記帳さんありがとうございます！！！

これで晴れて満足のいく継続的デプロイメントを手に入れました！

4. 今後の展望

今回の無料ブログ構築でJAMstackやHeadlessCMSなど今まで知らなかった技術を学ぶことができました。

まだまだ理解が足りていない部分もあるので、色々調べて自分なりに整理し記事にしてアウトプットしていきたいと思います。

また、自分みたいにこのような構成でシステム作ってみたいという方向けに詰まった箇所も記事にしていこうと思いますので、ぜひよろしくお願いします！！

5. 最後に

最後に今回使用したツール類のバージョン情報載せておきますー。

npm(npx)：7.20.3

Node：16.6.2

WordPress：5.8