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

schedule Published
published_with_changes Updated
Category folderMake
format_list_bulleted Contents

実行環境であるNode.jsをインストールしていないので、まずNode.jsをインストールします。
その後、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のインストールに進みます。

  • Node LTS (v12 or V14) Note that odd-number releases of Node will never be supported (e.g. v13, v15).
  • NPM v6 or whatever ships with the LTS Node versions

Deployment - Strapi Developer Documentationopen_in_new より引用

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
以上で終了です。こちら側で伝えた情報に問題がなければインストールが完了します。
インストールが完了後、プロジェクトディレクトリに移動して起動できます。
起動すると、デフォルトではlocalhost:1337でユーザー作成画面が立ち上がるので、Nginxでデプロイします。

Nginxでデプロイ

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

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

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

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

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

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

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

おわりに

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

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