環境
- macOS Monterey 12. 0 .1
- Docker 20.10.13
- docker-compose version 1.29.2
- Gatsby.js 4.20.0
ゴール
- Gatsby.js(
Gatsby CLI)が動作する環境をDockerコンテナ上に構築 - Gatsby.jsのプロジェクトを作成する
gatsby new
- Gatsby.jsのプロジェクトを実行する
gatsby developgatsby buildgatsby serve
- Gatsby.jsのプロジェクトの構成を簡単に理解する
参考
-
開発環境の構築・実行
-
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は好み -
gityarnpython3makeg++は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について勉強中なので、ご指摘・ご意見があればコメントいただけますとありがたいです。