使用Docker构建React的开发环境

1 年 ago

韵, 科

1 minute

首先

我已经完成了React环境的配置。
我写下了环境配置的步骤，以备忘记录。
省略了每个代码的详细信息。

对于忙碌的人来说，这是一个最终的资源。
通过运行以下命令 docker-compose up -d ，您可以暂时完成React环境的搭建。
您可以在此链接中找到更多信息：https://github.com/nonamenme/docker-react

1. 准备

请按照以下架构准备文件。

─── project
    ├── docker-compose.yml
    └── Dockerfile

各个文件的内容

version: '3.8'

services:
  frontend:
    container_name: react-app
    build:
      context: ./
    restart: always
    tty: true
    volumes:
      - ./:/app

根据需要可以更改容器名称及其他相关事项。

FROM node:17.5.0-stretch-slim

WORKDIR /app

利用创建的Dockerfile来构建镜像。

$ docker-compose build

3. 创建新项目

$ docker-compose run frontend npx create-react-app react-app
Creating network "react-app_default" with the default driver
Creating react-app_frontend_run ... done
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

如果在命令中添加–template typescript，可以使用typescript创建项目。
（例如：docker-compose run frontend npx create-react-app {项目名称} –template typescript。

4. 编辑docker-compose.yml文件

version: '3.8'

services:
  frontend:
    container_name: react-app
    build:
      context: ./
+   ports:
+     - 3000:3000
    restart: always
    tty: true
    volumes:
-     - ./:/app
+     - ./react-app:/app
+     - react-node_modules:/app/node_modules
+volumes:
+  react-node_modules:

5. 编辑Dockerfile

FROM node:17.5.0-streetch-slim

WORKDIR /app

+ COPY react-app/package.json react-app/package-lock.json ./
+ RUN npm install
+ COPY react-app/ .

+ CMD npm run start

重新创建镜像并启动容器

docker-compose up -d --build

7. 服务器已成功启动

当您打开以下URL时，我认为您会看到React的起始页。
http://localhost:3000

最后
最终

我已经将node_modules文件夹通过Docker的Volume进行管理，但是这样做会导致主机上的node_modules文件夹为空，因此在像VSCode这样的编辑器中会出现找不到ESLint模块的错误。如果不使用Volume进行管理，则主机上的node_modules文件夹也会被同步，尽管我已经创建了一个相同的环境的容器，但主机上的node_modules文件夹也可能被同步。另外，启动时间会很长…… 对于VSCode，你可以使用一个名为Remote Containers的扩展来解决，但如果还有其他好的方法，请在评论中告诉我，将不胜感激。

首先