vue公众号项目打包成html5并通过ngrok进行内网穿透
一 使用前说明:
- 需要安装Hbuilder,并且在里面配置svn
- 需要安装微信开发者工具
- 需要有内网和线上服务器,内网和线上服务器中都安装了docker
- 线上服务器中安装ngrok,并且有对应的域名,如果是需要微信支付还需要AppId、Secret,WebUrl、充值消息模板
- 本地下载了ngrok
- 有对应的商务号、微信公众号(充值需要,其余的时候不需要)
- 能看懂vue、html5
- 能使用vim编辑配置文件
二使用svn下载vue项目
svn的路径 | windows存放安装位置 | 内网服务器存放安装位置 |
http://192.168.20.101/svn/tw/projects/saas_platform/web/wechat-web-customer-vant | F:\work\project\nenghaotong_new\unpackage\dist\build\h5 | /docker/nginx/www/deploy/nenghaotong_new |
三hbuilder中导入vue项目
四修改配置文件
注意:将内网和线上的配置文件都改为本地地址
本地配置
线上配置
五启动公众号代码,查看公众号代码是否正常
本地进行验证公众号是否可以正常运行
之后会在微信开发者工具中打开公众号
一般是localhost:8080
把ip换成本地ip
六将公众号打包为h5
七将打包好的代码通过xftp传到内网环境中
八 在内网的环境中配置nginx的配置
cd /docker/nginx/conf
vim nginx.conf
server {
listen 8107;
server_name localhost;
location ^~ /user_api/{
proxy_pass http://192.168.20.113:8073/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header From www.weixin4j.org;
proxy_set_header Cookie $http_cookie;
}
location ^~ /term_api/{
proxy_pass http://192.168.20.113:8074/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header From www.weixin4j.org;
proxy_set_header Cookie $http_cookie;
}
location ^~ /rech_api/{
proxy_pass http://192.168.20.113:8072/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header From www.weixin4j.org;
proxy_set_header Cookie $http_cookie;
}
location / {
charset utf-8;
root html/deploy/nenghaotong_new/;
index index.html;
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
if ($request_filename ~* .*\.(?:js|css)$) {
expires 30m;
}
if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) {
expires 30m;
}
}
}
九 重启nginx
docker restart nginx
十启动线上的ngrok
docker restart ngrok
十一配置本地的ngrok服务
ngrok.cfg
server_addr: "ngrok.tw-iot.cn:4443"
trust_host_root_certs: false
tunnels:
test:
proto:
http: 192.168.20.112:8107
start.bat
ngrok.exe -config=ngrok.cfg start test
双击start.bat
十三 微信公众号访问
注意:绑定房间的时候,用户的openId必须完整
通过网址访问:
http://test.ngrok.tw-iot.cn/?orgId=anyone&openId=abcd
十四 充值
如果希望充值成功,需要启动recharge服务,并且在113中修改它的配置
cd /docker/config/saas-service-recharge
vim saas-service-recharge
#callback.host=http://test.ngrok.tw-iot.cn
callback.host=http://test.ngrok.tw-iot.cn/rech_api