实践总结：Nginx将本地服务代理到https

jessehoo
2,651 阅读3分钟

我正在参加「掘金·启航计划」

开发场景

日常开发中经常会遇到一些三方API需求会有域名限制，在本地开发时会因域名问题受限，一般会在安全域名上配上项目的测试域名，通过构建到测试环境去进行debug，但是频繁的构建大大降低开发效率，并且如果开发环境是内网环境的话，测试域名的配置也会受限制。比较直接的方法就是把本地运行的localhost:8080代理到正式环境域名中去访问。

真实场景：开发一个公众号内嵌h5，其中引用了百度定位API，微信公众号JS_SDK，两者都需要正式域名https://www.jesse.xxx.com 上去访问才能通过第三方api授权，我们要做的是通过代理使得https://www.jesse.xxx.com域名能进入到我们的localhost:8080项目上，从而避免域名检查失败。

示意图：

需要做的是

  1. 修改host映射，将线上www.jesse.xxx.com域名对应本地ip（127.0.0.1）
  2. 安装nginx, openssl
  3. 生成本地https证书，配置nginx代理配置
  4. 运行nginx

1.修改host映射

关于host:

当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从hosts文件中寻找对应的 IP 地址，一旦找到，系统就会立即打开对应网页，如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。

因此在开发调试阶段可以通过本地host映射调整，从而让线上域名对应到本地ip上

C:\Windows\System32\drivers\etc\host

... 
www.jesse.xxx.com 127.0.0.1
...

此时浏览器访问www.jesse.xxx.com是访问不到正式环境页面的，并且提示无法访问此页面。

我们还可以通过命令输入ping www.jesse.xxx.com行验证ip映射是否已经改变。

2.安装nginx和openssl

安装nginx和openssl步骤网上可以找到，这里不赘述了。

3.生成本地ssl证书，配置nginx

3.1生成密钥

openssl genrsa -des3 -out jesse.key 1024

文件名称自定义，这里取jesse，命令行中输入两次相同的密码即可

执行完命令之后会在对应目录生成密钥文件jesse.key文件

3.2创建csr文件

openssl req -new -key jesse.key -out jesse.csr

命令行中依次填写对应信息，生成密钥文件jesse.csr文件

3.3创建crt证书

复制jesse.key 并重命名为jesse.key.org，依次执行以下命令

openssl rsa -in jesse.key.org -out jesse.key

openssl x509 -req -days 365 -in jesse.csr -signkey jesse.key -out jesse.crt

执行成功后目录下会生成jesse.crt证书

3.3配置nginx.conf

在http模块中增加一个server配置

server {
    listen 443 ssl;
    server_name www.jesse.xxx.com;

    ssl_certificate      ../ssl/jesse.crt;  # 这个是证书的crt文件所在目录
    ssl_certificate_key  ../ssl/jesse.key;  # 这个是证书key文件所在目录

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
    
    location / {
        proxy_pass http://127.0.0.1:8080$request_uri;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

（配置过程经常报错证书not found或者不可用的问题，建议直接在想要的目录下生成证书，不要生成了在移动）

4.运行nginx

到nginx目录下运行

start nginx // 启动nginx

执行后即可在浏览器中通过https:// www.jesse.xxx.com 访问localhost:8080

（浏览器会提示安全警告但不影响本机访问，解决此问题需要生成CA认证证书或者本地生成根证书）



其他命令

nginx -s reload // 重新加载

start -s quit // 停止nginx

start -s stop // 关闭nginx

taskkill /f /t /im nginx.exe // 彻底关闭nginx进程

其他

  • 本地如果需要用手机去真机调试，可以在nginx启动后，使用whistle的调试方案
  • 本地运行的vue项目出现了Invalid Host header ：vue webpack，在vue.config中devServer里配置频闭host检查

              

avatar
文章
阅读
粉丝