DockerでGatsbyJSのビルド環境を構築する

以下のようなディレクトリ構造を想定しています。GatsbyJSではnewコマンドでGitHub等のGitホスティングサービスからのcloneと依存関係のインストールをやってくれますが、ここではnewコマンドを使用せずにGatsbyJSのプロジェクトを別途ローカルに用意している状態であるとします。

.
├── docker-compose.yml
├── Dockerfile
└── [GatsbyJSのプロジェクト]

以下のようなDockerfileと、

  1. FROM node:14-alpine
  2. RUN apk add --no-cache python make g++ git
  3. RUN apk add vips-dev fftw-dev \
  4.     --no-cache --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  5.     --repository http://dl-3.alpinelinux.org/alpine/edge/main
  6. RUN rm -fR /var/cache/apk/*
  7. RUN npm install --global gatsby-cli

以下のようなdocker-compose.ymlを用意します。

  1. version: '3.0'
  2. services:
  3.   install:
  4.     build: ./
  5.     container_name: 'install'
  6.     hostname: 'install'
  7.     working_dir: /home/node/app
  8.     environment:
  9.       - NODE_ENV: "development"
  10.     volumes:
  11.       - ./[GatsbyJSのプロジェクト名]:/home/node/app
  12.     command: >
  13.       npm install
  14.   reset:
  15.     build: ./
  16.     container_name: 'reset'
  17.     hostname: 'reset'
  18.     working_dir: /home/node/app
  19.     environment:
  20.       - NODE_ENV: "development"
  21.     volumes:
  22.       - ./[GatsbyJSのプロジェクト名]:/home/node/app
  23.     command: >
  24.       sh -c 'gatsby clean && npm clean-install'
  25.  build:
  26.     build: ./
  27.     container_name: 'build'
  28.     hostname: 'build'
  29.     working_dir: /home/node/app
  30.     environment:
  31.       - NODE_ENV: "production"
  32.     volumes:
  33.       - ./[GatsbyJSのプロジェクト名]:/home/node/app
  34.     command: >
  35.       gatsby build
  36.   launch-dev:
  37.     build: ./
  38.     container_name: 'launch-dev'
  39.     hostname: 'launch-dev'
  40.     working_dir: /home/node/app
  41.     environment:
  42.       - NODE_ENV: "development"
  43.     volumes:
  44.       - ./[GatsbyJSのプロジェクト名]:/home/node/app
  45.     ports:
  46.       - "8000:8000"
  47.     command: >
  48.       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を開くとページが表示されます

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です