如何用Nginx搭建HTTPS主页面并配置路径转发至项目端口

没问题，我来一步步帮你搞定这两个需求！

一、搭建带项目链接的主网页 #

首先我们需要创建一个静态HTML页面作为主网页，用户访问你的域名时就会看到这个页面，点击链接就能跳转到对应项目。

1. 选择Nginx能访问的目录，比如默认的/usr/share/nginx/html（如果用自定义目录，后续需要在Nginx配置里指定）。
2. 创建index.html文件，内容如下（可以根据喜好调整样式）：

<!DOCTYPE html>
<html>
<head>
    <title>我的项目主页</title>
    <style>
        body { text-align: center; margin-top: 50px; font-family: Arial, sans-serif; }
        .project-btn {
            display: inline-block;
            margin: 20px 10px;
            padding: 16px 32px;
            font-size: 1.2rem;
            color: white;
            background-color: #2563eb;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.3s;
        }
        .project-btn:hover {
            background-color: #1d4ed8;
        }
    </style>
</head>
<body>
    <h1>欢迎访问我的项目主页</h1>
    <a class="project-btn" href="/lala">项目Lala</a>
    <a class="project-btn" href="/poww">项目Poww</a>
</body>
</html>

二、配置Nginx实现路径转发并保留原有配置 #

接下来修改Nginx配置，把你的需求和原有配置整合起来。编辑Nginx的主配置文件（比如/etc/nginx/nginx.conf）或者在/etc/nginx/sites-available/下创建站点配置，再软链接到sites-enabled/目录。

完整配置示例 #

http {
    # 保留你要求的所有gzip配置
    gzip on;
    gzip_proxied any;
    gzip_types text/plain text/xml text/css application/javascript application/x-javascript;
    gzip_vary on;
    gzip_disable msie6;

    # 保留你原有的upstream配置（如果这个后端服务还需要用的话）
    upstream appserver {
        server unix:/home/sftpserver/projects/gunicorn.sock fail_timeout=0;
    }

    # 80端口强制跳转HTTPS，保留原有规则
    server {
        listen 80;
        listen [::]:80 default_server;
        return 301 https://$host$request_uri;
    }

    # HTTPS主站点配置
    server {
        listen 443 ssl;
        listen [::]:443 ssl;
        server_name 你的域名 www.你的域名; # 替换成实际的域名

        # 替换成你的HTTPS证书和私钥路径
        ssl_certificate /path/to/your/fullchain.crt;
        ssl_certificate_key /path/to/your/private.key;

        # 指向主网页所在的目录
        root /usr/share/nginx/html;
        index index.html;

        # 转发/lala路径到对应项目的运行端口（这里假设是8080，替换成实际端口）
        location /lala {
            proxy_pass http://localhost:8080;
            # 配置必要的代理头，确保后端项目能正确识别请求信息
            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;
        }

        # 转发/poww路径到对应项目的运行端口（这里假设是8081，替换成实际端口）
        location /poww {
            proxy_pass http://localhost:8081;
            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;
        }

        # 如果你的原有appserver还需要对外提供服务，可以添加这个location
        # location / {
        #     proxy_pass http://appserver;
        #     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;
        # }
    }
}

关键配置说明 #

• gzip配置：全部保留在http块中，全局生效，完全符合你的要求。
• HTTPS证书：必须替换成你自己的证书和私钥路径，否则HTTPS无法正常工作。
• 路径转发：两个location块分别对应/lala和/poww，将请求转发到后端项目的端口，同时设置代理头确保后端能获取正确的请求来源和协议。
• 主网页加载：通过root和index配置，让访问域名根路径时加载我们创建的静态页面。

生效配置 #

修改完配置后，先检查配置是否合法：

nginx -t

如果输出test is successful，就可以重启Nginx让配置生效：

sudo systemctl reload nginx

现在访问你的域名，就能看到带两个项目链接的主网页，点击链接会自动转发到对应项目的端口啦！

内容的提问来源于stack exchange，提问作者Thiago Siqueira