Vite+Preact非硬编码代理最佳实践：树莓派动态网络方案咨询

你的方案不算严重的不良实践，但存在几个明显局限性，在特定场景下会失效：

1. 多网卡冲突：如果树莓派同时连接多个外部网络（比如有线+无线），你的函数会返回第一个匹配的IPv4地址，但这个地址未必是前端访问时使用的那个，导致代理失败。
2. 硬编码耦合：把后端的端口（8000）、协议（http/ws）写死在代码里，后期后端调整配置时，前端必须同步修改，增加维护成本。
3. 静态配置局限性：IP是在Vite启动时获取的，如果树莓派运行过程中IP发生变化（比如DHCP续租换IP），Vite不会自动更新代理目标，必须重启前端服务才生效。

更优解决方案 #

方案1：动态根据请求上下文设置代理目标（推荐开发环境）

Vite的代理配置支持将target设为函数，接收当前请求对象作为参数，直接从请求中提取前端访问的IP，动态指向同IP的后端服务：

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
    plugins: [preact()],
    server: {
        port: 3000,
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: (req) => {
                    // 从请求头提取前端访问的主机IP，去掉端口部分
                    const host = req.headers.host.split(':')[0];
                    // 使用和请求一致的协议
                    return `${req.protocol}://${host}:8000`;
                },
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
            '/socket': {
                target: (req) => {
                    const host = req.headers.host.split(':')[0];
                    // 根据是否为WebSocket请求切换协议
                    const protocol = req.upgrade ? 'ws' : 'http';
                    return `${protocol}://${host}:8000`;
                },
                changeOrigin: true,
                ws: true, // 开启WebSocket代理支持
                rewrite: (path) => path.replace(/^\/socket/, ''),
            },
        },
    },
});

优势：完全适配树莓派的IP变化，不管启动时还是运行中IP变更，只要前端访问的是树莓派当前IP，代理就自动指向正确的后端；同时避免多网卡场景下的IP选择错误。

方案2：使用反向代理统一域名（推荐生产部署）

如果服务是长期运行的生产环境，建议用Nginx这类反向代理工具，将前端和后端服务统一到同一个域名/IP下：

• 配置Nginx监听树莓派80端口，将/api、/socket路径转发到FastAPI的8000端口
• 将其他所有路径转发到前端静态文件（或Vite dev server的3000端口）
• 前端代码直接使用相对路径（比如/api/xxx）请求后端，无需配置Vite代理

优势：彻底摆脱IP依赖，前端无需关心后端地址；同时能实现更灵活的路由控制、缓存策略和HTTPS支持。

方案3：自动更新环境变量（适合保留Vite代理的场景）

编写简单的Shell脚本，开机时自动获取树莓派当前IP并写入环境变量文件，Vite配置读取该变量作为代理目标：

1. 创建.env文件，初始内容：

VITE_BACKEND_URL=http://127.0.0.1:8000
VITE_BACKEND_WS_URL=ws://127.0.0.1:8000

2. 编写Shell脚本update-backend-ip.sh：

#!/bin/bash
# 获取第一个外部IPv4地址（可根据需求调整）
LOCAL_IP=$(hostname -I | awk '{print $1}')
# 更新环境变量文件
echo "VITE_BACKEND_URL=http://$LOCAL_IP:8000" > .env
echo "VITE_BACKEND_WS_URL=ws://$LOCAL_IP:8000" >> .env

3. 将脚本设为可执行并添加到树莓派开机启动项：

chmod +x update-backend-ip.sh
# 用crontab添加开机任务
crontab -e
# 添加一行：@reboot /path/to/update-backend-ip.sh

4. 修改Vite配置读取环境变量：

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
    plugins: [preact()],
    server: {
        port: 3000,
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: import.meta.env.VITE_BACKEND_URL,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
            '/socket': {
                target: import.meta.env.VITE_BACKEND_WS_URL,
                changeOrigin: true,
                ws: true,
                rewrite: (path) => path.replace(/^\/socket/, ''),
            },
        },
    },
});

优势：保留原有Vite代理逻辑，同时实现IP自动更新；缺点是树莓派运行中IP变更时需要重启前端服务才生效。

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