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

6 min read読了の目安(約6100字

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

事前準備

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

  • VSCode
  • VSCodeの拡張機能 Remote - Containers
  • Docker

DockerとVSCodeのインストール及び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-gridcome-blog/strapi-blogをVSCodeで開き、下記のファイルを作成します。

.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を作成したら、VSCodeでRemote-Containers: Reopen in Containerを実行します。

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

strapiテンプレートのstrapi-template-blogを使ってstrapiのプロジェクトを作成します。
VSCodeのターミナルから下記コマンドを実行します。
ここでは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ボタンをクリックすると管理画面にログインすることができます。
strapi管理者登録画面

Gridsomeの開発環境構築

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

.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を設定します。
ファイル作成後はVSCodeでRemote-Containers: Reopen in Containerを実行します。

Gridsomeのプロジェクトを作成

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

$ 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