M1 MacでDocker上にGatsby.jsの開発環境を作成して実行する(gatsby develop ,build, serve)

環境

• macOS Monterey 12. 0 .1
• Docker 20.10.13
• docker-compose version 1.29.2
• Gatsby.js 4.20.0

ゴール

1. Gatsby.js(Gatsby CLI)が動作する環境をDockerコンテナ上に構築
2. Gatsby.jsのプロジェクトを作成する
   • gatsby new
3. Gatsby.jsのプロジェクトを実行する
   • gatsby develop
   • gatsby build
   • gatsby serve
4. Gatsby.jsのプロジェクトの構成を簡単に理解する

参考

• 開発環境の構築・実行

  • 公式のチュートリアルの開発環境の構築
  • 公式のチュートリアルのGatsbyサイトの作成とデプロイ

• Gatsby.jsプロジェクトの理解

ディレクトリ構成

.
├── Dockerfile
├── docker-compose.yml
└── gatsby-my-site       // Gatsbyプロジェクト
    └── node_modules　とか色々..

環境構築

Gatsby.jsをインストールしたDocker環境を作成

docker-compose.ymlとDockerfileを作成する

$ touch docker-compose.yml 
$ touch Dockerfile

Dockerfile

Node.jsとGatsby.jsがインストールされた環境を作成する

Dockerfile

FROM node:16-alpine
RUN apk update && apk upgrade && \
    apk add --no-cache bash git yarn python3 make g++  && \
    yarn global add gatsby-cli
EXPOSE 8000 9000

• FROM : imageはdocker hubから取得
  <選定基準>
  • Node.jsがインストール済
  • M1 Mac対応
  • 軽量でdockerイメージのビルドが速いalpine linux
    ※dockerイメージについては、勉強中の身なので、拘って選んだとかではない
• RUN
  • １行目：　apkコマンドのupdateとupgrade
  • ２行目：　必要ライブラリ等のインストール
    イメージの軽量化のため、--no-cacheオプションを使ってインストール後に不要なファイルを削除する。
    • bashは好み
    • git yarn python3 make g++はGatsby CLIのインストールやGatsbyプロジェクト作成時に必要
  • 3行目： Gatsby CLI をインストール
• EXPOSE
  ホスト(PC)からDockerコンテナ上で起動したGatsbyのサイトにアクセスするためポートを解放
  - 開発モード (gatsby develop デフォルトポート8000)
  - サーバ起動 (gatsby serve デフォルトポート9000)

docker-compose.yml

Dockerfileを実行する設定を記載

docker-compose.yml

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

• build : Dockerfileの内容でイメージをビルドする
• container_name : 起動した時のコンテナ名を指定(任意の名前)
• ports : ホスト(PC)からDockerコンテナ上で起動したGatsbyのサイトにアクセスするため、ホストのportとコンテナのポートを紐付け
• volumes : 開発しやすいようにVolumeマウントでローカルのカレントディレクトリとDockerの「/app」を同期させる
• working_dir : Dockerコンテナ起動時の作業ディレクトリを指定
• stdin_open : trueでコンテナを起動し続ける
• environment : Node.jsの環境変数を設定

Dockerコンテナ起動

docker-compose.ymlがある場所で下記コマンドを実行する

$ docker-compose up -d

【確認】

コンテナに入ってGatsby CLIが実行できるか確認する

# コンテナに入る
$ docker exec -it gatsby-my-site /bin/bash 

# Gatsby CLIのバージョン確認
$ gatsby --v
╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
Gatsby CLI version: 4.20.0

成功！！！！

Gatsby.jsのプロジェクトを作成＆実行

以下作業をDockerコンテナに入って実行する。　(作業ディレクトリ「/app」で実施)

プロジェクト作成

gatsby new {project-name} {starter-url}コマンドで作成できる

• project-name プロジェクト名
• starter-url 使いたいスターターのURL

スターターとはgatsbyプロジェクトのテンプレートのことで公式サイトの「Starter Library」で提供されている。

実行

$ gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

開発モードで実行する(gatsby develop)

gatsby developで、作成したプロジェクトをビルドして開発サーバを起動する
dockerコンテナ内のページをホスト(PC)から確認できるように、IPアドレスを0.0.0.0を指定する

# プロジェクトに移動
$ cd my-gatsby-site 

# 開発モードで起動
$ gatsby develop --host=0.0.0.0

