如何将环境变量从docker-compose.yml传递给vite react项目？

Question

我想在docker-compose.yml中指定一些环境变量，比如API_URL，这样我只需重新启动docker容器就可以更改它们。否则，每次我想要更改变量时都必须创建一个新的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应用程序的某个地方：

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

我猜这不起作用是因为Docker的环境和Vite的环境不同。

我的想法是通过创建一个包含.env文件的卷来实现类似的结果，但我不确定这是否是最佳解决方案。有没有什么想法如何实现这个？

- Ceyco

---

当你在environment:块内定义变量时，它会将key=value作为环境变量暴露在Docker容器中。因此，你应该能够像读取.env文件中的变量一样从应用程序中读取这些环境变量，而不会遇到任何问题。你在读取来自compose文件暴露的变量时遇到了什么问题？ - undefined

如果我没记错的话，这是与 VITE 相关的内容。如果你在环境变量前加上 VITE_ 前缀，vite 将会识别并使用它，但声明时不带前缀。所以在你的情况下，使用 import.meta.env.API_URL 应该可以正常工作。 - undefined

我刚刚阅读了文档，它与我之前所说的相矛盾，尽管我记得在我的其中一个项目中确实有效。 - undefined

再读一遍，这可能是由于一些特殊字符引起的。你尝试过用"引号括起来或使用反斜杠（\）进行转义吗？ - undefined

有关这个的任何更新吗？我想将在compose文件中创建的容器的URL传递为env文件。 - undefined

Answer 1

我想这是不可能的。

在生产过程中，这些环境变量是静态替换的。因此，必须始终使用完整的静态字符串来引用它们。例如，像import.meta.env[key]这样的动态键访问是行不通的。

https://vitejs.dev/guide/env-and-mode.html

- Alexufo

---

你有找到任何解决办法吗？ - undefined

@WhatTheWhat 请看新回答 - undefined

@WhatTheWhat，编辑了问题。这可能会对你有所帮助。 - undefined

@Ceyco 不错！我们还可以在nginx.conf中使用docker环境，并在docker-compose文件中设置入口点。 - undefined

Answer 2

我只找到一种对我来说可接受的解决方案。

1. Docker compose将创建一个名为enviroment-vars.js的文件，其内容为window.VUE_DOMAIN_NAME = var_from_docker_env

command: ["sh", "-c", "echo window.VUE_DOMAIN_NAME='\"'$$VITE_URL'\' > public/enviroment-vars.js && echo $$VITE_URL && npm run dev" ]

2. 在index.html中，在所有脚本之前添加此js文件的路径。

<script src="/enviroment-vars.js" type="text/javascript"></script>.

3. 在vite模板中，使用window.VUE_DOMAIN_NAME

这不是最好的解决方案，但比在模板中创建一个唯一的占位符并使用正则表达式来获取所需变量要好。

- Alexufo