# nginx-https-wss

**Repository Path**: feng3d_admin/nginx-https-wss

## Basic Information

- **Project Name**: nginx-https-wss
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-28
- **Last Updated**: 2021-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# nginx-https-wss

#### 介绍
使用nginx处理网络安全的https与wss访问问题。

#### 软件架构
【websocket客户端】 <--- https/wss ---> 【nginx】 <--- http/ws ---> 【websocket服务端】

1. 本地测试需要修改host (C:\Windows\System32\drivers\etc\hosts)
    ```
    127.0.0.1       www.feng3d.cn
    127.0.0.1       websocketserver.com
    ```
2. websocket客户端（网页）
    | 协议    | url                      | 连接的websocket服务器url            |
    | ------- | ------------------------ | -------------------------------- |
    | `http`  | `http://www.feng3d.cn/`  | `ws://websocketserver.com:8010/` |
    | `https` | `https://www.feng3d.cn/` | `wss://www.feng3d.cn:843/`       |
3. nginx
    | 端口  | 提供可访问的url            | 转发                             |
    | ----- | -------------------------- | -------------------------------- |
    | `80`  | `http://www.feng3d.cn/`    | 无                               |
    | `443` | `https://www.feng3d.cn/`   | 无                               |
    | `843` | `wss://www.feng3d.cn:843/` | `ws://websocketserver.com:8010/` |
4. websocket服务端
    | 端口   | 提供可访问的url                  |
    | ------ | -------------------------------- |
    | `8010` | `ws://websocketserver.com:8010/` |
5. 通讯
    * http/ws    
        * 浏览器输入`http://www.feng3d.cn/`
          * 通过`http`协议连接 `nginx`的`80`端口
          * 创建WebSocket由`ws://websocketserver.com:8010/`通过`ws`协议 连接 websocket服务端。
        * 浏览器输入`https://www.feng3d.cn/`
          * 通过`https`协议连接 `nginx`的`443`端口
          * 创建WebSocket由`wss://www.feng3d.cn:843/`通过`wss`协议 连接 nginx 的代理websocket服务器。
            * nginx 转发 `ws`协议 `ws://websocketserver.com:8010/` 连接 websocket服务端。

#### 需要材料
1. SSL证书
2. nginx服务器

#### 安装教程

1.  下载nginx
http://nginx.org/en/download.html
选择了	nginx/Windows-1.20.1 进行下载
解压nginx-1.20.1.zip
2.  运行nginx.exe
    * 在浏览器中输入 http://localhost/ 可以看到nginx初始界面    `此时显示警告图标`

        ![](./assets/nossl_http_localhost.jpg)
    * 在浏览器中输入 https://localhost/ 显示无法访问此网站

        ![](./assets/nossl_https_localhost.jpg)
3.  配置SSL支持https访问
    * 准备SSL证书（需要去申请域名对应的SSL证书，此处用到证书(6027127_feng3d.cn.key 6027127_feng3d.cn.pem)是阿里云申请的免费证书）
    * 把证书放到nginx-1.20.1\conf文件夹内
    * 修改 nginx-1.20.1\conf\nginx.conf 配置SSL支持https访问
        ```
            server {
            listen       443 ssl;
            server_name  localhost;

            ssl_certificate      6027127_feng3d.cn.pem; # 可以指向系统路径
            ssl_certificate_key  6027127_feng3d.cn.key;

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

            ssl_ciphers  HIGH:!aNULL:!MD5;
            ssl_prefer_server_ciphers  on;

            location / {
                root   html;
                index  index.html index.htm;
            }
            }
        ```
    * 修改host (C:\Windows\System32\drivers\etc\hosts) 新增域名映射
        ```
        127.0.0.1       www.feng3d.cn
        ```
    * 重启nginx.exe （可以在windows的任务管理器中强制关闭两个nginx.exe进程然后运行nginx.exe）
    * 在浏览器中输入 https://www.feng3d.cn/ 可以看到nginx初始界面    `此时显示一把锁的图标`

        ![](./assets/ssl_https_feng3d.cn.jpg)

4. 通过nginx代理wss
    * 新增 node-websocket-demo，在该目录下使用`npm install`安装依赖（要求已安装node.js）,使用`npm run server`启动服务器
    * 修改 nginx-1.20.1\conf\nginx.conf 配置wss转发ws
    ```
        # wss转发ws
        upstream websocket_8010{
            server websocketserver.com:8010; #C++服务器ip port ws://websocketserver.com:8010能够访问
        }

        server {
            listen       843 ssl;
            server_name  www.feng3d.cn;

            ssl_certificate      6027127_feng3d.cn.pem; 
            ssl_certificate_key  6027127_feng3d.cn.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://websocket_8010; #向上中转地址
                proxy_read_timeout 500s; #500s没有数据传输，中断连接
                proxy_set_header Host $host;
                proxy_set_header X-Real_IP $remote_addr;
                proxy_set_header X-Forwarded-for $remote_addr;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'Upgrade';
            }
        }
    ```
    * 在浏览器中输入 https://www.feng3d.cn/ 在chrome的开发者工具中显示已经通过 `加密协议wss` `wss://www.feng3d.cn:843/` 正常连接服务器

        此处没有直接连接服务器的`8010`端口，而是连接了nginx配置的`843`端口。
        ![](./assets/wss_https_feng3d.cn.jpg)

    * 在浏览器中输入 http://www.feng3d.cn/ 在chrome的开发者工具中显示已经通过 `协议ws` `ws://www.feng3d.cn:8010/` 正常连接服务器

        此处直接连接了服务器的`8010`端口
        ![](./assets/nowss_https_feng3d.cn.jpg)


#### 参考
https://www.nginx.com/blog/websocket-nginx/
https://blog.csdn.net/chszs/article/details/26369257
https://www.cnblogs.com/hookjc/p/13178987.html