Ubuntu 22.04のVPSにStrapiをインストールする

Strapiは、オープンソースのヘッドレスCMS。ヘッドレスCMSとは、ヘッド（View）を持たないCMSのこと。CMSとはContent Management Systemの略で、Webサイトのコンテンツを管理できるシステムのこと。Next.jsでWebサイトをつくるにあたって、コンテンツの管理をヘッドレスCMSを使ってやってみたいなというのがモチベーションです。

ヘッドレスCMSにもContentfulとかmicroCMSとかいろいろあって、Strapiにも環境を用意する手間なく使えるStrapi Cloudというクラウド版もあるようだけど、じぶんでホストすれば無料で利用できるとのことなので、Ubuntu 22.04で動かしたConoha VPSにStrapiをインストールしたいと思います。

そもそもVPSをUbuntu 22.04でセットアップしたり、nginxを導入したここまでのあらすじは以下の記事を参照ください。

Node.jsをインストール

StrapiはJavaScriptで開発されているので、なにはともあれVPSにNode.jsをインストール。aptでインストールしてもいいのだけど、Node.jsのバージョンを管理したいので先にnodenvをインストールします。

GitHubのリポジトリからnodenvのソースコードをcloneしたあと、パスを指定してbashを再起動し、nodenvのプラグインのディレクトリへnode-buildのソースコードをcloneする。

$ git clone https://github.com/nodenv/nodenv.git ~/.nodenv
$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(nodenv init -)"' >> ~/.bashrc
$ source ~/.bashrc
$ git clone https://github.com/nodenv/node-build.git $(nodenv root)/plugins/node-build

うまくインストールできたかどうかはnodenv-doctorで調べられるらしい。実行したらOKっていわれたのでだいじょうぶそう 🎉

$ curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

nodenvでインストールできるバージョンを調べつつ、Node.jsのLTSをインストール（記事公開時点の情報です）。

$ nodenv install -l
$ nodenv install 18.16.0
$ nodenv global 18.16.0

$ node -v で 18.16.0 って表示されたらOK 🎉

リバースプロキシを設定する

VPSで起動したStrapiへWebからアクセスできるように、nginxでリバースプロキシを設定します。
まずは、既存のnginxの設定ファイルをコピーして、StrapiへアクセスできるURLの設定ファイルを用意し、リバースプロキシの設定を追記。

$ cd /etc/nginx/sites-available/
$ sudo cp shikakun.dev example.shikakun.dev
$ sudo vim example.shikakun.dev
upstream strapi {
  server 127.0.0.1:1337;
}

server {
  listen 80;
  listen [::]:80;

  server_name example.shikakun.dev;

  location / {
    return 301 https://$server_name$request_uri;
  }
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;

  server_name example.shikakun.dev;

  ssl_certificate /etc/letsencrypt/live/shikakun.dev/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/shikakun.dev/privkey.pem;
  ssl_session_tickets on;
  ssl_protocols TLSv1.2;
  ssl_ciphers AESGCM:HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://strapi;
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass_request_headers on;
  }
}

作成した設定ファイルへsites-enabledからシンボリックリンクを貼り、nginxを再起動。

$ sudo ln -s /etc/nginx/sites-available/example.shikakun.dev /etc/nginx/sites-enabled/example.shikakun.dev
$ sudo systemctl restart nginx

Strapiをインストール

Strapiをインストールするフォルダを用意。

$ cd /var/www/
$ sudo mkdir example.shikakun.dev
$ sudo chown -R $USER:$USER /var/www/example.shikakun.dev

create-strapi-appを実行して、対話型インターフェースに回答しながら好みの仕様でStrapiをインストールします。データベースはとりあえずsqliteにしておきました。

$ npx create-strapi-app@latest example.shikakun.dev
? Choose your installation type Custom (manual settings)
? Choose your preferred language JavaScript
? Choose your default database client sqlite
? Filename: .tmp/data.db

Strapiのソースコードをビルドして、起動！

$ cd example.shikakun.dev
$ NODE_ENV=production npm run build
$ node /var/www/example.shikakun.dev/node_modules/.bin/strapi start

う、動いた〜！ https://example.shikakun.dev/admin でアクセスできるようになりました 🎉

使うたびにStrapiを起動するのは大変なので、 pm2 を利用してデーモン化します。ということで、インストールしてシェルを再起動。

$ cd ~
$ npm install pm2@latest -g
$ source ~/.bashrc

設定ファイルを用意します。sqliteではなくデータベースのサーバーを用意する場合はenvのところに設定を指定するみたい。

$ vim ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'strapi',
      cwd: '/var/www/example.shikakun.dev',
      script: 'npm',
      args: 'start',
      env: {
        NODE_ENV: 'production',
      },
    },
  ],
};

保存したらpm2を実行。

$ pm2 start ecosystem.config.js
$ pm2 startup

[PM2] To setup the Startup Script, copy/paste the following command: のあとに、実行してねってコマンドが出力されるので、それをコピーペーストして実行！
$ pm2 list で登録されたかどうか確認できる。無事にデーモン化できました 🎉