nginx配置

原创

用户1476826

修改于 2025-11-26 07:56:50

1330

根据您的要求，我来为您提供一个完整的nginx配置方案，将/tvp路径指向COS上的React静态页面，并支持前端路由。

Nginx配置方案

server {
    listen 80;
    server_name your-domain.com;
    
    # TVP应用 - React静态页面配置
    location /tvp/ {
        # 设置代理到COS存储桶
        proxy_pass https://your-cos-bucket.cos.ap-region.myqcloud.com/;
        
        # 设置正确的HTTP头
        proxy_set_header Host your-cos-bucket.cos.ap-region.myqcloud.com;
        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_cache_valid 200 302 10m;
        proxy_cache_valid 404 1m;
        
        # 支持前端路由 - 对于不存在的路径返回index.html
        error_page 404 =200 /tvp/index.html;
    }
    
    # 处理静态资源
    location /tvp/static/ {
        proxy_pass https://your-cos-bucket.cos.ap-region.myqcloud.com/static/;
        
        # 长期缓存静态资源
        proxy_cache_valid 200 302 1y;
        proxy_cache_valid 404 1m;
        
        # 设置缓存头
        add_header Cache-Control "public, immutable, max-age=31536000";
    }
    
    # 处理前端路由的fallback
    location ~ ^/tvp/(?!static/).* {
        try_files $uri $uri/ @tvp_routing;
    }
    
    location @tvp_routing {
        proxy_pass https://your-cos-bucket.cos.ap-region.myqcloud.com/index.html;
        proxy_set_header Host your-cos-bucket.cos.ap-region.myqcloud.com;
    }
}

替代方案：使用rewrite方式

server {
    listen 80;
    server_name your-domain.com;
    
    location /tvp/ {
        # 重写URL到COS地址
        rewrite ^/tvp/(.*)$ /$1 break;
        
        proxy_pass https://your-cos-bucket.cos.ap-region.myqcloud.com;
        proxy_set_header Host your-cos-bucket.cos.ap-region.myqcloud.com;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 支持前端路由
        proxy_intercept_errors on;
        error_page 404 =200 /tvp/index.html;
    }
}

更简洁的配置（推荐）

server {
    listen 80;
    server_name your-domain.com;
    
    location /tvp/ {
        # 移除/tvp前缀后代理到COS
        rewrite ^/tvp/(.*)$ /$1 break;
        
        proxy_pass https://your-cos-bucket.cos.ap-region.myqcloud.com;
        proxy_set_header Host your-cos-bucket.cos.ap-region.myqcloud.com;
        
        # 处理前端路由
        proxy_intercept_errors on;
        error_page 404 = /tvp/index.html;
    }
    
    # 直接访问/tvp时重定向到/tvp/
    location = /tvp {
        return 302 /tvp/;
    }
}