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

4sup72z8 于 12个月前发布在 Docker

关注(0)|答案(2)|浏览(182)

我想在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 App中：

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

我猜它不工作，因为docker的env和vite的env是不同的。
我的想法是我可以通过创建一个包含.env文件的卷来实现类似的结果，但我不确定这是否是最好的解决方案。有什么想法可以实现这一点吗？

docker

来源：https://stackoverflow.com/questions/76457026/how-to-pass-environment-variables-from-docker-compose-yml-to-vite-react-project

2条答案

按热度按时间

k2arahey1#

我只找到一个我能接受的解决办法。

Docker compose将创建environment-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" ]
1.在index.html中，在所有脚本之前添加此js文件的路径。
<script src="/enviroment-vars.js" type="text/javascript"></script>。
1.在vite模板中，使用window.VUE_DOMAIN_NAME
这不是最好的解决方案，但它比在模板中创建一个唯一的占位符并为所需的变量进行regexp要好。

赞(0）回复(0）举报 12个月前

busg9geu2#

我想这是不可能的。