如何在Docker容器中编辑React/Node应用并复用其依赖？

一、能不能编辑容器内的文件并保存更改？ #

• 可以，但不推荐长期这么做：容器里的文件存储在容器可写层中，一旦容器被删除，所有修改都会丢失。如果只是临时测试修改代码，可按以下操作：
  1. 执行docker ps查看容器ID或名称
  2. 运行docker exec -it <容器ID/名称> bash进入容器终端
  3. 使用容器内的编辑器（比如nano、vim）修改文件，保存后React这类带热重载的应用会实时生效

二、能不能克隆GitHub仓库挂载到容器复用已有依赖？ #

完全可以，这是开发阶段的最佳实践，步骤如下：

1. 先将代码克隆到本地：git clone <你的GitHub仓库地址>
2. 修改Docker启动命令，把本地代码目录挂载到容器内的应用目录，同时保留容器内已安装的node_modules（避免被本地目录覆盖）：

   docker run -d -p 3000:3000 \
     -v ./本地克隆的代码目录:/app \
     -v /app/node_modules \
     <你的镜像名称>
   

   第二个-v /app/node_modules会创建匿名卷，专门保留容器内的依赖文件，这样本地业务代码会替换容器内的对应文件，但依赖还是用已经装好的版本，无需重新执行npm/yarn安装。

三、VSCode Remote-Containers插件使用步骤 #

这是最便捷的开发方式，操作流程如下：

1. 确保Docker处于运行状态，且那个依赖正常的容器（或镜像）已存在
2. 打开VSCode，点击左侧边栏的远程资源管理器（图标为<>样式），在下拉菜单中选择Containers，即可看到正在运行的容器列表
3. 找到目标容器，点击右侧的Attach to Container（加号图标），VSCode会新开窗口连接到容器内部
4. 连接成功后，点击顶部菜单文件>打开文件夹，选择容器内的应用目录（比如/app），即可直接编辑文件，修改会实时同步到容器
5. 如果要挂载本地代码到容器开发：
   • 方式一：连接容器后，点击左下角的<>图标，选择Remote-Containers: Attach Volume to Workspace...，然后选择本地代码目录挂载到容器的应用目录
   • 方式二：直接基于本地代码目录启动容器：打开本地克隆的代码文件夹，点击左下角<>图标，选择Remote-Containers: Reopen in Container，如果没有.devcontainer配置文件，VSCode会提示选择基础镜像，直接选那个装好依赖的镜像即可，之后VSCode会自动创建容器并挂载本地代码，可直接开始开发，修改本地文件后容器内的应用会实时响应

内容的提问来源于stack exchange，提问作者Michael Search