微信小程序要求 web-view 控件绑定的目标域名必须是使用 HTTPS 安全协议加密的域名,即以 https 开头的域名。
本教程通过使用 Nginx 通过反向代理完成 HTTPS 配置。
操作步骤为使你的 SmobilerApp Web 版在 HTTPS 协议下运行,请依次遵从以下步骤,完成配置。
Step.1从 Nginx 官方网站下载适用于 Windows 的最新稳定版,可访问此链接:http://nginx.org/en/download.html 。
下载页面上最新的一个主线版本(Mainline version),此下载链接通常处于下图所示的位置:
Step.2解压安装包到 SmobilerService 所在服务器 的任意磁盘目录下,解压结果如下图所示。
Step.3打开 conf 文件夹,新建 sites-enabled 文件夹、 https-certifications 文件夹。结果如下图所示:
Step.4保持 conf 文件夹为打开状态,打开其中的 nginx.conf 文件并删除全部内容,使用以下内容覆盖:
worker_processes 1; events { worker_connections 1024; } http { map $http_upgrade $connection_upgrade { default upgrade; '' close; } server_names_hash_bucket_size 64; include sites-enabled/*.conf; include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
覆盖完成后,你的 nginx.conf 内容应当与下图完全一致:
Step.5在 conf 文件夹中打开 https-certifications 文件夹,并粘贴你的 HTTPS 证书文件和私钥文件在此处。
其中扩展名为 .pem 格式的文件是 HTTPS 证书文件。
其中扩展名为 .key 格式的文件是 HTTPS 私钥文件。
如果下载证书时可以选择,请选择下载适用于 Linux 的证书或者 .pem + .key 格式的证书文件。请不要下载 .pfx 格式的证书。
结果如下图所示。文件名称一定会略有差异,但扩展名一定相同。如果你的电脑配置为不显示文件扩展名,则 .pem 和 .key 后缀不会显示。请不要放入 .pfx 文件,这一扩展名的文件是用于 IIS 安装 HTTPS 证书的,而不是 Nginx 。
Step.6回到 conf 文件夹中。打开 sites-enabled 文件夹,新建一个文本文件命名为 smoapp.conf ,如下图所示:
打开 smoapp.conf 文件并使用以下内容填充:(注意其中带 # 号注释的行不可直接使用,你必须根据实际情况修改)
server { listen 80; server_name onehttps.jx.smobiler.com; # server_name 的值修改为你实际使用的域名 return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name onehttps.jx.smobiler.com; # server_name 的值修改为你实际使用的域名 client_max_body_size 1024M; # 以下两行:"fullchain.pem"、"private.key" # 修改为上一步骤中放置在 https-certification 文件夹下的 .pem 和 .key 两个文件各自的文件名 ssl_certificate https-certifications/fullchain.pem; ssl_certificate_key https-certifications/private.key; location / { proxy_set_header Host $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-Proto "https"; proxy_pass http://localhost:2324; # 修改 2324 为你 SmobilerApp 使用的 HTTP 端口号。其余部分无需修改 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } }
Step.7回到 nginx 解压的根目录下,双击绿色图标 nginx.exe 启动 Nginx 反向代理服务程序。(窗口会一闪而过,因为这是一个简单的控制台程序)。
然后你就可以在任务管理器中查看到 nginx.exe 的两个进程,其中一个为主进程,另一个为工作进程。如下图所示:
注意:
配置完成 https 协议后,你有责任确保 nginx.exe 服务随时处于正常运行的状态。SmobilerService 即不会也无法保证 nginx.exe 的运行,因为它是一个完全独立于 SmobilerService 的第三方外部反向代理服务。
有关于如何保证 nginx.exe 运行的可靠性,我们建议你可以将 nginx.exe 设置为开机自动启动, 或者借助第三方工具将 nginx.exe 安装为一个 Windows 服务。但这部分内容需要你按照实际情况自行决定采取何种方式来保证 nginx.exe 随时可用,本教程不会涉及这些内容。
Step.8使用浏览器访问你配置的 SmobilerApp 所使用的域名,即可看到 HTTPS 安全加密证书保护的通讯协议已经生效。如果你访问 http:// 开头的地址,则 nginx 也会自动为你重定向到 https:// 开头的安全地址。如下图所示:
Q: HTTPS 证书如何申请?
HTTPS 证书的申请渠道众多,可以是付费向 HTTPS 证书供应商按年购买,也可以从一些公益组织的渠道低价或免费申请。
Q: Nginx.exe 启动后在任务管理器中不存在?
任务管理器中不可见,则说明启动失败。此时需要从 logs/error.log 查看错误日志了解启动失败的具体原因。
在本例中,错误原因通常是路径中使用了反斜杠(\)导致出错,因为 Nginx 要求配置文件中涉及路径配置的部分必须使用 Unix-Style 即 Unix 风格的斜杠(/)表示路径。也有可能是指定的路径或文件不存在、无权限访问。此时需要检查 conf/nginx.conf 和 conf/site-enabled/smoapp.conf 文件中设置路径的部分是否正确,以及涉及的文件名称是否书写有误。
Q: 80 或 443 端口已被其他程序占用如何处理?
80 端口默认监听所有 http 请求,443 端口默认监听所有 https 请求,因而我们建议你调整其他程序的端口,释放出占用的 80 端口,而让 Nginx 完全控制 80 和 443 端口。
如果实在无法释放 80 端口,请将上述配置文件中凡是涉及 "listen 80" 或 "listen 443" 的部分修改为其他的端口,然后修改 conf/site-enabeld/smoapp.conf 文件夹中有关于重定向的 "return 301 https://$server_name$request_uri;" 一行即可。你需要在重定向的地址末尾加上 https 协议使用的新端口号,例如 "return 301 https://$server_name:6666$request_uri;" 并注意在配置域名解析 IP 时也填写正确的端口号。