# 实时开发

通过微信云托管 VSCode 插件，可以实现实时开发，即代码变动时，不需要重新构建和启动容器，即可查看变动后的效果。

## 使用教程

Step 1：安装插件

点击 [安装链接](https://marketplace.visualstudio.com/items?itemName=weixin-cloudbase.vscode-docker-wx-cloudbase) 或者通过 VSCode 搜索 “Weixin Cloudbase”，安装微信云托管 VSCode 插件。

![](https://res.wx.qq.com/op_res/5eMH4Gdt1qRNrDTfhWpBFn5hAlaxNu6PBDD1upG7L3p5Vp5leSAOy5avuOZy44k-6jW9bNYKUU5ehN40aV0Olw)

Step 2：检查容器

打开项目，检查微信云托管容器是否存在。

![](https://res.wx.qq.com/op_res/5eMH4Gdt1qRNrDTfhWpBFqEqzhmgIHrZO00W_6EqXLxvB0QbKodqRMwQiX525KXfXCT5cO0hBlvPSssW58RPAw)

Step 3：选择 Live Coding

右键点击需要调试的容器，选择 Live Coding，将自动生成 Dockerfile.development 和 docker-compose.yml 2 个文件并启动容器。

![](https://res.wx.qq.com/op_res/5eMH4Gdt1qRNrDTfhWpBFvNTpwDb67LB8dBJtOnT6A9AFFXNR-LLcLoOAzE_aKYkg4DQVbxNK3no2IVd1d3lPA)

Step 4：访问服务

启动容器后，将提示访问地址，点击即可访问服务。

![](https://res.wx.qq.com/op_res/5eMH4Gdt1qRNrDTfhWpBFhHkzYhNZPJRv2tdESbkVi6vQyWSK5fC9Su3PwvNxKZh47m6xylrOf3uozsHgZpgrA)

Step 5：停止服务

开发任务结束后，可右键点击运行中的容器，选择 Stop，即可停止服务。

![](https://res.wx.qq.com/op_res/5eMH4Gdt1qRNrDTfhWpBFtD1gsPZ9W2EAsPAUZ5dxSjvumuCN_p53p9Vgeblvk24SSCLybO-GPcQD5qD94T7QA)

通过实时开发能力，代码改动不再需要重新构建镜像和启动容器，一键保存即可查看改动后的效果，高效又便捷。

## 开发模式的 Dockerfile

实时开发使用项目目录下的 `Dockerfile.development` 作为开发期间的容器的 `Dockerfile`。

大多数情况下，插件将根据项目的 `Dockerfile` 自动生成本文件，不需要手动编写。

开发模式的 Dockerfile 与正式模式的 Dockerfile 的区别在于：
- 单阶段构建
- 将编译命令转换为启动命令，如 Spring Boot 模板的 `mvn package` 会转换为 `spring-boot:run`
- 拉取实时开发的工具套件，安装到 `/usr/bin` 下
- 通过实时开发工具套件启动用户程序，在代码发生更改时，自动重启进程。

参考示例如下：

```dockerfile
FROM ccr.ccs.tencentyun.com/weixincloud/wxcloud-livecoding-toolkit:latest AS toolkit # 拉取实时开发套件（nodemon）
FROM node:12-slim # 运行时容器
COPY --from=toolkit nodemon /usr/bin/nodemon # 复制套件到容器
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install --only=production
COPY . ./

CMD [ "nodemon", "x", "node index.js", "w", "/usr/src/app", "e", "java, js, mjs, json, ts, cs, py, go" ] # 使用 nodemon 启动应用
```

## 开发模式的 docker-compose.yml

实时开发将使用项目目录下的 `docker-compose.yml` 将当前目录映射到容器中。

大多数情况下，插件将根据项目的 `Dockerfile` 自动生成本文件，不需要手动编写。

可以参考如下的 `docker-compose.yml` 结构，按需修改：

```yaml
version: '3'
services:
  app:
    build: 
      context: . # 构建上下文
      dockerfile: Dockerfile.development
    volumes:
      - .:/app # 需要映射的目录（即代码目录）
      - /app/node_modules # 映射 node_modules 目录，如果有构建产物与代码目录同级，需要单独映射避免无法运行
    ports:
      - 27081:80 # 监听端口，主机端口：容器端口
    container_name: wxcloud_wxcloudrun-express # 容器名称
    labels: # 容器标签，一般不需改动
      - wxPort=27082
      - hostPort=27081
      - wxcloud=wxcloudrun-express
      - role=container
    environment:
      # 使用本地调试 MySQL 时，需要填入如下环境变量，并启动 MySQL 代理服务
      - MYSQL_USERNAME=
      - MYSQL_PASSWORD=
      - MYSQL_ADDRESS=
networks:
  default:
    external:
      name: wxcb0 # 容器网络打通，一般不需改动
```

## 注意事项与 FAQ

### 兼容性

实时开发目前兼容如下的模板：

- NodeJS 官方模板（Express，Koa）
- Java 官方模板（Spring Boot）
- PHP 官方模板（ThinkPHP，Laravel）
- Python 官方模板（Django，Flask）
- .NET 官方模板（ASP.NET Core）

部分语言框架的依赖不支持动态加载形式，会报如下类似的错误，遇到这种情况属于依赖自身问题，请先用其他的开发模式。

``` bash
Dynamic loading not supported
```

### 容器配置文件

首次使用实时开发时，会自动识别项目内是否已存在 `Dockerfile.development` 和 `docker-compose.yml` 文件，如果存在，则不会生成新的文件。如需重新生成，可以删除这两个配置文件后重新启动实时开发。

实时开发也支持 VPC 网络打通和微信开发者工具本地调试，使用方式与普通启动一致。

### Windows 下实时开发不生效的问题

受限于 Docker 在 Windows 下的文件系统实现，非 Edge 版本的 Docker Desktop 无法接收文件修改事件。可以启用 `--legacy-watch` 参数让实时开发套件使用传统的文件监控机制，但会占用更多的 CPU 资源。

```Dockerfile
# Dockerfile.development
CMD [ "nodemon", "--legacy-watch", ...] # 增加 --legacy-watch 参数
```