VScode+Dockerでreactの開発環境を共有してみた

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

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

## シリーズ記事一覧

https://qiita.com/betarium/items/f692b6221ece484cefce

## 準備

### 必要なツール

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

VScodeの[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)プラグインをインストールする。

動作確認は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のサンプルは以下からダウンロードできる。

https://github.com/microsoft/vscode-dev-containers/tree/v0.245.0/containers/docker-existing-docker-compose/.devcontainer

### 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```と入力し実行する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372771/d6ce2b4b-8056-549f-b738-5f027337e94d.png)

プロジェクトフォルダを選択して開く。
Dockerのビルドと起動が終わると画面が表示される。
右下のターミナルではLinuxのコマンドも使用できる。
> ターミナルが表示されていない場合はCtrl+@で表示できる。
> ターミナルを新しく開く場合はターミナル右上の『＋』を押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372771/7a20ce67-af94-5a05-5d9d-6d7d9e011243.png)

これで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から該当するコンテナを削除する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372771/e8cd8dce-7838-9e74-efa1-b1565e5d6d12.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372771/6b1ac2ff-7afc-a6f8-a42c-2b0fa404f328.png)

## 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の画面が表示されれば成功である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372771/5ea266d3-5346-4b63-7ab9-24b724ef9cbe.png)

## 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](https://github.com/betarium/sample-react-express/tree/0.1.3)