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

はじめに

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

最終フォルダ構成

手順

reactプロジェクトの作成

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

#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をスキップしてくれます。

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

version: "3"

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

• ちなみに、DockerDesktopだと、こんな感じで構成されます。
  

.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です。

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に、以下を追加

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

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

まとめ

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

ちなみに

今回は、プロジェクト名、サービス名、コンテナ名は以下になっています。

• プロジェクト名：react-app
• サービス名：react-app
• コンテナ名：プロジェクト名-サービス名-連番

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