docker - 具有不同API URL的Dockerized Vue SPA，具体取决于运行位置

Question

我得到了我的Vue.js应用程序的docker图像，该图像从Java后端中运行的api获取数据。在生产环境中，该api在app.example.com/api下运行，在过渡阶段它将在staging.example.com/api下运行，并且在本地计算机上运行时，该api将在localhost:8081下运行。在计算机上运行前端时，我可能在项目文件夹中使用vue cli serve，或者使用docker-compose将其作为docker镜像启动。后端始终作为docker镜像运行。

我希望能够对本地docker-compose使用相同的docker镜像，部署到阶段并部署到生产环境，但对后端api使用不同的url。作为奖励，能够使用vue-cli服务会很好。

如何做到这一点？

Answer 1

您可以使用包含API网址的环境变量，然后在Vue应用程序中使用该环境变量。

Vue cli支持环境变量，并允许您使用以client-side code中的VUE_APP_开头的环境变量。因此，如果在运行Vue CLI的环境(无论是Docker还是在主机上)中创建一个名为VUE_APP_API_URL的环境变量，则应该能够在Vue代码中使用process.env.VUE_APP_API_URL。

如果您在本地运行Vue CLI，则可以先运行export VUE_APP_API_URL="localhost:8081"，然后再运行vue cli serve。

Docker还支持environment variables。例如，如果您的SPA Docker服务称为“frontend”，则可以将环境变量添加到Docker Compose文件中，如下所示:

frontend:
  environment:
    - VUE_APP_API_URL

如果您在主机中设置了 VUE_APP_API_URL环境变量，那么您正在运行的Docker将从该环境变量传递到您的“前端” Docker容器。因此，例如，如果您在本地运行它，则可以在运行Docker Compose之前运行 export VUE_APP_API_URL="localhost:8081"。

您还可以使用 .env file传递环境变量。如果您有兴趣，可以在Docker Compose文件 here中阅读有关环境变量的更多信息。