首先

由于之前在以下文章中整理了后端Docker开发环境，所以这次我想整理一下构建前端Docker环境的步骤。

 

创建项目

参考了下面的文章。

 

这次我们将创建一个超简单的东西。
请先创建一个随意的项目名文件夹(这次我们用test-app)，并在其中创建Dockerfile和docker-compose.yml文件。

Dockerfile的释义是什么？

因为我通常使用稳定版本的 Version，所以将镜像设置为 18-alpine。
项目文件夹通常创建在 opt 文件夹下。

FROM node:18-alpine

WORKDIR /opt/react-test-app

docker-compose.yml的翻译是：《容器组合.yml》

我给它设计了一个简单的结构。

version: '3'

services:
  test-app:
    image: test-app
    container_name: test-app
    build: .
    restart: always
    tty: true
    volumes:
      - ./react-test-app:/opt/react-test-app

关键是将WORKDIR和volumes设置为React测试应用程序将在test-app下面创建的目录，而不是在项目根目录下（原因将在后面解释）。

在正常运行时，tty的设置只用于调试。因此，在使用nginx进行运行时，它是不必要的。我认为这些设置在任何容器中都是必不可少的。

创建Docker容器

我会启动 Docker。

$ sudo service docker start

我要启动一个容器。

$ docker compose build
$ docker compose up -d

我认为会创建一个名为 react-test-app 的文件夹。

创建一个React项目 React

我正在参考以下的网站。

 

因为在VSCode的远程探索器中应该可以看到容器，所以我们将启动它。
工作目录应该是一个空的react-test-app。

在终端上执行以下命令（我想用TypeScript编写，所以使用–template参数指定）。

$ npx create-react-app ./ --template typescript

将React项目的文件结构下移一个目录的原因是，当存在Dockerfile等其他文件或文件夹时，create-react-app命令无法正常执行。

我会试着进行动作测试。

$ npm start

调试环境设置

我会建立一个调试环境，因为现在无法设置断点或查看变量的内容。
参考了以下的网站。

 

创建 tasks.json 文件

请按照以下顺序点击上方选项卡中的“终端”、“配置任务…”、“npm start”。

将创建的tasks.json文件的所有内容清空，并替换为以下内容。

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "label": "npm: start",
            "detail": "react-scripts start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

创建launch.json文件

浏览器选择 Google Chrome。
从顶部选项卡中选择 “运行”、”添加配置”、”Web App（Chrome）”。

然后会生成一个json文件，然后将其替换为以下内容。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/src/*"
            }
        },
    ]
}

创建.env文件

为了避免启动与调试无关的浏览器，创建.env文件。

$ echo BROWSER=none > .env

如果最终的目录结构是这样的话，就可以了。

确认行动

Note: This translation may depend on the context in which the phrase is used. Please provide more context if necessary.

我会随意设置断点来验证调试功能是否工作。选择左侧选项卡中的“运行和调试”，然后点击“开始调试”（也可以按F5键）。

很好地工作着呢。

安装扩展功能

在进行开发时，需要安装必要的扩展功能。
我认为只要安装以下推荐的扩展功能，就可以了。

 

音量技巧的設定

为了不将 node-modules 挂载到主机上，我们使用了一个名为“volume trick”的中二病般的技巧。参考以下文章。

 

一度退出Docker容器，将docker-compose文件改写为以下的样式。

version: '3'

services:
  test-app:
    image: test-app
    container_name: test-app
    build: .
    restart: always
    tty: true
    volumes:
      - ./react-test-app:/opt/react-test-app
      - exception-volumes:/opt/react-test-app/node_modules

volumes:
  exception-volumes:
    name: exception-test-app

进行容器的重新生成。

$ docker compose build
$ docker compose up -d

使用此方法，在容器内安装Node模块后，不会对主机产生任何干扰。

开发环境已经建立完成了。

最后

与Python相比，React项目的目录关系和volume trick的设置等会增加一些工作流程…因为我在前端方面的经验非常浅，所以可能存在错误或不够通用的部分。如果有更好的方法，请在评论中告诉我，将不胜感激。