如何通过Nginx将http升级为https，ws升级成wss

原创已于 2024-09-01 09:31:42 修改 · 2.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #http #运维 #https #websocket

于 2024-07-14 21:55:21 首次发布

项目开发专栏收录该内容

8 篇文章

订阅专栏

项目需要部署上线，前端采用的是小程序客户端，小程序部署上线需要使用更为安全的https协议进行通信。使用Nginx接收到前端发送的https请求，并将请求反向代理到处理http请求的后端服务器上。这样可以在不进行任何后端代码更改的条件下，完成http到https的升级。以下是操作步骤和注意事项。

1.下载Nginx

Linux 安装 Nginx 并配置为系统服务（超详细）-阿里云开发者社区 (aliyun.com)

2.升级Nginx，并完成http到https协议的升级

直接从步骤二看起

Nginx或Tengine服务器配置SSL证书_数字证书管理服务（原SSL证书）(SSL Certificate)-阿里云帮助中心 (aliyun.com)

在配置文件中，我们将所有的http请求重写成https请求，nginx这时候会进行转发，由监听443端口的server模块进行处理。

3.编写wss部分的配置文件

wss的配置如上，我们可以将ws理解成http的升级，wss理解成https的升级，并且ws默认使用80端口，wss默认使用443端口和http、https相同。

完整配置文件信息

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
    server {
        listen       80;
        server_name  www.lzfamily.cn;

	    #将请求转成https
        rewrite ^(.*)$ https://$host$1;
	   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
             root   html;
        }

    }  


  # HTTPS server
    
    server {
        listen       443 ssl;
        server_name  www.lzml.cn;
	   #	ssl证书的 pem 文件路径   
        ssl_certificate      /usr/local/nginx/cert/lzml.cn.pem;
        # ssl证书的 key 文件路径
        ssl_certificate_key  /usr/local/nginx/cert/lzml.cn.key;
        ssl_session_cache    shared:SSL:10m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
        	root      /opt/dihuaxia/houtai;
		    try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }
        
        location /api {
             proxy_pass     http://8.136.112.32:8000;
        }
       
    	location /ws {
           proxy_redirect off;
           proxy_read_timeout 60s;
           proxy_send_timeout 60s;
           proxy_pass http://8.136.112.32:8001;
           proxy_set_header Host $host;
           proxy_set_header X-Real_IP $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "Upgrade";
        }
    }

思考：如果使用 wss://ip地址/ws 请求服务器会发生什么？

会发生一个奇怪的现象，在apifox里面可以正常建立websocket长连接，但是在websocket在线测试却无法进行连接，甚至我们的nginx都收不到建立websocket的请求

在apifox请求是正常的，可以正常的建立websocket连接

websocket在线测试连接失败，我们的nginx没有接收到连接信息 在线测试网址：WebSocket在线测试工具 (wstool.js.org)
nginx是否接收到请求可查看/usr/local/nginx/logs/access.log日志中的信息
打开控制台进行查看原因：

从上面的js中我们可以看出来，脚本执行到 var wsInstance = new WebSocket(this.address) 创建websocket实例的时候就已经报错了，很有可能是我们使用的wss协议的时候，一定要使用域名进行请求，不能够使用IP地址进行websocket实例的创建。apifox是一个请求测试工具，和浏览器发送出来的实际请求不太相同。例如：apifox不会存在跨域问题，但是前端项目部署完成后，可能会存在跨域问题。