nginx代理如何配置和如何踩到坑篇

一、需求场景

在 web 页面渲染并操作真机。

二、研发过程

通过websocket获取到H.264视频流数据后，需通过浏览器提供的VideoDecoder方法对其进行解码然后渲染在canvas上操作真机（也就是操作画布）。

三、注意事项

VideoDecoder API（属于 WebCodecs API）仅在 HTTPS 协议或本地开发环境。

四、本地nginx代理，配置自签证书，实现本地https协议访问

1、配置如下：首先在我的nginx.bat和nginx.exe同级别下，有一个conf文件夹

2、conf文件夹下有nginx.conf配置文件，此配置文件中未写主要代理地址，而是在此文件中，将需要加载的.conf内容指向了同级别下的vhost中的所有的.conf文件

conf 复制代码

worker_processes 1;
worker_rlimit_nofile 65535;
pid logs/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    include       vhost/*.conf;  # 包含所有vhost下的配置文件
    
    # WebSocket支持
    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

    default_type  application/octet-stream;
    
    # 其他原有配置保持不变...
}

3、配置解释：

include 指令

markdown 复制代码

-   用于将外部文件的内容动态加载到当前 Nginx 配置中，类似于"合并"文件内容。
-   目的是让配置更清晰、模块化，避免主配置文件（如 `nginx.conf`）过于臃肿。

vhost/*.conf 路径

markdown 复制代码

-   `vhost/` 是目录名（通常存放虚拟主机配置）。
-   `*.conf` 表示匹配该目录下所有以 `.conf` 结尾的文件。
-   例如：`vhost/example.com.conf`、`vhost/blog.conf` 等文件都会被加载。

4、vhost下的自定义名称.conf文件，https-443.conf

配置文件的内容：

conf 复制代码

server {
    listen 443 ssl; # https协议监听443端口
    server_name localhost; # 这里是代理后的访问地址

    # SSL证书配置（请确认路径正确），配置的自签证书
    ssl_certificate D:/nginx-1.16.1/conf/cert/6107996__eversaas.cn.pem;
    ssl_certificate_key D:/nginx-1.16.1/conf/cert/6107996__eversaas.cn.key;
    
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    location / {
        proxy_pass http://localhost:8080; #这是本地前端代码起的服务地址，表示访问https://localhost:443代理到此地址展示前端页面
        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;
    }

    location /ws {
        proxy_pass http://192.168.111.222:5000; # 这里表示将/ws的开头的请求都代理到此地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
    }
    location /pcap {
        proxy_pass http://192.168.66.99:5500; # 这里表示将/pcap的开头的请求都代理到此地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
    }
    location /action {
        proxy_pass http://192.168.88.22:5000; # 这里表示将/action的开头的请求都代理到此地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto https;
    }
}