自前のブログ作り⑥ ー 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を使いたいため、SQLiteになるクイックスタートは利用しない。
また、とくにテーマの利用もしないので、インストールオプションは無しにする。
オプションについては公式ドキュメント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

以上で終了。入力情報に問題がなければインストールが完了する。
インストールが完了後、プロジェクトディレクトリに移動して起動する。
デフォルトではlocalhost:1337でユーザー作成画面が立ち上がるので、次はNginxでデプロイする作業に進む。

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を触ってコンテンツデータを準備する。