微信H5开发环境配置指南(全)

https://images.unsplash.com/photo-1594909122845-11baa439b7bf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

微信H5想要真机开发没有小程序那么方便,都需要授权安全域。为此把内网地址映射到公网上十分必要。经过我两天的尝试,试了一些穿透工具,只有自建+frp是最满意的结果,其他方式都基本不可用或者需要花钱才能达到可用。我总结如下。

花生壳

这个不多说免费没有80端口,也不固定域名。付费门槛又很高1000+年付。放弃。

ngrok

官网 https://ngrok.com/download 。ngrok MACOS 下使用手册是这样。

brew install ngrok

# 执行一次
ngrok authtoken 1zV8rQjxw26eJcblhMbn19hJbyP_6UvUJm8gjd6JxKBwY1d5C

# 不花钱每次域名不一样,凑活用用了···
ngrok http 8090

参考了这个教程。8090 用来指定本地的端口。但是 ngrok 免费版限制很多,比如只能启动一个域名 ,且域名每次不一样就很麻烦,且境外服务器访问巨慢。

natapp 付费

付费一年91也不贵,支持域名转入,支持80端口,感觉不错适合我的需要。但是我是付费之后才想到自己可以在服务器上用 frp 做端口转发,有点小后悔。假如没有服务器,可能要买两个隧道?一个前端一个后端来着。

frp 自建

想到我自己服务器不少,就用开源的 frp 来做内网穿透。在服务端这样设置 frps.ini。xxxx.com 是你的主域名。vhost_http_port 是复用的一个 http 端口 7001。通过 x.xxxx.com:7001 访问本地的服务。

[common]
bind_port = 7000
vhost_http_port = 7001
subdomain_host = xxxx.com

在客户端我这样设置。x 是二级域名

[common]
server_addr = 1.117.112.71
server_port = 7000 
[h5]
type = http 
local_port = 8000 
subdomain = x

主要参考了这篇文章。但是这也有个问题。微信要80端口,7001 端口不支持站内打开。为此要在服务器上起一个nginx,将一个域名代理到后面 frps。(这是我再natapp下单之后才想到的,损失90···,好心疼)。下面是我的 nginx.conf 配置。

server {
    listen      80;
    server_name testh5.zszhikao.com;

    location / {
        proxy_pass  http://xxx.com:7001;
        # if BACKEND_URI is using TLS/SSL with SNI, this is important!
        # proxy_ssl_server_name on;
        proxy_redirect  off;
        proxy_set_header  Host  $proxy_host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Host  $server_name;
    }

}

server {
    listen      80;
    server_name testserver.zszhikao.com;

    location / {
        proxy_pass  http://xxx.zszhikao.com:7001;
        # if BACKEND_URI is using TLS/SSL with SNI, this is important!
        # proxy_ssl_server_name on;
        proxy_redirect  off;
        proxy_set_header  Host  $proxy_host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Host  $server_name;
    }

}