从零开始搭建VSCode × Docker × React × TypeScript开发环境
首先
由于之前在以下文章中整理了后端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的设置等会增加一些工作流程…因为我在前端方面的经验非常浅,所以可能存在错误或不够通用的部分。如果有更好的方法,请在评论中告诉我,将不胜感激。