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 で登録されたかどうか確認できる。無事にデーモン化できました 🎉