⠀
You can now view gatsby-starter-hello-world in the browser.
⠀
  Local:            http://localhost:8000/
  On Your Network:  http://XXX.XX.X.X:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  Local:            http://localhost:8000/___graphql
  On Your Network:  http://XXX.XX.X.X:8000/___graphql

起動後、http://localhost:8000 にアクセスするとサイトが表示される！

--host=0.0.0.0オプションを指定して Gatsby 開発コマンドを実行すると同じネットワーク上の他のデバイスの開発環境にアクセスすることができる
（IPアドレスを0.0.0.0にすると無効なアドレスで、PCが自動で同じネットワークにするとかなんとか。ここでは詳細は記載しない）

ビルドとサーバ起動(gatsby build gatsby serve)

# プロジェクトに移動
$ cd my-gatsby-site 

# ビルド
$ gatsby build

# サーバー起動してビルドした結果を実行
$ gatsby serve --host=0.0.0.0
⠀
You can now view gatsby-starter-hello-world in the browser.
⠀
  Local:            http://localhost:9000/
  On Your Network:  http://XXX.XX.X.X:9000/

起動後、http://localhost:9000 にアクセスするとサイトが表示される

Gatsby.jsのプロジェクト構成とライフサイクル

プロジェクト構成

作成したプロジェクトのファイル構成
(スターターは「https://github.com/gatsbyjs/gatsby-starter-hello-world」)

. my-gatsby-site
    ├── LICENSE
    ├── README.md
    ├── gatsby-config.js  # Gatsbyの設定ファイル(利用するプラグインの設定など)
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public            # 公開ディレクトリ(ビルドして作成されたHTMLなどが格納される)
    ├── src               # ソースコード
    │   └── pages         # ページを構成するソースコード(URLに対応するReactコンポーネントを作成する)
    │       └── index.js
    └── static            # 画像やfaviconなど静的ファイル
        └── favicon.ico

• TypeScriptにも対応しているので、プラグイン追加や設定を行えばTypeScriptで記載することができる
• プラグインやサイト全体の設定を行うには、プロジェクトルートに手動で以下のファイルを作成して設定のコードを記載する
  • gatsby-node.js
  • gatsby-ssr.js
  • gatsby-browser.js

gatsby-node.js

• ビルド時の処理について記載する
• このファイルにあるコードは、ビルドの時に一度だけ実行される
• Gatsby Node APIs を使って、ページを動的に作成やwebpack設定を拡張/変更させることなどできる
  • gatsby developとgatsby buildのどちらからも実行されるAPI
    • onPreBootstrap　bootstrap-sequence 開始直前に実行
    • onPostBootstrap　bootstrap-sequence 終了直前に実行
  • gatsby buildから実行されるAPI
    • onPreBuild　 　ビルド開始直前に実行
    • onPostBuild　　ビルド終了直前（全プロセス完了後）に実行

bootstrap-sequenceはビルドのメイン処理(のようである)　
公式サイトドキュメント
すごくざっくり書くと

• bootstrap-sequenceは、build後のソースだとnode_modules/gatsby/dist/bootstrap/index.js　
  開始・終了時にonPreBootstrapやonPostBootstrapを実行している。
• コマンドはbuild後のファイルだと、node_modules/gatsby/dist/commands以下にあるコード
  • gatsby develop は develop.jsで、bootstrap-sequenceを実行している
  • gatsby build は build.jsで、bootstrap-sequenceの後にonPostBootstrapとonPostBuildを実行している

gatsby-ssr.js

• サーバサイドレンダリング (SSR) される静的 HTML ファイルのコンテンツを変更するためのファイル
• Gatsby SSR APIs を使う

gatsby-browser.js

• webブラウザで表示される際の処理を実装するためのファイル
• Gatsby Browser APIsを使う

ライフサイクル

公式サイトに実行される内容が書かれていて、参考にしやすかった（まだ記載途中ぽいが）

こちらの記事がとてもわかりやすく、おかげで概要が理解できました！

おわりに

Gatsby.jsの各バージョンでのサイト構築を勉強したく、ローカルを汚さず手軽に勉強できる環境を作りたいなと思いやってみました。
日本語不自由なので記事を書くのは悩みましたが、思い切って投稿しました！
Gatsby.jsとDockerについて勉強中なので、ご指摘・ご意見があればコメントいただけますとありがたいです。