DockerCompose で Gatsby環境構築

やりたいこと

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

作り方

環境

Mac
Docker for Mac

1. 作業フォルダにdocker-compose.ymlとDockerfileを作成します

2. Dockerfileの中身を下記のようにします

title=Dockerfile

FROM node:12.14.1

WORKDIR /home/node/app
RUN npm install -g gatsby-cli
EXPOSE 8000

nodeのLTSのイメージを使って、gatsby cliをインストールしているだけです
alpine使ってないのは私がコマンドをまだ理解できていないからです...
EXPOSEはコンテナのポートを公開しているだけなので、このままではアクセスはできませんが
次で解決するので進めます

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

title=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 bashでコンテナ内に入れます

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

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

お疲れさまでした

なお、おそすぎて使い物にならなかった...
→alpineにしました
https://blog.collapse-natsu.com/post/createEnvForGatsbyWithDocker