strapi-starter-gridsome를 해봤어요. - 블로그.

JAMstack에 관심이 있었고, 그 중에서도 HeadlessCMSstrapi와 정적 사이트 생성기Gridsome의 조합에 이끌려 strapi 공식 사이트Gridsome Blog Starter를 시도해 봤다.

사전 준비

VS 코드의 확장 기능인 Remote-Contaainess를 사용하여 로컬 개발 환경을 구축하려면 다음과 같은 내용이 필요합니다.

VS Code

VS 코드의 확장 기능 Remote-Contaainess

Docker

Docker 및 VS Code 설치와 Remote-Contaainers 가져오기는 여기서 생략합니다.

디렉토리 구조

다음 strapi와 Gridsome에 따라 항목의 구성을 구분합니다.

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

Docker 네트워크 만들기

strapi와 Gridsome의 용기 사이에서 통신하는 네트워크를 미리 설정합니다.
여기 인터넷 이름을 Shareed-network로 바꿨어요.

$ docker network create --driver bridge shared-network

strapi의 개발 환경 구축

VS 코드로 strappi-starter-gridsome-blog/strapi blog를 열고 다음 파일을 만듭니다.
.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에서 연결하는 containername을 strapi 블로그로 만들었습니다.
또한 DB에서 MySQL을 선택하여 volumes로 데이터를 영구화합니다.
여기 음량명을db-data로 바꿨어요.
networks에 미리 제작된shared-network가 설치되어 있습니다.
일본어가 포함된 데이터에 로그인하면 오류가 발생하므로 문자 코드도 설정합니다.
환경에 따라 이쪽 환경에서 strappi 블로그 용기에 다음 내용을 넣지 않으면 시작에 실패합니다.

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

devcontainer.json、docker-compose.yml을 만든 경우 VS 코드로 Remote-Contaainer: Reopen in Contaainer를 실행합니다.

strappi-template - 블로그 템플릿에서 strapi 프로젝트 만들기

strapi 템플릿strapi-template-blog을 사용하여 strapi를 만드는 프로젝트입니다.
VS 코드의 터미널에서 다음 명령을 실행합니다.
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 "[email protected]" 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의 개발 환경 구축

VS 코드로 straipi-starter-gridcome-blog/gridsome-blog를 열고 다음 파일을 만듭니다.
.devcontainer/devcontainer.json

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

  "workspaceFolder": "/src",

  "settings": {
  },

  "extensions": [
  ],
}

name와 서비스가gridsome-블로그인 것을 제외하고는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

이쪽도 네트워크로 shared-network를 설정합니다.
파일 제작 후 VS 코드를 통해 Remote-Contaainers: Reopen in Contaainer를 실행합니다.

Gridsome 프로젝트 작성

VS 코드의 터미널에서 다음 명령을 실행합니다.

$ 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에는 fronted 디렉토리가 설치되어 있습니다.
frontend/.env.example fronte를/를 입력합니다.다음과 같이 env로 복사합니다.
frontend/.env

GRIDSOME_STRAPI_URL=http://strapi-blog:1337

strapi 블로그는 strapi의 것이다.devcontainer/docker-compose.yml로 설정된 용기 이름을 사용합니다.

Gridsome 시작

다음 명령을 실행하여 Gridsome을 시작합니다.

$ cd frontend
$ yarn develop

Gridsome이 시작될 때http://localhost:8080/에 방문하면 블로그가 표시되지만 이미지 링크가 끊어집니다.
hosts에 다음 내용을 추가하면 그림도 표시됩니다.
/etc/hosts

127.0.0.1 strapi-blog

총결산

strappi-starter-gridsome-blog의 개발 환경이 구축되었다.
나는 이 스타터를 조금만 가공하면 매우 실용적인 블로그를 만들 수 있을 것이라고 생각한다.
다음에는 이 블로그를 클라우드 런으로 설계하고 싶어요.

다음번

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