はじめに
今回は Gatsby.js の開発環境を Devcontainer を使用して構築する方法を解説します。
この環境は別の PC（Ubuntu）上に構築することを想定し、外部端末（Windows などやスマホなど）からアクセスできるような構成で実装していきます。
構成として以下のようなイメージです。
環境
- Docker（version 27.4.1, build b9d17ea）
- Devcontainer
- Gatsby.js（version: 5.13.7）
- Ubuntu（22.04.5 LTS）
VS Code の拡張機能（Remote Development）の導入や、VS Code からリモートサーバへ SSH 接続するための設定は完了しているものとして進めています。
ディレクトリ構成
ディレクトリ構成は以下のようになっています。
.
├── .devcontainer
│ ├── devcontainer.json
│ ├── docker-compose.yml
│ ├── node
│ │ └── Dockerfile
│ └── proxy
│ └── Dockerfile
├ # gatsby を動作させるファイルなど色々
├── LICENSE
└── README.md必要なファイルの作成
まずは Devcontainer の設定フ ァイルを作成します。.devcontainerディレクトリを作成し、以下のファイルを配置します。
{
"name": "gatsby-develop-sample",
// devcontainer.json と同じ階層にある場合は docker-compose.yml のまま指定する
"dockerComposeFile": "docker-compose.yml",
// docker-compose.ymlファイル内のどのサービス（コンテナ）をVS Codeでアタッチするか指定する
"service": "app",
// ワークスペースを指定
"workspaceFolder": "/workspace",
// vscode でコンテナに接続した際のユーザーを指定する
"remoteUser": "node",
// devcontainerで開いた時のvscode側の設定カスタマイズ
"customizations": {
// VS Code固有のプロパティを設定します
"vscode": {
// 拡張機能などの設定
"settings": {
/*****************************
* VS Codeの基本設定
******************************/
// エディターのインデントのサイズを指定（デフォルトは4）
"editor.tabSize": 2
},
// コンテナ内にインストールする拡張機能を指定する
"extensions": [
// indent-rainbow
"oderwat.indent-rainbow",
// vscode-styled-components
"styled-components.vscode-styled-components",
// GraphQL: Syntax Highlighting
"GraphQL.vscode-graphql-syntax",
// Thunder Client
"rangav.vscode-thunder-client",
// Phind.com - Chat with your Codebase
"phind.phind"
]
}
}
}追加の拡張機能や設定がある場合は追加で指定します。
次にdocker-compose.ymlを作成します。
services:
# リバースプロキシの設定
nginx-proxy:
container_name: nginx-proxy-sample
# ビルドコンテキストを指定
build:
context: ./proxy
dockerfile: ./Dockerfile
# 任意のイメージ名を指定する
image: nginx-proxy-sample:1.0
ports:
# ホストOS側で8090番を公開し、nginx-proxy コンテナの80番ポートへマッピングする
# jwilder/nginx-proxy:alpine はデフォルトで80番ポートでアクセスを受け付ける
- 8090:80
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
# Gatsby.js を動作させる Node.js の設定
app:
container_name: gatsby-develop-sample
# ビルドコンテキストを指定
build:
context: ./node
dockerfile: ./Dockerfile
image: gatsby-develop-sample:1.0
environment:
# devcontainerでGatsbyのTelemetryの表示をoffにする
# 参考: https://bit.ly/3Y7VNgC
- GATSBY_TELEMETRY_DISABLED=1
# リバースプロキシの test.example.com や 192.168.10.10 へのアクセスはこのコンテナに転送する用に指定
- VIRTUAL_HOST=test.example.com,192.168.10.10
# リバースプロキシの転送ポートが 8000 になるように指定（gatsby develop で起動するサーバのデフォルトポートは 8000）
- VIRTUAL_PORT=8000
volumes:
- ../:/workspace:cached今回、他に 80 番ポートで動作させているコンテナがあるので8090:80としていますが、他に 80 番ポートを使用しているコンテンがなければ80:80としても問題ありません。
最後に各コンテナのDockerfileを作成します。同時にディレクトリも作成して下さい。
FROM node:22.12.0-alpine3.21
RUN apk update && apk upgrade && \
apk add --no-cache python3 make g++ git yarn bash tzdata sudo && \
cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
echo "Asia/Tokyo" > /etc/timezone && \
yarn global add gatsby-cli && \
# 不要なキャッシュやファイルを削除
rm -rf /var/cache/apk/*
# nodeユーザーにroot権限を追加
echo 'node ALL=(ALL) NOPASSWD: ALL' >> /etc/sudoers
WORKDIR /workspace
# フォアグラウンドプロセスを実行する方法の一つ
CMD ["tail", "-f", "/dev/null"]node.js のイメージではコンテナ起動後にフォアグラウンドで動作するプロセスが無いので、起動後すぐにコンテナが停止しないようにCMD ["tail", "-f", "/dev/null"]で擬似的にプロセスを実行します。
FROM jwilder/nginx-proxy:alpinejwilder/nginx-proxyのイメージで設定する項目は特にありません。
ここまでの設定で一旦 Devcontainer でコンテナを起動してみます。
正常に起動していることが確認できました。
起動しているポートなども確認してみます。
PORTS NAMES STATUS SIZE
0.0.0.0:8090->80/tcp, [::]:8090->80/tcp nginx-proxy-sample Up 4 minutes 10.1kB (virtual 73.8MB)
gatsby-develop-sample Up 4 minutes 43.1MB (virtual 683MB)Gatsby.js プロジェクトの作成
Docker 開発環境が構築できたので、実際に Gatsby.js のプロジェクトを作成していきます。
Devcontainer を起動した状態で、Quick Startを参考に以下のコマンドを実行します。
選択肢はお好みで変更して下さい。インストールするプラグインなどが変わってきます。
$ npm init gatsby
Need to install the following packages:
create-gatsby@3.14.0
Ok to proceed? (y)
What would you like to call your site?
# 一時的なディレクトリに展開
✔ · temp-gatsby-project
What would you like to name the folder where your site will be created?
✔ workspace/ temp-gatsby-project
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· styled-components
✔ Would you like to install additional features with other plugins?
· Add responsive images
· Add an automatic sitemap
· Generate a manifest file
· Add Markdown and MDX support
Thanks! Here's what we'll now do:
🛠 Create a new Gatsby site in the folder temp-gatsby-project
🎨 Get you set up to use styled-components for styling your site
🔌 Install gatsby-plugin-image, gatsby-plugin-sitemap, gatsby-plugin-manifest, gatsby-plugin-mdx
✔ Shall we do this? (Y/n) · Yestemp-gatsby-projectというディレクトリ配下にファイルが作成されるので、これをプロジェクトのトップディレクトリ配下に移動します。
$ mv temp-gatsby-project/* ./
$ rm -rf temp-gatsby-project/以下のコマンドで開発サーバを起動します。
$ gatsby develop -H 0.0.0.0-H 0.0.0.0オプションを指定することで、外部からアクセスできるようになります。
あとは外部端末から Ubuntu の IP アドレスとポート番号を指定してブラウザからアクセスするだけです。
http://<UbuntuのIPアドレス>:8090接続元の端末の hosts ファイルに test.example.com を記載している場合はtest.example.com:8090とすることで同様にアクセスできます。
ページが正常に表示されました。
ここまでの実装を図に表すと以下のようになります。
ポイントとしてはリバースプロキシ側で受けるポートと、そのアクセスをどのコンテナに転送するのか指定するためのVIRTUAL_HOSTと Gatsby の開発サーバのデフォルトポートとVIRTUAL_PORTの設定を合わせるところでしょうか。
最後にpackage.jsonのコマンドを以下の用に修正しておきます。
"scripts": {
- "develop": "gatsby develop",
+ "develop": "GATSBY_ACTIVE_ENV=development gatsby clean && gatsby develop -H 0.0.0.0",
- "start": "gatsby develop",
- "build": "gatsby build",
+ "build": "GATSBY_ACTIVE_ENV=production gatsby clean && gatsby build && gatsby serve",
"serve": "gatsby serve",
"clean": "gatsby clean"
},まとめ
今回は Devcontainer を使用して Docker 上に Gatsby.js の開発環境を構築し、別の PC（Ubuntu）上に構築した Docker 開発環境を外部端末（Windows）からアクセスできるように設定しました。
一度作ってしまえば Docker が動く環境であれば使い回せると思うので、自分のプロジェクトにあった Docker 開発環境を構築してみてください。
今回作成した環境はGitHubに公開しています。
