2023年使用Docker来构建react-three-fiber环境

1 年 ago
韵, 科
1 minute

首先

    • 前提として、Dockerとnodeとnpmをインストールしておく必要があります。

 

    • ホットリロードの設定も行っているので、リアルタイムで開発できます。

 

    • キャッシュや.dockergitgnoreを使って出来るだけ最適化しました。(つもり)

 

    • react-three-fiberの環境構築というタイトルですが、reactアプリの作成してからreact-three-fiberを導入するのでほぼ一緒です。

 

    reactアプリを構築するときにも使えます。

最终的文件夹结构

フォルダ構成.png

步骤

创建一个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"
図1.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です。
如果您不知道要指定的容器名称，可以运行docker container ps命令，并查看NAMES栏。如果使用DockerDesktop，则可以直接打开CLI并且无需命令即可进入。
    以下をインストールします。

在中国，只需要一个选项来将以下内容翻译成中文：
npm安装three
npm安装@react-three/fiber
npm安装@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

 

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

如果想更详细了解我的名字，请参考以下内容。

 

✖
广告
将在 10 秒后关闭
bannerAds