Question

• 安装 docker
• 安装 微信开发者工具最新版
• 安装 vscode Docker 拓展
• 在 VSCode 拓展栏搜索 weixin-cloudbase 然后安装

以 koa 作为后端演示

全局安装 koa-generator 脚手架.

npm install -g koa-generator

创建项目

# 使用 ejs 引擎
koa2 -e wxcloud-debug-koa

cd wxcloud-debug-koa // 进入项目根目录
npm install // 安装项目依赖

• 修改 www/bin 中的端口为 9000
• 修改 routes/index 中代码为

router.get('/', async (ctx, next) => {
  ctx.body = {
  message: '请求头',
  header: ctx.header
  }
})

打开浏览器访问 http://localhost:9000，即可在本地完成 koa 示例项目的访问。

编写 dockerfile

FROM daocloud.io/library/node:14.7.0

# 设置时区
ENV TZ=Asia/Shanghai \
  DEBIAN_FRONTEND=noninteractive
RUN ln -fs /usr/share/zoneinfo/${TZ} /etc/localtime && echo ${TZ} > /etc/timezone && dpkg-reconfigure --frontend noninteractive tzdata && rm -rf /var/lib/apt/lists/*

RUN mkdir -p /app

# 指定工作目录
WORKDIR /app

# 复制当前代码到/app 工作目录
COPY . ./

# npm 源，选用国内镜像源以提高下载速度
RUN npm config set registry https://registry.npm.taobao.org/

# npm 安装依赖
RUN npm install 

# 启动服务
CMD node app.js

EXPOSE 9000

如只在 VSCode 中同时编辑调试一个服务， 可直接打开服务代码目录作为根目录 （暂不支持 VSCode Workspace 工作区），保证根目录下有 Dockerfile 文件，插件面板中会显示该服务的名字

调试过程中因需要获取微信信息，会使用云托管 CLI Key，因此需在 VSCode 插件配置填入小程序 appid 和 cli key，点击插件面板的 ⚙ 图标打开配置：

构建镜像，启动容器

右键服务名，选择 start，将构建镜像并启动容器

可以看到构建过程

启动容器需要相应的容器配置信息（ .cloudbase/container/debug.json ），如果没有会提示创建，配置文件字段和含义如下：

其中需特别注意端口号 containerPort 、 Dockerfile 路径 dockerfilePath 、自定义环境变量 envParams

此时出现异常，我们修改 .cloudbase/container/debug.json 中的 containerPort 为 koa 服务中定义的 9000 端口，重新构建即可

容器构建和启动成功后，在插件面板状态 icon 会相应更新：

也可以通过 docker ps 查看已启动的服务

我们在云托管后台可以看到此时默认启动了一个调试服务，我们不要去修改它

此时可以请求容器了，在插件面板旁会展示两个端口号，通过第一个端口访问容器会带有微信相关信息（header 中包含 appid 等），通过第二个端口访问容器不会带有微信相关信息而是直接请求到容器内部，右键服务选择 Open in browser (via WX server) 和 Open in browser (no WX auth) 可以在浏览器中打开，分别对应这两种情况，也可以写代码或通过 POSTMAN 等工具请求

请求不经过微信服务器返回： http://127.0.0.1:27081/

不带微信信息的端口，直接访问即可，适合在浏览器调试

请求经过微信服务器返回： http://127.0.0.1:27082/

微信端口，请求时会模拟微信用户信息的 Header，如 x-wx-openid，适合微信开发者工具中使用

在微信开发者工具中，可以选择连接到 VSCode 启动的容器，从而在小程序模拟器中访问本地云托管容器

此能力需要使用微信开发者工具 v1.05.2202242 及以上版本，并更新 VSCode 插件到 v1.0.12 以上。

创建一个小程序测试项目

在 微信开发者工具 的 Docker 面板中，找到 「 Running Containers 」，右击容器名称，选择 Attach Weixin Devtools ，即可在小程序代码中，使用 wx.cloud.callContainer 访问容器。

需要退出再次 Detach Weixin Devtools

调用时，需要注意 Header 中的 X-WX-SERVICE 需要与容器名保持一致

修改小程序 app.js 代码

// app.js
App({
  onLaunch: async function () {
  await wx.cloud.init({
    // env: "其他云开发环境，也可以不填"  // 此处 init 的环境 ID 和微信云托管没有作用关系，没用就留空
  });
  const res = await wx.cloud.callContainer({
    config: {
    env: "prod-xx", // 微信云托管环境 ID，不能为空，替换自己的
    },
    path: '/', 
    method: 'GET',
    header: {
    'X-WX-SERVICE': 'wxcloud-debug-koa', // 替换成本地要调试的容器名称
    }
  });
  console.log(res); // 在控制台里查看打印
  }
})

查看请求日志

或者通过 docker logs 查看

进入终端

如果需要进入到容器内部终端调试定位问题，可以右键服务名选择 Attach Shell 进入容器内终端