Nginx UI项目HTTPS访问下证书续期界面卡顿问题分析

在Nginx UI项目(v2.0.0-rc.3版本)使用过程中，当通过HTTPS反向代理访问管理界面时，用户在进行DNS01方式的证书续期操作时，会遇到界面卡在"Getting the certificate, please wait..."提示的问题。虽然实际上证书续期操作在后台已经成功完成，但前端界面无法正常显示完成状态，影响了用户体验。

问题现象

用户配置了Nginx反向代理，通过HTTPS(端口9001)访问运行在9000端口的Nginx UI管理界面。当进入证书管理页面尝试续期证书时，操作界面会停滞在初始提示信息处，无法正常显示续期进度和完成状态。

根本原因

经过分析，此问题与WebSocket协议的支持有关。Nginx UI在进行证书续期操作时，前端与后端之间需要通过WebSocket建立实时通信通道来获取操作进度。当通过HTTPS反向代理访问时，如果Nginx配置中没有正确支持WebSocket协议的代理转发，就会导致WebSocket连接无法建立，从而使前端无法接收到后端返回的操作状态更新。

解决方案

要解决这个问题，需要确保Nginx的反向代理配置正确支持WebSocket协议。具体需要在Nginx配置中添加以下关键参数：

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

这些配置项的作用是：

1. proxy_http_version 1.1：启用HTTP/1.1协议，这是WebSocket升级所必需的
2. Upgrade和Connection头：处理协议升级请求，允许将HTTP连接升级为WebSocket连接

完整的Nginx配置示例应如下：

server {
    listen 9001 ssl;
    server_name your.domain.com;
    ssl_certificate /path/to/cert;
    ssl_certificate_key /path/to/key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://127.0.0.1:9000;
        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";
    }
}

验证方法

修改配置后，可以通过以下步骤验证问题是否解决：

1. 重新加载Nginx配置
2. 再次尝试证书续期操作
3. 观察操作界面是否能正常显示进度和完成状态
4. 同时检查浏览器开发者工具中的网络请求，确认WebSocket连接是否成功建立

总结

在使用反向代理访问Nginx UI时，特别是通过HTTPS协议时，确保WebSocket协议的正确支持至关重要。这个问题不仅限于证书续期操作，任何依赖实时通信的功能都可能受到影响。正确的Nginx配置不仅能解决界面卡顿问题，还能为后续可能增加的实时功能提供良好的基础支持。

对于使用Nginx UI的管理员来说，理解反向代理环境下WebSocket的支持要求，是保证系统各项功能正常工作的关键知识之一。