yarnでgatsby newする(Docker)

Docker環境(他の環境は調べていない)では、gatsby new、gatsby new ~をした際に、問答無用でnpmインストールしてきます。

ここではyarnを使ってgatsby newする方法をご紹介します！

開発環境

• Docker: 20.10.1
• docker-compose: 1.27.4
• Node: 12.17.0
• Gatsby: 2.10.0

完成後のディレクトリ構成の確認

project-name
    |- .config
        |- gatsby
            |- config.json
    |- 生成されるgatsbyファイル群
        |- ...
    |- docker-compose.yml
    |- Dockerfile

上記に書いている生成されるgatsbyファイル群以外は事前に用意しておきます。

config.jsonを作成する

ずばりこれがyarnを使う方法です。
↓詳しくはコチラを参照↓
Using Yarn as your Gatsby package manager

先ほどの構成通りにconfig.jsonを作成して、公式ドキュメントを参考に以下のような記述をしていきます。

config.json

{
    "cli": {
        "packageManager": "yarn"
    }
}

Docker系の設定

config.jsonの設定をコンテナ内の設定と繋げるために以下のような構成となっています。

Dockerfile

FROM node:12.17.0

RUN mkdir project-name
WORKDIR /project-name
COPY .config /root/.config/

RUN yarn global add gatsby-cli

続いてdocker-composeファイルになります

docker-compose.yml

version: '3.8'
services:
  gatsby:
    build: ./
    tty: true
    stdin_open: true
    volumes:
      - ./:/project-name
    environment:
      - NODE_ENV=development
    ports:
      - 8000:8000
      - 9000:9000

実行

イメージを作成して、コンテナを起動、コンテナ内に入っていきます。

$ docker-compose build
$ docker-compose up -d
$ docker-compose exec gatsby bash

一度コンテナ内でファイルが存在しているか見に行きましょう！

$ cat /root/.config/gatsby/config.json

先ほど作成していたconfig.jsonがあれば成功です！

ではgatsby new ~してみてください！

$ gatsby new 生成されるgatsbyファイル群のフォルダ名

yarnさんが作成してくれているはずです！！

さいごに

いろいろな記事を漁ってきて、yarnだけで作成する方法はないかと探っていたところ、見つけられたので共有致しました！

なおconfig.jsonファイルには自分にはよく分からなかった値が含まれているので、pushする際に本体はignoreして、config.example.jsonなど作成した方が良いかも知れません。