[运维]在同一台服务器上部署前后端的正确nginx配置

前端.env:

VITE_API_URL=""
MAILCATCHER_HOST=http://localhost:1080

vite.config.ts:

import path from "node:path"
import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 5173,   // 监听 5173 端口
    host: '0.0.0.0', // 允许外部访问
    allowedHosts: ["tt.kanzhun-inc.com"], // 允许特定域名访问
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  plugins: [react(), TanStackRouterVite()],
})

nginx配置（/etc/nginx/sites-available/default）：

server {
    listen 80;
    server_name tt.kanzhun-inc.com;

    location / {
        proxy_pass http://localhost:5173;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
    location /api/ {
        #rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:8000;  # 将请求转发到后端的 8000 端口
        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;
    }
}

如此，F12可查看到https://tt.kanzhun-inc.com/api/v1/tools/userInfo api层级正确的接口。