strapi-starter-gridsome-blogを試してみた

JAMstack に興味があり、その中でも HeadlessCMS のstrapiと静的サイトジェネレータGridsomeの組み合わせに惹かれたので、strapi 公式サイトにあるGridsome Blog Starterを試してみました。

事前準備

VS Code の拡張機能 Remote - Containers 使ってローカル開発環境を構築したいので下記が必要になります。

• VS Code
• VS Code の拡張機能 Remote - Containers
• Docker

Docker と VS Code のインストールおよび Remote - Containers の導入についてはここでは省略します。

ディレクトリ構成

下記のように strapi と Gridsome でプロジェクトを分ける構成にします。

.
└ strapi-starter-gridcome-blog/
   ├ strapi-blog/         # strapiのプロジェクト
      └ .devcontainer/    # Remote-Containers用ディレクトリ
   └ gridsome-blog/       # Gridsomeのプロジェクト
      └ .devcontainer/    # Remote-Containers用ディレクトリ

Docker のネットワークを作成

事前に strapi と Gridsome のコンテナ間で通信するためのネットワークを作ります。
ここではネットワーク名をshared-networkにしました。

$ docker network create --driver bridge shared-network

strapi の開発環境構築

strapi-starter-gridsome-blog/strapi-blog を VS Code で開き、下記のファイルを作成します。

.devcontainer/devcontainer.json

{
  "name": "strapi-blog",
  "dockerComposeFile": "docker-compose.yml",
  "service": "strapi-blog",

  "workspaceFolder": "/src",

  "settings": {
  },

  "extensions": [
  ],
}

.devcontainer/docker-compose.yml

version: "3"

services:
    strapi-blog:
        container_name: strapi-blog
        image: node:14-slim
        ports:
            - "1337:1337"
        volumes:
            - ../:/src
        working_dir: /src
        command: /bin/sh -c "while sleep 1000; do :; done"
        depends_on:
            - mysql
        networks:
            - shared-network

    mysql:
        image: mysql:5.7
        command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
        environment:
            MYSQL_DATABASE: strapi-blog
            MYSQL_USER: strapi-blog
            MYSQL_PASSWORD: strapi-blog
            MYSQL_ROOT_PASSWORD: strapi-blog
            TZ: "Asia/Tokyo"
        ports:
            - "23306:3306"
        volumes:
            - db-data:/var/lib/mysql
        networks:
            - shared-network
volumes:
    db-data:

networks:
    shared-network:
        external: true

Gridsome から接続する用に container_name をstrapi-blogにしました。

また、DB には MySQL を選択し、volumes でデータを永続化しています。
ここではボリューム名をdb-dataにしました。

networks には事前に作成したshared-networkを設定しています。
日本語を含んだデータの登録時、エラーになるので文字コードも設定しています。

環境にもよるとは思いますが、こちらの環境だとstrapi-blogのコンテナに下記を入れないと起動に失敗しました。

command: /bin/sh -c "while sleep 1000; do :; done"

devcontainer.json、docker-compose.yml を作成したら、VS Code で Remote-Containers: Reopen in Container を実行します。

strapi-template-blog テンプレートから strapi のプロジェクトを作成

strapi テンプレートのstrapi-template-blogを使って strapi のプロジェクトを作成します。
VS Code のターミナルから下記コマンドを実行します。
ここでは strapi プロジェクトのディレクトリ名をbackendにしました。

$ yarn create strapi-app backend --template https://github.com/strapi/strapi-template-blog

普通に Gridsome Blog Starter を試すだけなら下記コマンドで strapi と Gridsome がインストールされますが、今回はプロジェクトをわけたかったので個別にインストールしています。

$ yarn create strapi-starter my-project gridsome-blog

下記の様に表示されるので ↓ キーを押して Custom (manual settings) を選択します。

yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-strapi-app@3.5.4" with binaries:
      - create-strapi-app
Creating a new Strapi application at /src/backend.

? Choose your installation type (Use arrow keys)
❯ Quickstart (recommended)
  Custom (manual settings)

使用する DB を聞いてくるので mysql を選択します。

? Choose your default database client (Use arrow keys)
  sqlite
  postgres
❯ mysql
  mongo

DB 設定については .devcontainer/docker-compose.yml で設定した値を入力します。

? Database name: strapi-blog
? Host: mysql
? Port: 3306
? Username: root
? Password: strapi-blog
? Enable SSL connection: N

正常に DB と接続できればインストールがはじまります。

strapi の起動

インストールが終わったら下記コマンドを実行して strapi を起動します。

$ cd backend
$ yarn develop

strapi が起動したらhttp://localhost:1337/adminにアクセスすると strapi の管理者登録画面が表示されるので、必要な情報を入力して READY TO START ボタンをクリックすると管理画面にログインできます。

Gridsome の開発環境構築

strapi-starter-gridcome-blog/gridsome-blog を VS Code で開き、下記のファイルを作成します。

.devcontainer/devcontainer.json

{
  "name": "gridsome-blog",
  "dockerComposeFile": "docker-compose.yml",
  "service": "gridsome-blog",

  "workspaceFolder": "/src",

  "settings": {
  },

  "extensions": [
  ],
}

name と service がgridsome-blogになっている以外は strapi と同じです。

.devcontainer/docker-compose.yml

version: "3"

services:
    gridsome-blog:
        image: node:14-slim
        ports:
            - "8080:8080"
        volumes:
            - ../:/src
        working_dir: /src
        command: /bin/sh -c "while sleep 1000; do :; done"
        networks:
            - shared-network

networks:
    shared-network:
        external: true

こちらも network にはshared-networkを設定します。
ファイル作成後は VS Code で Remote-Containers: Reopen in Container を実行します。

Gridsome のプロジェクトを作成

VS Code のターミナルから下記コマンドを実行します。

$ yarn create strapi-starter . gridsome-blog

Gridsome のインストールが終わると下記の様に続けて strapi のインストールが開始されますが、ここではインストールしないので control + c で強制終了します。

Dependencies installed successfully.Creating a new Strapi application at /src/backend.
? Choose your installation type (Use arrow keys)
❯ Quickstart (recommended)
  Custom (manual settings)

Gridsome の設定

Gridsome は frontend ディレクトリがインストールされます。
frontend/.env.example を frontend/.env にコピーして下記のように修正します。

frontend/.env

GRIDSOME_STRAPI_URL=http://strapi-blog:1337

strapi-blogは strapi の .devcontainer/docker-compose.yml で設定したコンテナ名です。

Gridsome の起動

下記コマンドを実行して Gridsome を起動します。

$ cd frontend
$ yarn develop

Gridsome が起動したらhttp://localhost:8080/にアクセスするとブログが表示されますが、画像のリンクが切れています。
hosts に下記を追加することで画像も表示されるようになります。

/etc/hosts

127.0.0.1 strapi-blog

まとめ

strapi-starter-gridsome-blog の開発環境を構築することができました。
この starter に少し手を加えるだけでも十分実用性のあるブログができると思いました。
次回はこのブログを Cloud Run にデプロイしたいと思います。

次回

https://zenn.dev/mseto/articles/strapi-starter-blog-cloud-run