Docker で Gatsby環境を構築する

やりたいこと

Gatsbyの環境を作りたい Dockerで...!

作り方

環境

Mac Docker for Mac

1. 作業フォルダにdocker-compose.ymlとDockerfileを作成します
2. Dockerfileの中身を下記のようにします

FROM node:12.18.2-alpine3.12

WORKDIR /home/node/app
RUN apk update && apk add git
RUN yarn global add gatsby-cli
EXPOSE 8000

nodeのalpine系のLTSのイメージを使って、gitとgatsby cliをインストールしているだけです EXPOSEはコンテナのポートをホスト側に公開しているだけです。

このままではアクセスはできませんが 次で解決するので進めます

3.　docker-compose.ymlを下記のようにします

version: "3.7"
services:
  gatsby:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: gatsby
    ports:
      - "8000:8000"
    volumes:
      - .:/home/node/app
    environment:
      - NODE_ENV=development
    stdin_open: true

解説としては

build:
      context: .
      dockerfile: Dockerfile

カレントディレクトリのDockerfileをビルドします

container_name: gatsby コンテナ名をgatsbyにします

ports:
      - "8000:8000"

上記で、ホスト(Mac)とゲスト(docker)のポートをマッピング(関連付け)しています

volumes:
      - .:/home/node/app

volumes - volume（データの永続化領域）の定義 volume とは、コンテナのライフサイクルが終了した後でもデータを保管しておけるデータ領域です。 ホスト側のディレクトリを volume としてコンテナ内にマウントできる。 本機能はホストとコンテナ間でファイルを受け渡すときに利用できる。 参考：オブジェクトの広場

stdin_openはコンテナの標準入力をオンにします getsby new 〇〇とかするのでオンにしております

4.　ビルドしましょう！ docker-composer up -d --build(ビルドとデーモンでの立ち上げ) ２回目以降はdocker-compose up -dです

5.　docker exec -it gatsby shでコンテナ内に入れます (コンテナ立ち上がってないとかいわれたらdocker-compose up -d)

6.　コンテナに入ったら、gatsby new blog(別の名前でも可)を入力し、gatsbyのサイトを立ち上げます(yarnを使いましょう) 別のテーマ使う場合は公式参考に https://www.gatsbyjs.org/docs/themes/

7.　gatsby developでビルドして、localhostを確認して、表示されていれば成功

お疲れさまでした

最初のビルドに結構掛かるので気長に待ちましょう