以下のようなディレクトリ構造を想定しています。GatsbyJSではnewコマンドでGitHub等のGitホスティングサービスからのcloneと依存関係のインストールをやってくれますが、ここではnewコマンドを使用せずにGatsbyJSのプロジェクトを別途ローカルに用意している状態であるとします。
. ├── docker-compose.yml ├── Dockerfile └── [GatsbyJSのプロジェクト]
以下のようなDockerfileと、
FROM node:14-alpine
RUN apk add --no-cache python make g++ git
RUN apk add vips-dev fftw-dev \
--no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/community \
--repository http://dl-3.alpinelinux.org/alpine/edge/main
RUN rm -fR /var/cache/apk/*
RUN npm install --global gatsby-cli
以下のようなdocker-compose.ymlを用意します。
version: '3.0'
services:
install:
build: ./
container_name: 'install'
hostname: 'install'
working_dir: /home/node/app
environment:
- NODE_ENV: "development"
volumes:
- ./[GatsbyJSのプロジェクト名]:/home/node/app
command: >
npm install
reset:
build: ./
container_name: 'reset'
hostname: 'reset'
working_dir: /home/node/app
environment:
- NODE_ENV: "development"
volumes:
- ./[GatsbyJSのプロジェクト名]:/home/node/app
command: >
sh -c 'gatsby clean && npm clean-install'
build:
build: ./
container_name: 'build'
hostname: 'build'
working_dir: /home/node/app
environment:
- NODE_ENV: "production"
volumes:
- ./[GatsbyJSのプロジェクト名]:/home/node/app
command: >
gatsby build
launch-dev:
build: ./
container_name: 'launch-dev'
hostname: 'launch-dev'
working_dir: /home/node/app
environment:
- NODE_ENV: "development"
volumes:
- ./[GatsbyJSのプロジェクト名]:/home/node/app
ports:
- "8000:8000"
command: >
gatsby develop --host=0.0.0.0
docker-compose.ymlについて、ファイル中の[GatsbyJSのプロジェクト名]
と書かれている箇所は適宜修正してください。また、Dockerfileについても、必要があればnodeのバージョンを変更してください。
あとはコマンドを実行すれば良いです。
$ docker-compose run --rm install # パッケージ群のインストール 最初の一度のみ $ docker-compose run --rm reset # 何かあってパッケージ群をclean installしたいとき $ docker-compose run --rm build # 本番用の静的ファイルを生成するとき $ docker-compose up -d launch-dev # 開発用サーバを起動するとき 起動後にブラウザでhttp://localhost:8000を開くとページが表示されます