自前のブログ作り⑨ ー Strapi+Nuxtブログの公開作業

schedule Published
published_with_changes Updated
Category folderMake
format_list_bulleted Contents

ついにブログを公開するところまで来ました。
Nginxの設定ファイルの見直し、GTMとGAの導入など、公開前作業をやった後に、StrapiとNuxt.jsをPM2で永続化して公開します。まだやり残している部分もありますが、公開できたのでブログのメイキング記事も一区切りとなります。

ブログ制作のメイキング記事一覧navigate_next

Nginxの設定ファイルの確認

URLの正規化とHTTP/2対応

まだ設定してなかったのでURLを統一しておきます。
複数アクセスできる状態から検索エンジンの評価を正規化する方法はありますが、そもそもサーバー側でひとつに統一しておくのが一番楽です。

  • http://www.beamaker.jp(http/wwwあり)
  • http://beamaker.jp(http/wwwなし)
  • https://www.beamaker.jp(https/wwwあり)
  • https://beamaker.jp(https/wwwなし)

でアクセス可能ですが、https://beamaker.jp(https/wwwなし)に全て統一します。
パラメーターなどは利用することもあるので、サーバー側ではなくcanonicalなどで適宜対処します。

HTTP/2は、そこまでブログの高速化に寄与しなさそうですが、ついでにやっておきます。
もうすぐHTTP/3が普及する時代が来るそうです。

server {
  listen 80;
  listen 443 ssl;
  server_name www.beamaker.jp;
  return 301 https://beamaker.jp$request_uri;
}

server {
  listen 443 ssl http2;
  server_name beamaker.jp;
︙
}

gzip圧縮対応

静的ファイルを圧縮して通信するようにします。

server {
︙
  gzip on;
  gzip_types text/css text/javascript application/javascript application/json image/svg+xml application/font-woff2 font/woff2 image/png image/jpeg image/webp;
  gzip_proxied no-store no-cache private expired auth;
  gzip_min_length 1000;
  gunzip on;
︙
}

gzip_proxiedとか今は分からないので、Nginxのお勉強をした後に出直してきます。

GTMとGAの導入

とりあえずGTM(Google Tag Manager)を導入しておけば、後はどうとでもなるので先に導入します。 今回はプロトタイプのJavaScriptを書き直してイベント監視などをしていないため、「nuxt-link」や「router-link」を全く使用していない完全なSSRです。SPA遷移時を考慮してGTMのmoduleなど使わなくても良いので、普通のやり方で導入しました。

あとはGTMでGA(Google Analytics)を入れておきます。GA4という新しいバージョンになっているのですが、GA4はSearch Consoleと連動できないので、これまでのUA(ユニバーサル アナリティクス)と併用しました。

PM2でStrapiとNuxtを永続化して公開

Node.jsのアプリケーションは、OSの常駐プログラムのように常に動いてはくれません。
そこで「PM2 Runtime」というオープンソースで使用できるNode.js製のプロセスマネージャーを使って、永続化(デーモン化)します。

PM2のインストール

npmでインストールしました。

$ npm install pm2 -g

StrapiをPM2で起動する

とりあえず、Strapiの公式ドキュメントに紹介されているPM2を使った例を参考に起動しました。
Process Manager - Strapi Developer Documentationopen_in_new

Strapiブログにも情報があるので、こちらも参考にしました。
What are Process Managers and How to use them with Strapiopen_in_new

流れとしては、
① server.jsファイルをプロジェクトディレクトリに作る
② PM2のエコシステムファイル(設定ファイル)を作る
③ PM2で起動する(pm2 start ecosystem.config.js) になります。

Strapiでコンテンツルールや権限の変更をする場合は、PM2で起動した状態では変更できません。 PM2での起動を停止して、Strapiを開発モードで変更した後、再度PM2で起動します。

NuxtをPM2で起動する

こちらもNuxtの公式ドキュメントに紹介があるので、参考に進めます。
Deploy Nuxt using PM2open_in_new

サーバー再起動時の自動起動設定

後は、サーバーが再起動時に自動起動する設定などもしておきます。
この辺りはPM2の公式ドキュメントopen_in_newを参考にしました。
上手く設定できたようですが、理解できていないので省略します。(公開できたのでお腹いっぱい。)

公開後の作業

Search Consoleにブログを登録

ブログを公開できたらGoogleさんに報告するため、Search Consoleに登録します。
登録が済んだらGoogleさんにクロールをお願いしたり、ページが登録されたか確認できるようになります。また、インプレッションがあったキーワードやクリック率なども分かるようになります。
サーチコンソールを略してサチコと呼ぶ人もいるようです。

Google Analytics(UAの方)とも忘れずに連携しておきます。

さくらのVPSのサーバー監視設定

サーバーの死活監視をしてもらうため、さくらのVPSの管理画面で設定しておきます。

おわりに

ようやくメイキング記事が終わりました。
車やバイクの趣味と同じく、これからメンテナンスなど面倒を見ていかなければいけません。
普段やらないことで100%忘れてしまうので、今後のためにメイキング記事を書きましたが、辛くて途中でやめようか迷いました。雑なところもありますが、とりあえず書き終えたので未来の自分が分かるよう祈ります。

やっぱりDIYは超楽しいです。
次は玄関横にラブリコかディアウォールで全身鏡を付けないといけないので、またDIYをブログで紹介できる機会があれば良いなと思います。