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

需求分析

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

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

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

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

开发环境配置

1.基础设置

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

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

代码语言：javascript复制

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配置为例：

代码语言：javascript复制

server: {
        host: "0.0.0.0",
        port: 8081,
        hmr: {
            path: "/ws"
        }
}

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

代码语言：javascript复制

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，一切准备妥当之后，可以直接在手机微信端访问本地开发环境的服务器地址。