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