如何从docker-compose.yml传递环境变量至Vite React项目？

我希望在docker-compose.yml中指定API_URL这类环境变量，实现只需重启Docker容器就能修改变量，无需每次修改都重新创建容器。

我尝试过如下配置：

version: "3.8"
services:
  frontend:
    container_name: "front"
    image: "front"
    ports:
      - 5005:80
    build:
      context: .
      # target: production
    environment:
      - VITE_API_URL=http://abcd.com

在Vite应用代码中通过import.meta.env.VITE_API_URL读取：

console.log(import.meta.env.VITE_API_URL);

但这种方式无法生效，推测原因是Docker环境变量与Vite环境变量不互通。我考虑过通过挂载包含.env文件的卷来实现类似效果，但不确定这是否是最优方案，想请教有什么可行的实现方法？

补充方案：从数据库动态获取变量 #

Vite项目编译完成后，环境变量对象无法再修改。因此可以将变量数据存储在数据库中，在main.tsx层面发起请求获取这些配置变量。

最佳实践：使用Nginx反向代理 #

经过多种尝试后，处理API地址的最优方案是使用Nginx反向代理：

当使用fetch、axios等请求工具时，省略IP地址，直接发送相对路径请求，比如fetch('/api/user')，应用会自动将请求定向到自身IP地址。

在Docker容器内编辑Nginx配置文件，添加反向代理规则：

location /api {
        proxy_pass http://abcd.com;
    }

这样Nginx会将所有以/api开头的请求转发至指定的URL端点。若需修改目标端点，只需编辑该配置文件，然后在Docker容器内执行nginx -s reload命令即可，无需重新构建Docker镜像。

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