自前のブログ作り⑥ ー HeadlessCMSのStrapiをインストールして、Nginxでデプロイする

Node.jsをインストール

流れとしては、まずUbuntuのリポジトリからnode.jsとnpm（Node.js Package Mnager）をインストールします。ここまではnode.jsのバージョン管理ツール「n」を手に入れるためのものです。

今度は「n」を使って欲しいバージョンのnode.jsとnpmをインストールします。
その後は、Ubuntuリポジトリから手に入れた古いnode.jsとnpmは、お役御免となるので削除します。

Ubuntuリポジトリからインストール

お約束のaptをアップデートして、インストールします。

$ sudo apt update
$ sudo apt install nodejs

続いてnpm（Node.js Package Mnager）もインストールします。

$ sudo apt install npm

npmが手に入ったので、npmでnをグローバルにインストールします。

$ sudo npm -g install n

nを使って安定版のNode.jsをインストール

npmもインストールしたnode.jsのバージョンに紐づいて一緒にインストールされています。
バージョンを指定してインストールも可能です。

# nでnode.jsの安定版をインストール
$ sudo n stable # stableをlatest にすると最新版

nを使うとバージョンが違うnode.jsを簡単に管理できます。
期間を空けて、3回ほどnで安定版のnode.jsをインストールしたので、nで管理しているバージョンリストを見てみます。

# nで管理中のバージョンを確認
$ n list
node/14.17.6
node/14.18.0
node/14.18.1

3つのバージョンが表示されました。
使用するバージョンを切り替えたい時はnを実行します。

$ n
    node/14.17.6
    node/14.18.0
 ο node/14.18.1

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit

UbuntuリポジトリからインストールしたNode.jsとnpmを削除

nを手に入れる役目は終わったので、削除します。

$ sudo apt purge nodejs npm

必要そうであれば、autoremoveも実行します。

更新に伴い必要なくなったパッケージを削除
$ sudo apt autoremove

最終確認

一応、nodeとnpmのバージョンを確認して、Strapi実行環境の準備完了です。

$ node -v
v14.18.1

$ npm -v
6.14.15

Strapiの動作条件を満たしていますので、Strapiのインストールに進みます。

Strapiをインストール

インストールするディレクトリに移動します。
仮に/var/www/hogehoge/にStrapiを用意することにします。

$ cd /var/www/hogehoge/

あらかじめ準備したMySQLを使いたいため、クイックスタートは使用しません。
また、特にテーマの利用もしないので、インストールオプションは無しにします。
オプションについては、公式ドキュメントopen_in_newをご確認ください。

npxでインストールコマンドを実行
$ npx create-strapi-app strapi　# strapiのところは任意の名称

Need to install the following packages:
  create-strapi-app
Ok to proceed? (y)

npxの実行を確認してくるので、yを入力してインストールを進めます。
対話形式でインストール条件を確認されるので、入力していきます。

? Choose your installation type (Use arrow keys)
  Quickstart (recommended)
> Custom (manual settings)
# Customを選択

? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) (Y/n) 
# テンプレートは使わないので、nを入力

? Choose your default database client (Use arrow keys)
  sqlite
  postgres
> mysql
  mongo
# mysqlを選択

# mysqlのデータベースについて（予め用意していたデータベースの情報を入力）
? Database name: データベース名
? Host: データベースの接続先ホスト
? Port: データベースのポート番号
? Username: データベースのユーザー名
? Password: データベースのパスワード
? Enable SSL connection: (y/N) y

Nginxでデプロイ

見本が公式ドキュメントにあるので、参考にしました。
実際の設定ファイルには、外に晒してはいけない情報も含まれているので気を付けましょう。

• Nginx設定
  Nginx Proxying - Strapi Developer Documentationopen_in_new
• Strapiの設定（./config/server.js）
  Configurations - Strapi Developer Documentationopen_in_new

サブフォルダーの見本通りで、パスなどを自分の環境に合わせるだけで接続できました。

Strapiの管理画面へログインする

まずは、Strapiのプロジェクトルートへ移動して起動します。

$ cd /var/www/hogehoge/strapi/
$ npm run develop

起動したら、Strapiにアクセスします。（example.com/strapiなど設定したURLにアクセス）

最初のユーザー（管理者）を作成する画面が表示されます。
ユーザーを作ってログインしましょう。

おわりに

Strapiは公式ドキュメントや公式ブログの情報が充実しているので、楽に進められました。
エンジニアの方のレビュー記事など、日本語の情報も簡単に見つかって助かります！

次回はいよいよStrapiを触ってコンテンツデータを準備します。