react+typescriptの環境をDocker+VScode Remote-Containerで試してみる。

VScodeのRemote developmentを使うとDockerで開発環境を共有できるらしい。
これならプロジェクト内で環境の統一ができるし、WindowsでもLinuxでも同じように開発できる。

シリーズ記事一覧

準備

必要なツール

VScode
Docker Desktop(またはdocker, docker-composeコマンド)

VScodeのRemote Developmentプラグインをインストールする。

動作確認はWindows10とFedora36で行っている。

環境作成

まずは空の開発環境をvscode+dockerで作成する。
空のプロジェクトフォルダを作成し、そこに.devcontainerフォルダを作成する。

※VScodeのRemote-ContainerではMicrosoftの配布しているalpineやnodejsのイメージが標準で用意されているが、色々とカスタマイズしたいのでalpineから構築する。
標準のイメージを使用するならdevcontainer.json等を作成せずにOpen Folder in Containerを実行する。

devcontainer.jsonファイル、docker-compose.ymlファイル、Dockerfileファイルを作成する。
devcontainer.jsonとdocker-compose.ymlのサンプルは以下からダウンロードできる。

Dockerfile

FROM alpine:3.16

RUN adduser --disabled-password vscode

RUN apk add bash

WORKDIR /workspace

USER vscode

docker-compose.yml

version: '3.8'
services:
  dev:
    image: sample-react-express-dev

    hostname: dev

    user: vscode

    build:
      context: .
      dockerfile: Dockerfile

    volumes:
      - ..:/workspace:cached,z

    command: /bin/sh -c "while sleep 1000; do :; done"

devcontainer.json

{
	"name": "sample-react-express",

	"dockerComposeFile": [
		"docker-compose.yml"
	],

	"service": "dev",

	"workspaceFolder": "/workspace",

	"remoteUser": "vscode"
}

ファイルを作成したら、docker-composeでビルドできるか試してみる。

docker-compose -f .devcontainer/docker-compose.yml build

ビルドに成功したら、Ctrl+Shift+Pでコマンドパレットを開き、Remote-Containers: Open Folder in Containerと入力し実行する。

プロジェクトフォルダを選択して開く。
Dockerのビルドと起動が終わると画面が表示される。
右下のターミナルではLinuxのコマンドも使用できる。

ターミナルが表示されていない場合はCtrl+@で表示できる。
ターミナルを新しく開く場合はターミナル右上の『＋』を押す。

これでWindowsでもlinuxのコマンドが使えるので、これを元に環境を作成していく。

nodeの追加

Dockerfileにnode, npm, pnpm, typescriptをインストールする。

Dockerfile

RUN apk add nodejs=16.20.1-r0
RUN apk add npm

RUN npm install -g pnpm

RUN npm install -g typescript@4.7.4

nodeなど、apkコマンドでインストールできるのはなるべくapkでインストールする。

apkでインストールできるnodejsパッケージのバージョンは https://pkgs.alpinelinux.org/package/v3.16/main/x86_64/nodejs で確認できる。
必要なバージョンがない場合はwgetでダウンロードしたりする必要がある。

メニューの File > Close Remote Connection から一度プロジェクトを閉じる。

Dockerイメージをビルドしなおす。

docker-compose -f .devcontainer/docker-compose.yml build

Remote ExplorerプラグインのCONTAINERSから該当するコンテナを削除する。

再度Remote-Containers: Open Folder in Containerからプロジェクトを開くと反映される。

reactのプロジェクト作成

viteを使用しプロジェクトを作成する。
ターミナルで以下のコマンドを実行し、reactのサンプルプロジェクトを作成する。

pnpm create vite front --template react-ts

ポートの設定

viteは標準ではランダムなポートを使用するが、dockerだとポートを固定しておかないと都合が悪いので設定を変更する。

package.json

  "scripts": {
    "dev": "vite --port 3000 --host",

ポートを固定し、サーバ外部からアクセスできるようにする。

docker-compose.yml

    ports:
      - 3000:3000

ポート3000を開放してアクセスできるようにする。

viteの起動

コンテナとイメージを再作成する。

再度プロジェクトを開き、pnpm devで起動する。

cd front
pnpm install
pnpm dev

ブラウザからhttp://localhost:3000/にアクセスして、Vite + Reactの画面が表示されれば成功である。

git対応

git に対応するにはgitとopensshを追加でインストールする。

Dockerfile

RUN apk add openssh
RUN apk add git

.gitignore

sshの鍵をコミットしないようにgitの管理対象外にする。

/.ssh

設定を変更したら、dockerでビルドしなおしてフォルダを再度開く。
これで、.sshフォルダに鍵ファイル(id_rsa, id_rsa.pub)をコピーすればコンテナ内でgitを使用できる。

プロジェクトの配布

作成したプロジェクトは、gitで取得した後にvscodeのRemote-Containers: Open Folder in Containerで開けばすぐに開発できる状態で環境が作成できる。
環境の準備ができたらターミナルで以下のコマンドを実行するとviteの開発サーバーが起動する。

cd front
pnpm install --frozen-lockfile
pnpm dev

サンプルコード

https://github.com/betarium/sample-react-express/tree/0.1.3