Zenn
🐷

VSCodeのRemote Containersを使ってReact+viteの開発環境を構築してみる

2022/06/05に公開
Docker
React
VS Code
Vite
remotecontainers
tech

はじめに

VSCodeのRemote Containersを使ってReact+Viteの開発環境の構築をしてみました。

Remote Containersを使うとランタイムだけでなく、VSCode自体もコンテナ内で実行することができ、VSCodeの拡張機能さえも簡単に開発者間で統一するといったことが可能になります。

DockerとVSCodeさえあれば手軽に開発環境が手に入るのでかなり便利な機能です✨

VSCodeのRemote Containersについての詳しい解説は公式ドキュメントや他の方が執筆されている記事をご参考ください
https://code.visualstudio.com/docs/remote/containers

事前に必要なもの

環境構築手順

適当なディレクトリを作成して、gitの初期設定を行う

terminal
$ mkdir react-learn
$ cd react-learn
$ git init

以降コミットタイミングなどは省略しますが、適宜必要なタイミングでコミットしてもらえるといいと思います🙇‍♂️

docker-compose.yaml を作成する

docker-compose.yaml
version: "3.3"
services:

  front:
    image: node:18
    working_dir: "/workspace"
    volumes:
      - ./:/workspace:cached

      # Volume Trick: Docker内のnode_modulesをホストマシンに持ち込ませない & node_modulesをキャッシュする
      - front_node_modules:/workspace/node_modules

volumes:
  front_node_modules

コンテナを起動するための docker-compose.yaml をルートディレクトリに作成します。
ポートフォワーディングや実行コマンドなどはローカル環境やCI/CD環境によって変わることが想像されるので、こちらには記載しないことにします。

node_modules をボリュームマウントしていますが、これはコンテナ内のnode_modulesをホストマシンと同期させないためのテクニックになります。

dockerコンテナを使って npm init vite を実行する

コンテナのnpmを使ってReactプロジェクトを作成します。
今回はviteを使いたいので、initilizerにviteを指定しています

terminal
$ docker compose exec front npm init vite
Need to install the following packages:
  create-vite
Ok to proceed? (y)
✔ Project name: … react-learn
✔ Select a framework: › react
✔ Select a variant: › react-ts

これで一つネストされたreact-learnディレクトリにプロジェクトが作成されます。
このままだと不便なので、資材をルートディレクトリ直下に移動させます

terminal
$ mv react-learn/* .
$ rm -rf react-learn

npm init vite . とすれば、カレントディレクトリにプロジェクトが展開されますが、docker-compose.yamlや.gitなどが削除されてしまうため、今回は行っていません。

DevContainerの準備をする

VSCodeのRemote Containerを使うためにDevContainerの準備を行います。
作成するファイルは以下の2つです

  • .devcontainer/docker-compose.dev.yaml
  • .devcontainer/devcontainer.json
.devcontainer/docker-compose.dev.yaml
version: "3.3"
services:

  front:
    command: sh -c "npm install && npm run dev"
    ports:
      - 3000:3000

npm installとnpm run devを実行するようにcommandに記載しておきます。
またポートフォワーディングの設定を記述しておきましょう。

.devcontainer/devcontainer.json
{
    "name": "front",
    "dockerComposeFile": [
	"../docker-compose.yaml",
	"docker-compose.dev.yaml"
    ],
    "service": "front",
    "shutdownAction": "none",
    "workspaceFolder": "/workspace",
    "extensions": [
	"dbaeumer.vscode-eslint",
	"esbenp.prettier-vscode"
    ],
    "settings": {
	"terminal.integrated.defaultProfile.linux": "bash",
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[javascript]": {
	    "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
	    "editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
	    "editor.defaultFormatter": "esbenp.prettier-vscode"
	}
    }
}

dockerComposeFileにdocker-compose.yamlとdocker-compose.dev.yamlを指定します。
docker-compose.yaml を指定した場合は、serviceの指定も必要になります。

またRemote Containersでは拡張機能やVSCodeの設定を指定することもできます。
ここではESLintとPrettierまわりの設定を指定します。

ホストマシンからコンテナにアクセスできるように vite コマンドに --host を指定する

package.json
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },

ホストマシンからコンテナには外部ネットワークからのアクセスになるのでそのままでは接続できません。
そのため --host 0.0.0.0 を指定して外部ネットワークからアクセスできるようにします。

VSCodeでRemote Containersを起動する

VSCodeを開き、左下の緑色の部分をクリック

Reopen in Containerを選択する

これでdockerコンテナが起動し、コンテナ内でVSCodeが開いた状態になるはずです。

ブラウザで　http://localhost:3000 にアクセスし、いつものReactの画面が出ればokです🍻

src/App.tsx などを編集すると、変更が即座に反映されHMRが有効になっていることも確認できると思います。

もしエラーが発生してしまう場合は一度コンテナを立ち上げるとうまくいくかもしれません

terminal
$ docker compose -f docker-compose.yaml -f .devcontainer/docker-compose.dev.yaml up

まとめ

VSCodenのRemote Containersを使うことでホストマシンの環境を汚さずに開発環境の構築を行うことができました。

nodeの開発環境を作成する際はnodebrewやnなどでバージョン管理するのが基本になると思いますが、Remote Containersを使ってDockerに環境を閉じ込めることでお手軽にnodeのバージョンをチームで統一することができると思います

Discussion