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

Published 2021-10-23

Updated 2023-07-26

Category Make

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なし）

上記4つでアクセス可能だが、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（ユニバーサルアナリティクス）と併用しました。GA4でSearch Consoleと連動できるようになったタイミングでGA4だけにした。（~~Adsenseとの連携は今もできない。~~Adsenseとの連携も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 Documentation

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

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

Strapiでコンテンツルールや権限の変更をする場合は、PM2をつかって起動した状態（永続化の状態）では変更できない。 PM2での起動を停止して、Strapiを開発モードで変更した後、再度PM2で起動する。

NuxtをPM2で起動する

こちらもNuxtの公式ドキュメントを参考に進める。
Deploy Nuxt using PM2

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

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

公開後の作業

Search Consoleにブログを登録

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

Google Search Console

Google Analyticsとも忘れずに連携しておくこと。

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

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

サーバー監視 — さくらの VPS マニュアル

おわりに

ようやくメイキング記事が終わった。
車やバイクの趣味と同じく、これからメンテナンスなど面倒を見ていかなければいけない。
ここまでブログを作るためにやったことは100%忘れてしまうので、今後のメンテナンス時のためにメイキング記事を書いた。記事を書くのは辛くて途中でやめようと何度思ったか。雑なところもあるが、とりあえず未来の自分が分かる内容であることを祈る。

今回ブログを作ってみて超楽しかった。趣味だから楽しいのは当たり前なんだが、他に書く感想もない。
また何かDIYができたらブログで書きたいと思う。