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