nginx 如何在使用https的react应用程序中调用hls服务器

9fkzdhlc  于 2023-01-25  发布在  Nginx
关注(0)|答案(1)|浏览(151)

所以,我有一个react应用程序,它是通过nodejs服务器构建和运行的。这个nodejs服务器运行nginx来处理证书。这个react/nodejs服务器也运行一个RTMP服务器,这个RTMP服务器运行一个hls服务器。
所以,基本上网站有证书,运行在https://上。我需要知道调用hls服务器在网站上显示流的方法。问题是我使用的“node-media-server”包没有明确如何将http转换为https,所以当我从react应用程序调用url时,我得到了一个“(阻塞:混合内容)”错误。当我调用.m3u8文件时。所以react应用程序将调用url“http://website.com/live/stream/index.m3u8“。我需要将这个hls流转换为https吗?如果需要,我该怎么做?也许我需要更改我的nginx配置?
下面是我的nginx配置。

upstream socketio {
#       ip_hash;
        server 127.0.0.1:8174;
}

upstream reactserve {
        server 127.0.0.1:3000;
}

upstream hls {
        server 127.0.0.1:8179;
}

#server {
#       listen          80;
#        server_name     www.idealgambler.com;
#       rewrite         ^(.*)   https://$host$1 permanent;

#}

server {

        listen                  443 ssl;
        ssl                     on;
        server_name             idealgambler.com www.idealgambler.com;

        access_log              /var/log/nginx/access-ssl.log;
        error_log               /var/log/nginx/error-ssl.log;

        location / {
        #       include proxy_params;
                proxy_pass              http://socketio;
                proxy_next_upstream     error timeout invalid_header http_500 http_502 http_503 http_504;
                proxy_redirect          off;
                proxy_buffering         off;

                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       $scheme;
                proxy_set_header Access-Control-Allow-Origin *;
                add_header              Front-End-Https         on;
                add_header              Access-Control-Allow-Origin *;
        }

        location /socket.io/ {
                proxy_pass              http://socketio;
                proxy_redirect off;

                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-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
                proxy_set_header Access-Control-Allow-Origin *;
                add_header              Access-Control-Allow-Origin *;
        }

        location /hls {
                proxy_pass              http://hls;
                proxy_redirect off;
                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 Access-Control-Allow-Origin *;
                add_header              Access-Control-Allow-Origin *;
        }

    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    ssl_certificate /etc/letsencrypt/live/idealgambler.com-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/idealgambler.com-0001/privkey.pem; # managed by Certbot

}

下面是nodejs中的NodeMediaServer代码:

require("./Casino/CasinoRouters/client-connected")(app, io);

const NodeMediaServer = require("node-media-server");
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30,
  },
  http: {
    port: 8179,
    mediaroot: "./media",
    allow_origin: "*",
  },
  log_file: "./logs/nms.log",
  trans: {
    ffmpeg: process.env.FFMPEG_PATH,
    tasks: [
      {
        app: "live",
        hls: true,
        hlsFlags: "[hls_time=2:hls_list_size=3:hls_flags=delete_segments]",
        hlsKeep: true, // to prevent hls file delete after end the stream
        dash: true,
        dashFlags: "[f=dash:window_size=3:extra_window_size=5]",
        dashKeep: true, // to prevent dash file delete after end the stream
      },
    ],
  },
};

var nms = new NodeMediaServer(config);
nms.run();

所以我尝试更新nginx文件,以及将nodemediaserver的配置更改为https。在配置中将http更改为https的问题是,关键字“mediaroot”在nodemediaserver的https中不存在。我得到的错误是,在express应用中将其更改为https时,找不到文件“./media”。因此,基本上https hls不会运行,只有http会运行。也许有一个不同的配置运行它通过https。
我试过将hls添加到nginx配置中,但我不认为这有什么用。

mkshixfv

mkshixfv1#

理想情况下,您应该尝试修复URL并使其与应用程序的方案匹配(即,切勿将http://与https://混用),或者如果URL来自外部源,则让应用程序检测并更正它。
如果这不可行,你可以尝试回退到在HTTP响应头中插入Content-Security-Policy: upgrade-insecure-requests。这将使浏览器自动将所有http://转换为https://,就像后者最初是由应用请求的一样。你似乎可以控制部署,所以这可以在Nginx配置中完成。或者,可以将头添加到HTML头中,如this answer所示。
还要注意WebSockets。安全的WebSockets(wss://)可能需要代理按照RFC 6455传递Sec-WebSocket-*头。Nginx默认不这样做。您可能需要在配置中添加以下行:

location /socket.io/ {
    # ...

    # pass client-to-server Sec-WebSocket-* headers
    proxy_set_header Sec-WebSocket-Key        $http_sec_websocket_key;
    proxy_set_header Sec-WebSocket-Version    $http_sec_websocket_version;
    proxy_set_header Sec-WebSocket-Extensions $http_sec_websocket_extensions;
    proxy_set_header Sec-WebSocket-Protocol   $http_sec_websocket_protocol;
}

相关问题