AI-Sphere-Butler之Ubuntu服务器如何部署Nginx代理，并将HTTP升级成HTTPS，用于移动设备访问

环境：

AI-Sphere-Butler

WSL2

Ubuntu22.04

Nginx

问题描述：

AI-Sphere-Butler之Ubuntu服务器如何部署Nginx代理，并将HTTP升级成HTTPS，用于移动设备访问

解决方案：

一、生成加密证书

1.配置OpenSSL生成本地不加密证书

1.确保你已经安装了 Nginx 和 OpenSSL，可以使用以下命令在 Ubuntu 上安装它们：

sudo apt update
sudo apt install nginx openssl

2.生成自签名SSL证书

如果你还没有SSL证书，可以按照之前命令生成一个自签名证书，假设你已经在 /etc/nginx/ssl 目录下生成了 private.key 和 certificate.crt 文件。

sudo mkdir -p /etc/nginx/ssl
cd /etc/nginx/ssl
openssl genpkey -algorithm RSA -out private.key
openssl req -new -key private.key -out csr.csr
openssl x509 -req -days 365 -in csr.csr -signkey private.key -out certificate.crt

用不加密证书

openssl rsa -in /etc/nginx/ssl/private.key -out /etc/nginx/ssl/private_unencrypted.key

二、部署Nginx服务

1.更新软件包列表

首先，确保系统软件包列表是最新的：

sudo apt update

2.安装Nginx

使用apt命令来安装Nginx：

sudo apt install nginx

安装过程中，可能会提示你输入管理员密码以确认操作权限。

3.启动和启用Nginx

安装完成后，启动Nginx服务，并设置它在系统启动时自动运行：

sudo systemctl start nginx
sudo systemctl enable nginx

可以通过以下命令检查Nginx的状态，确保它正在运行：

sudo systemctl status nginx

如果一切正常，应该会看到类似“active (running)”的输出。

4.配置防火墙

如果你的Ubuntu服务器启用了UFW（Uncomplicated Firewall），要需要允许HTTP和HTTPS流量：

sudo ufw allow 'Nginx Full'

这条命令将允许通过HTTP（端口80）和HTTPS（端口443）的流量。如果你想只允许HTTP或HTTPS，可以分别使用'Nginx HTTP'或'Nginx HTTPS'。

5.验证Nginx安装

打开浏览器并访问你的服务器IP地址或域名（例如：http://your_server_ip）。你应该能看到默认的Nginx欢迎页面，表明Nginx已经成功安装并运行。

6.基本配置文件路径

• 主配置文件：/etc/nginx/nginx.conf
• 站点配置文件：通常位于/etc/nginx/sites-available/目录下，默认站点配置文件为default。
• 日志文件：位于/var/log/nginx/目录下的access.log和error.log。

7.代理本地模块服务

本地地址：http://192.168.1.22:8010/realtalk/examples/index.html

目标地址：https://192.168.1.22:7010/realtalk/examples/index.html

编写nginx默认配置文件

nano /etc/nginx/sites-available/default

server {
    listen 7010 ssl;
    server_name 192.168.1.22;

    # SSL 证书配置
    ssl_certificate /etc/nginx/ssl/certificate.crt;
    ssl_certificate_key /etc/nginx/ssl/private_unencrypted.key;

    # SSL 协议与密码套件
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # 静态资源配置
    location /realtalk/examples/ {
        alias /mnt/e/work/metahuman-stream/web/realtalk/examples/;
        index index.html;

        # 处理静态文件的缓存控制，确保加载最新资源
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires 0;

        # 启用目录列表（可选，方便调试）
        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
    }   
        # 新增代理路径
    location /client.js {
        proxy_pass http://192.168.1.22:8010/client.js; # 将 HTTPS 请求转发到 HTTP 服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    } 
    # 代理 /webrtcapi.html 到 8010
    location /webrtcapi.html {
        proxy_pass http://192.168.1.22:8010/webrtcapi.html;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }    
   
    # 新增代理 /qwener 到 8010/qwener
    location /qwener {
        proxy_pass http://192.168.1.22:8010/qwener;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 可选：添加缓存控制头（如果需要控制缓存）
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires 0;
    }

    # API 请求代理配置
    location /api/ {
        proxy_pass http://127.0.0.1:8010;
        
        # 跨域设置
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";

        # 处理预检请求 (CORS)
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }

    # WebSocket 请求代理
    location /ws/ {
        proxy_pass http://127.0.0.1:8010;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    # 主站点代理，用于其他未明确匹配的路径
    location / {
        proxy_pass http://127.0.0.1:8010;
        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;

        # 防止 WebSocket 或长连接被切断
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# HTTP 配置（重定向至 HTTPS）
server {
    listen 80;
    server_name 192.168.1.22;

    # 将所有 HTTP 请求强制重定向到 HTTPS
    return 301 https://$host$request_uri;
}

三、更改下面几个文件代码（改成你本地的）

E:\work\metahuman-stream\web\realtalk\examples\index.html

https://192.168.1.22:7010/webrtcapi.html

E:\work\metahuman-stream\web\realtalk\examples\index_noauto.js

四、测试

手机设备使用谷歌、火狐、edge浏览器测试输入访问测试
https://192.168.1.22:7010/realtalk/examples/index.html