【Dev Container】GatsbyJS開発環境をお手軽構築

プログラミング
2024.06.20
記事内に広告が含まれています。

※当サイトは、アフェリエイト広告を利用しています

フロント分からん過ぎて将来が不安になったので、とりあえずGatsby触ってみようと思い環境構築してみました。

WSL2(Ubuntu) + Dev Container + GatsbyJS + Tailwind CSS + TypeScriptという構成でやっていくので、興味がある方はぜひお試しください！
※筆者の実行環境はWindows11です。

スポンサーリンク

WSL2(Ubuntu)のインストール

Ubuntu上に構築するため、まずはWSL2(Ubuntu)をインストールします。
※おま環かもしれませんが、Windows上に構築したGatsby開発環境だとビルド各種がめちゃくちゃ遅かったです…

PowerShellを起動して以下を実行

wsl --install -d Ubuntu

Enter new UNIX username:と表示されるので、適当なユーザー名を入力する

Enter new UNIX username: ubuntu

New passwd、Retype new passwordと表示されるので、適当なパスワードを2回入力する

New password: hoge(入力中は見えない)
Retype new password: hoge(入力中は見えない)

Windowsのエクスプローラーを開き、アドレスバーに「\\wsl$」と入れて検索
画像のようにUbuntu…が表示されていればOK

スポンサーリンク

UbuntuにDockerをインストール

Ubuntuを起動する

dockerのセットアップスクリプトを取得

curl -fsSL https://get.docker.com -o get-docker.sh

セットアップスクリプトを実施
※sudo～を入力するとパスワードを聞かれるので、Ubuntuインストール時のパスワードを入力

sudo sh get-docker.sh
password for ubuntu:

sleep 20と表示されたら、インストール完了まで待機
結構長いので気長に待つ

WSL DETECTED: We recommend using Docker Desktop for Windows.
Please get Docker Desktop from https://www.docker.com/products/docker-desktop/


You may press Ctrl+C now to abort this script.
+ sleep 20

Ubuntuインストール時に作成したユーザーでdockerを実行できるよう権限を設定

sudo usermod -aG docker $USER

PowerShellを起動して以下を実行

wsl --shutdown

再度Ubuntuを起動して、dockerが動作することを確認

docker version

以下のようにバージョンが表示されればOK

Client: Docker Engine - Community
 Version:           26.1.4
 API version:       1.45
 Go version:        go1.21.11
 Git commit:        5650f9b
 Built:             Wed Jun  5 11:28:57 2024
 OS/Arch:           linux/amd64
 Context:           default
...

VSCodeにDev Containerをインストールする

※VSCode自体のインストールは割愛します。

VSCodeを起動し、拡張機能の検索欄に「Remote Development」と入力
表示された拡張を開き、Installをクリック

同様の手順で「WSL」もインストールしておく
※WSL(Ubuntu)上のファイルをVSCodeから編集する場合に必要、らしい

Dev Container用のディレクトリを作成

