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

以下のようなディレクトリ構造を想定しています。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を開くとページが表示されます

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル