Zenn
✅

Gatsby開発環境をWindows + Dockerで作成する場合の注意点

2023/05/27に公開
Docker
Gatsby.js
Windows
WSL
tech

GatsbyをDockerコンテナで動かし、ソースコードはホストOSのディレクトリに置きマウントする、というのはよくやると思いますがいくつか注意点があります。
それら注意点について個別記事は見つかりますが、全体がまとまったものが意外とないんですよね。
まさかハマったのは自分だけ？？　そんなはずはないでしょうってことで共有します。

環境

まず私の環境を紹介します。Dockerfileとdocker-compose.yamlの中にポイントがいくつかありますが詳細は後述します。

OS

>systeminfo
   ~~ cut ~~~
OS 名:                  Microsoft Windows 11 Home
OS バージョン:          10.0.22621 N/A ビルド 22621

npm version

$ npm --version
9.5.0

Gatsby version

$ gatsby --version
Gatsby CLI version: 5.9.0
Gatsby version: 5.9.0
  Note: this is the Gatsby version for the site at: /usr/src/gutenberg-rankings0

Dockerfile

FROM node:18.15.0-alpine3.17

RUN apk update && \
    apk upgrade --available && \
    apk add bash vim curl npm git && \
    apk add --update python3

RUN npm install -g gatsby-cli

WORKDIR /usr/src

docker-compose.yaml

version: '3.9'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    image: gatsby
    container_name: gatsby
    hostname: gatsby
    volumes:
      - ./gatsby_src:/usr/src/ # ローカルディレクトリをコンテナにマウント
    ports:
      - "3000:3000" #react
      - "8000:8000" #gatsby develop. 
      - "9000:9000" #gatsby serve
    stdin_open: true 
    environment:
      - WATCHPACK_POLLING=true # react and gatsby hot reloading

    user: 1000:1000

注意点

1: gatsby developが遅いのでWSL2を使う

Windowsのディレクトリにソースを置いて、gatsby developすると10分くらいかかりました。これではやってられません。原因や対策は以下がよくまとまっています。

私がどうしたかというとWSL2でUbuntu-22.04を立ち上げ、ソースを以下のディレクトリに置きました。

\\wsl.localhost\Ubuntu-22.04\home\ユーザ名\gatsby_src\

前述のdocker-compose.yamlを見てもらうと分かりますが、上記パスのgatsby_srcをマウントしています。
結果としてgatsby develop の時間は約30秒になりました。20倍の速度改善 です。

2: コンテナでユーザを指定する

docker-compose.yamlのuser: 1000:1000 部分の話です。

ソースを置くディレクトリ\\wsl.localhost\Ubuntu-22.04\home\ユーザ名 は、Windows、WLSのUbuntu、コンテナから操作ができます。で、普通にコンテナを作ると、コンテナ上のユーザはroot権限を持つので、コンテナのrootが作ったファイルをUbuntuの一般ユーザーから編集できない なんてめんどくさいことが発生します。

そこでWSLのUbuntuとコンテナ上のユーザを合わせます。
方法としては、Ubuntuでidコマンドを実行し、そこで確認できたuidとgidをdocker-compose.yamlに設定します。

Ubuntu
kt@kt-p:~/gutenberg_rankings$ id
uid=1000(kt) gid=1000(kt) groups=1000(kt),4(adm),20(dialout),24(cdrom),25(floppy),27(sudo),29(audio),30(dip),44(video),46(plugdev),116(netdev),1001(docker)
docker-compose.yaml
    user: 1000:1000

3: ホットリローディング

ホットリローディングとは、ソースを編集すると即座にビルドしなおして反映してくれる機能です。開発には必須機能ですが、Docker環境だと環境変数を設定しないと動作しません。

ホットリローディングを有効にするために、docker-compose.yamlに以下の環境変数を追加します。

docker-compose.yaml
    environment:
      - WATCHPACK_POLLING=true # react and gatsby hot reloading

なお、以下の環境変数で有効化できるという情報もありましたが私の環境ではダメでした。もし上記環境変数でうまくいかない場合は追加してみてもいいでしょう。
CHOKIDAR_USEPOLLING=true
NODE_ENV=development
GATSBY_WEBPACK_PUBLICPATH=/

4: gatsby develop -H 0.0.0.0

gatsby developを行うとWebサーバが立ち上がりport 8000で待ち受けます。しかし、単にgatsby developを行った場合、localhostからのアクセスしか受け付けません。つまり、Gatsbyがコンテナで動いている場合、コンテナ内部からしかアクセスできないわけです。
Windows上のブラウザからコンテナのport 8000にアクセスするには、-H 0.0.0.0を追加しましょう。

gatsby develop -H 0.0.0.0

これでサクサク開発ができます。

Discussion