[运维]在同一台服务器上部署前后端的正确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层级正确的接口。