Windowsのエクスプローラーを開き、アドレスバーに「\\wsl$」と入れて検索
Ubuntu-2…が表示されるのでクリックして、パス「Ubuntu-2…/home/ubuntu(ubuntuインストール時に作成したユーザー名」へと進む

各種ファイルを格納するディレクトリを作成
※作成したディレクトリへのショートカットをWindows側のデスクトップとかに置いとくと後々楽

Dev Container用のファイルを準備

VSCodeでDev Container用のディレクトリを開く

VSCodeの右下あたりに以下が表示されたら赤枠内のリンクをクリック

以下の改装でディレクトリとファイルを作成する

gatsby-test
└── .devcontainer
    ├── devcontainer.json
    └── postCreateCommand.sh

devcontainer.jsonに以下を記載
※extensionsはvscodeの各種拡張機能です。個人的に必要なものを詰め込んでるので、不要なものは削除してください

{
	"name": "Node.js & TypeScript",
	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
	"postCreateCommand": "/bin/sh .devcontainer/postCreateCommand.sh",
	"customizations": {
		"vscode": {
			"extensions": [
				"bradlc.vscode-tailwindcss",
				"oderwat.indent-rainbow",
				"ionutvmi.path-autocomplete",
				"ecmel.vscode-html-css",
				"mrmlnc.vscode-autoprefixer",
				"phind.phind",
				"ms-azuretools.vscode-docker"
			],
			"settings": {
				"terminal.integrated.shell.linux": "/bin/bash"
			}
		}
	}
}

postCreateCommand.shに以下を記載

npm install
npm install -g gatsby-cli

Dockerコンテナを作成

ひとつ前の手順で作成した設定ファイルでDockerコンテナを立ち上げます。

ウインドウの再読み込みが完了するとターミナルが開くので、
Done. Press any key to close the terminal.と表示されたらEnterを押して閉じる。

Gatsbyプロジェクトを作成

新規にターミナルを立ち上げてgatsbyプロジェクトの初期化を実施します。

npm init gatsby -ts

各質問に対して以下のように設定する

Ok to proceed? (y) : yを入力
What would you like to call your site?: gatsby-testを入力(何でもよい)
What would you like to name the folder where your site will be created?: (入力せずEnter)
Will you be using JavaScript or TypeScript?: TypeScriptを選択
Will you be using a CMS?: No (or I'll add it later)を選択
Would you like to install a styling system?: Tailwind CSSを選択
Would you like to install additional features with other plugins?: 何も選ばずにDoneを選択
Shall we do this?: yを入力

gatsby-test内のファイルを全て1つ上の改装に移動し、gatsby-testフォルダは削除する

.
├── .devcontainer
├── node_modules
├── src
├── .gitignore
├── gatsby-browser.js
├── gatsby-config.ts
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── tsconfig.json


ターミナルに以下を入力してgatsbyをビルドし、開発用サーバーを立ち上げる

gatsby develop -H 0.0.0.0

http://localhost:8000/にアクセスして、サンプルページが正常に表示されることを確認する

ターミナルで「Ctrlキー + Cキー」を入力し、開発用サーバーを終了する

デバッグ設定の追加

開発サーバーの立ち上げコマンド等を毎回入力するのは面倒くさいので、デバッグ設定VSCodeから実行できるようにします。

以下のように.vscodeフォルダとlunch.jsonファイルを作成する

.
├── .devcontainer
├── .vscode
│   └── launch.json
└── tsconfig.json

lunch.jsonに以下を追記する

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Gatsby develop",
          "type": "pwa-node",
          "request": "launch",
          "program": "${workspaceRoot}/node_modules/.bin/gatsby",
          "args": ["develop", "-H", "0.0.0.0"],
          "env": {
              "PARCEL_WORKERS": "0",
              "GATSBY_CPU_COUNT": "1",
          },
          "runtimeArgs": [
              "--nolazy"
          ],
          "console": "integratedTerminal"
      },
      {
          "name": "Gatsby build",
          "type": "pwa-node",
          "request": "launch",
          "program": "${workspaceRoot}/node_modules/.bin/gatsby",
          "args": [
              "build"
          ],
          "env": {
              "PARCEL_WORKERS": "0",
              "GATSBY_CPU_COUNT": "1",
          },
          "runtimeArgs": [
              "--nolazy"
          ],
          "console": "integratedTerminal"
      }
  ]
}

VSCodeのデバッグから開発用サーバーを立ち上げる

http://localhost:8000/にアクセスできることを確認し、開発用サーバーを終了する

Tailwind CSSの動作確認

Tailwindの動作確認として、サンプルページに赤い文字を追加します。

VSCodeのデバッグから開発用サーバーを立ち上げて、サンプルページを表示する

ページ上部にtailwindのimport文を追加

import * as React from "react"
import type { HeadFC, PageProps } from "gatsby"
import "../styles/global.css" ←追加

<main style={pageStyles}>の下に以下を追加

<p className="text-red-500">テストメッセージ</p>

ページに赤文字でメッセージが追加されることを確認する

まとめ

Dev Container初めて使ってみましたが、とんでもなく便利です・・・！
一回環境作ってgitにでも上げちゃえば他のPCでもWSLとdevcontainerだけ入れれば、すぐに環境構築完了ですね。

GatsbyJS自体については全くの素人なので、何か知見を得られたらまた記事にしようと思います。
あと、今回の手順で不明な点があったら、お気軽にお問い合わせください！

ではでは！

↓Gatsby入門用に以下を買ってみました。


スポンサーリンク
タイトルとURLをコピーしました