Dockerでreact-three-fiber環境構築【2023】

# はじめに
- 前提として、Dockerとnodeとnpmをインストールしておく必要があります。
- ホットリロードの設定も行っているので、リアルタイムで開発できます。
- キャッシュや.dockergitgnoreを使って出来るだけ最適化しました。(つもり)
- react-three-fiberの環境構築というタイトルですが、reactアプリの作成してからreact-three-fiberを導入するのでほぼ一緒です。
- reactアプリを構築するときにも使えます。

## 最終フォルダ構成
![フォルダ構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/265e0234-7525-8da8-7a06-ad1564c2a134.png)


# 手順

## reactプロジェクトの作成
- Reactアプリケーションを作成するためのコマンドです。
- react-appというのがプロジェクト名(なんでもいい)で、react-appというディレクトリが作成されます。
- プロジェクト名：react-app

```dockerfile
#typescriptの場合
npx create-react-app react-app --template typescript
#jsvascriptの場合
npx create-react-app react-app
```

## プロジェクト内に移動
- `cd react-app`で先ほど任意の名前で作成したディレクトリに移動します。



## Dockerfileの作成
- `npm install`を行う前に、`package.json`と`package-lock.json`をコピーしています。
- これは、キャッシュを有効に活用するうえで大事です。
- こうすることで、パッケージの追加変更がない場合は、`npm inatall`をスキップしてくれます。

```dockerfile
FROM node:20-alpine
ENV NODE_ENV=development

WORKDIR /usr/src/app

COPY package.json package-lock.json .
RUN npm install

COPY . .
```

## docker-compose.ymlの作成
- バインドマウントなどを設定します。
- 開発用の場合、バインドマウントを設定しないとコンテナとローカルが同期しないので、コードの変更がすぐに反映されません。
- ちなみに、`ports:3001:3000`だと、`localhost:3001`でアクセスできるようになります。
- サービス名は、なんでもいいです。プロジェクト名と同じにしました。
- サービス名：react-app


```yaml
version: "3"

services:
  react-app: #サービス名
    build: .
    volumes: #バインドマウント
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"

```

- ちなみに、DockerDesktopだと、こんな感じで構成されます。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3525798/ce6e6f81-684c-5c63-ff56-6e62169d5d41.png)



## .dockerignore ファイルの作成
- これは、やらなくても動きます。ビルド時間を高速、イメージサイズの縮小を行いたい場合は、やってください。
- node_modulesを含めずイメージを作成してくれます。

```
node_modules
```

- ちなみに、.dockerignoreを作った場合と、作らなかった場合のイメージサイズの差は以下です。
```
my_image  without_ignore   e81679e750c2   35 seconds ago   887MB ←作らなかった場合
react-app-react-app  latest 3b4226fc0f36  33 minutes ago   601MB ←今回(作った場合)
```

## コンテナの作成と立ち上げ
- `docker compose up --build -d`
- `localhost:3000`にアクセスして、無事reactっぽい画像が出たらOK。
- コンテナ名(NAMES)：プロジェクト名-サービス名-連番で自動作成されていることが確認できます。

```
CONTAINER ID   IMAGE                       COMMAND                  CREATED          STATUS          PORTS                    NAMES
55db0e4caff9   react-app-react-app         "docker-entrypoint.s…"   38 minutes ago   Up 26 minutes   0.0.0.0:3000->3000/tcp   react-app-react-app-1  
```
- ここまでは、reactプロジェクトと同じです。

## react-three-fiberのインストール
- まずは、コンテナの中に入る必要があります。
`docker exec -it react-app-react-app-1 /bin/sh`
`/usr/src/app #`こうなればOKです。

:::note info
`docker exec -it コンテナ名 /bin/sh`です。
指定するコンテナ名がわからない場合は、`docker container ps`と打って、NAMESの欄に書いてます。
DockerDesktopを使っている場合は、そこからcliを開くとコマンド無しで入れます。
:::

- 以下をインストールします。


`npm install three`
`npm install @react-three/fiber`
`npm install @react-three/drei`
`npm install @types/three --save-dev` ←jsの場合は入れない。typescriptの時だけインストールする。


## ホットリロードを有効化

- `Package.json`に、以下を追加

```jsx
"scripts": {
	"start": "WATCHPACK_POLLING=true react-scripts start",
```

- 変更が即反映されるようになる

# まとめ
- 今回は、開発用の環境開発を行いました。
- Dockerfileとdocker-compose.ymlは、開発用と本番用に分けたほうがいいらしいです。
- 開発用は、バインドマウントの設定、開発に便利なパッケージなど、本番用では不必要なものも含みます。
- 本番環境では、マルチビルドを用いて、ビルドに必要なものだけを含め最小化することが大事です。

# ちなみに
今回は、プロジェクト名、サービス名、コンテナ名は以下になっています。
- プロジェクト名：react-app
- サービス名：react-app
- コンテナ名：プロジェクト名-サービス名-連番

名前についてもっと知りたい方は以下を参考にしてください



https://qiita.com/satodoc/items/188a387f7439e4ec394f