この記事は「MMAブログリレー」の第6回の記事です。
前回の記事は、ctes091xくんの「Androidで学内限定ページを見るときはSSH Dynamic Port-Forwardingを使う【#電通大はAndroidでVPNを使わせろ】」でした。
ブログリレーの様子を見る感じ、学内向けアドバイスが多いっぽいです。
やろうとしていること
「Windowsで動いているVSCodeのDevContainerで、WSLで動いているDockerコンテナを実行環境とするNext.jsの環境構築」が目標です(日本語が難しい)。
要は環境構築で楽をしたいのです1。「このパソコンNode.js入れてなかった～」とか「PATH通して無かった」とか「Windowsのコマンドの書き方よくわからん」っていうのを減らしたかったのです。複数人での共同作業とかサーバーにデプロイすることも考えたらDockerコンテナを実行環境として用いるメリットはさらに大きくなります。
ちなみに、Next.js自体の学習は進んでないです。
私の環境
| ホストOS | Windows 11 |
| WSL2のディストリビューション | Ubuntu 24.04.4 LTS |
| VSCodeのバージョン | 1.110.0 |
手順
WSLへのDockerのインストール
こちらのコピペでできます。
# Add Docker's official GPG key:
sudo apt update
sudo apt install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
# Add the repository to Apt sources:
sudo tee /etc/apt/sources.list.d/docker.sources <<EOF
Types: deb
URIs: https://download.docker.com/linux/ubuntu
Suites: $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}")
Components: stable
Signed-By: /etc/apt/keyrings/docker.asc
EOF
# Install
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
ユーザをdockerグループに追加
sudo usermod -aG docker $USER
docker用のユーザーグループがあるのでユーザを追加します。これでいちいちsudoをつける必要がなくなります。
使い捨てのコンテナでファイルを作る
以下コマンドをWSL内で実行します。
docker run --rm -it -v ${PWD}:/app -w /app node:latest npx create-next-app@latest .
| オプション | 意味 |
|---|---|
| --rm | 実行が終わったらコンテナを破棄 |
| -it | ターミナルを表示させ、かつ、入力もできるようにする。 前者が-iの効果、後者が-tの効果で、両者を組み合わせることが多いそうです。 |
| -v ${PWD}:/app | カレントディレクトリをコンテナ内の/appにマウントする |
| -w /app | コンテナ内の/appを作業ディレクトリとする |
| node:latest | nodeの公式イメージはたくさんあるそうですが、よくわからんかったらこれを使えばいいそうです。 他にも、軽量なalpineベースのイメージもあります。 |
| npx create-next-app@latest . | コンテナ内で実行されます。 /appにnext.jsのプロジェクトを作ります。 |
Next.jsのプロジェクトの初期状態のファイルを作ります。ホストPCにNode.jsが入ってないことも考えて、使い捨てのコンテナから作りました。nextjsの設定を聞かれるのでお好みで。
VSCodeへの拡張機能のインストール
Dev Containers(ms-vscode-remote.remote-containers)とWSL(ms-vscode-remote.remote-wsl)をインストールしました。
コマンドパレット(Ctrl+Shift+P)より表示: リモートエクスプローラーを表示を選び、Dockerを入れたWSL環境を選びます。
cd ~
mkdir nextapp
code nextapp
のように**ホームディレクトリ上に(後述)**適当なフォルダを作り、vscodeで開きます。
VSCodeをコンテナにつなぐ
Next.jsのファイル群と同じ位置に.devcontainerディレクトリを作り、その中に以下の内容でdevcontainer.jsonを作ります。
{
"name": "NextjsEnv",
"image": "node:latest",
"forwardPorts": [3000],
"workspaceFolder": "/app",
"workspaceMount": "source=${localWorkspaceFolder},target=/app,type=bind"
}
| オプション | 意味 |
|---|---|
| image | イメージを指定 |
| forwardPorts | コンテナの3000番ポートをローカルの3000番ポートに転送 |
| workspaceMount | VSCodeで開いてるディレクトリとコンテナの/appを同期(bind)させる |
コマンドパレット(Ctrl+Shift+P)より"Reopen in dev container"を選択します。これで、vscodeがコンテナに接続します。
pnpmのインストール(任意)
Next.jsではパッケージマネージャとしてpnpmを使うことが多いそうです。
npm install -g pnpm
でインストールしました。
開発サーバーの起動
pnpm dev
で起動します。ブラウザでhttp://localhost:3000を開いたらこんな感じになりました。ホットリロードも使えます。
ワークスペースの作成
ファイル→名前を付けてワークスペースを保存→ローカルを表示により、デスクトップ等にワークスペースを保存します。保存した.code-workspaceファイルを開いたらVSCodeのコンテナ接続までをやってくれます。
躓いたところ
重い
どうやら、Windowsの入出力とLinuxのコンテナの相性が悪いそうです。まず、私はWindowsのDockerでやろうとしていましたがこれが良くなかったです。WSLに接続することで解決できると思いましたが、そうでもなかったです。/mnt/cのようなWindows上のディレクトリにWSLからアクセスするのは相性の問題で重くなりがちだそうです。
Windowsから楽々見れたらいいだろうと思ってのに、、、
Firefoxじゃうまく見れないことがある
謎です。少なくともEdgeなら見れます。
参考
https://hub.docker.com/_/node
https://code.visualstudio.com/docs/devcontainers/containers
Docker/Kubernetes実践コンテナ開発入門
-
Dockerの学習とか試行錯誤を考えたら全然楽できなかったですが、、、 ↩