前后端分离状态下，如何搭建微信公众号网页的本地开发环境？

需求分析

进行微信公众号网页开发的时候，微信平台一般有如下几个要求：

1. 必须是 https 协议
2. 通过验证的可信域名

开发过程中一般有如下几个需求：

1. 本地开发，正常调用微信 API，实时调试。
2. 和正常浏览器一样的开发体验。

开发环境配置

1. 基础设置

构建工具都自带了 web 服务器，但是对于配置 https 以及自定义域名不是很友好。所以一般通过反向代理来实现自定义域名以及 https：

假设开发服务器地址为：http://192.168.2.3:8081，通过 Nginx 进行反向代理，Nginx 配置如下：

location / {proxy_pass http://192.168.2.3:8081;}

将指定域名解析到局域网 IP 或者 127.0.0.1，然后绑定到本地 Nginx 站点，这样就可以通过 Nginx 绑定的指定域名访问开发服务器了。

然后把这个域名添加到微信公众号的可信域名，同时在 Nginx 配置好 https。

此时已经可以在微信开发者工具内，正常访问开发环境，并调用微信 js Api。

2. 问题解决

通过反向代理服务器访问后，会导致用于实时刷新的 websocket 无法正常链接，所以我还需要对开发服务器的 websocket 进行反向代理。

为了避免和上一个反向代理配置产生冲突，我们需要对 websocket 的访问地址进行一些调整，vite 配置为例：

server: {
        host: "0.0.0.0",
        port: 8081,
        hmr: {
            path: "/ws",
            /* 指定客户端热重载的端口 */
            clientPort : 443
        }
}

上面将 websocket 地址调整到了 ws 目录，所以可以在 Nginx 内新增一个配置块进行反向代理：

location /ws {
     proxy_pass http://192.168.2.3:8081;
     proxy_http_version 1.1;
     proxy_read_timeout 3600s;
     proxy_send_timeout 300s;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
}

Ok，大功告成！尝试一下你会发现微信公众号网页开发原来也可以如此丝滑！

3. 手机端访问

将手机（wifi）和用于开发的电脑连接到同一个局域网，将指定域名解析到你本地的局域网 IP，一切准备妥当之后，可以直接在手机微信端访问本地开发环境的服务器地址。