Vue.js Quarkus、Heroku和不同的环境_Vue.js_Heroku_Environment Variables_Quarkus

Vue.js Quarkus、Heroku和不同的环境

vue.js heroku

Vue.js Quarkus、Heroku和不同的环境,vue.js,heroku,environment-variables,quarkus,Vue.js,Heroku,Environment Variables,Quarkus,我目前正在开发一个带有独立前端（Vue）和后端（quarkus REST API）项目的简单Web应用程序。现在，我已经设置了一个MVP，其中前端显示一些从后端调用的简单数据。要获得有效的MVP，我需要设置CORS支持。但是，首先我想解释一下我的设置：安装程序我开始用npm-run-service开发前端环境，用/mvnw-quarkus:dev开发后端环境。前端运行在localhost:8081上，后端运行在localhost:8080上。 Heroku允许使用命令Heroku local

我目前正在开发一个带有独立前端（Vue）和后端（quarkus REST API）项目的简单Web应用程序。现在，我已经设置了一个MVP，其中前端显示一些从后端调用的简单数据。要获得有效的MVP，我需要设置CORS支持。但是，首先我想解释一下我的设置：

安装程序我开始用

npm-run-service

开发前端环境，用

/mvnw-quarkus:dev

开发后端环境。前端运行在

localhost:8081

上，后端运行在

localhost:8080

上。 Heroku允许使用命令

Heroku local web

在本地运行应用程序。前端在端口

0.0.0:5001上运行，后端在0.0.0:5000上运行
为了实现此设置，我在前端设置了两个指向后端api的.env
文件。如果我想在开发模式下工作，将加载文件.env.development
：
VUE_APP_ROOT_API=http://localhost:8080

如果我用
VUE_APP_ROOT_API=0.0.0.0:5000

已加载
在我的后端，我设置了
quarkus.http.cors=true
在我的应用程序.properties中

现在我想将这两个项目部署到heroku并在生产中使用它。因此，我设置了两个heroku项目，并在前端项目中使用以下值设置了一个配置变量：
VUE_APP_ROOT_API:https://mybackend.herokuapp.com

来自我前端的呼叫正在成功工作
问题:
对于下一步，我想对其进行更多的限制，只允许我的前端调用我的API。我知道我可以做一些类似的事情
quarkus.http.cors.origins=myfrontend.herokuapp.com

然而，我不知道如何在不同环境（开发、本地和生产）的quarkus上做到这一点？我发现了这个，但我不知道如何正确配置heroku和我的后端应用程序。我是否需要设置应用于不同环境的不同配置文件？还是有其他解决办法？我需要Herokus配置变量吗
谢谢你迄今为止的帮助
 quarkus.http.cors.origins
在运行时是可重写的，因此您有几种可能性
您可以使用配置文件并在应用程序.properties
中使用%prod.quarkus.http.cors.origins=…
设置所有内容。然后在启动应用程序时使用-Dquarkus.profile=prod
，或者使用QUARKUS\u profile=prod
作为环境变量
另一个选项是为quarkus.http.cors.origins
使用环境变量。这将是QUARKUS\u HTTP\u CORS\u ORIGINS=…

我的建议是使用个人资料。这样，您可以安全地检查所有配置是否一目了然一致。
quarkus.http.cors.origins
在运行时可重写，因此您有多种可能性
您可以使用配置文件并在应用程序.properties
中使用%prod.quarkus.http.cors.origins=…
设置所有内容。然后在启动应用程序时使用-Dquarkus.profile=prod
，或者使用QUARKUS\u profile=prod
作为环境变量
另一个选项是为quarkus.http.cors.origins
使用环境变量。这将是QUARKUS\u HTTP\u CORS\u ORIGINS=…

我的建议是使用个人资料。这样，您可以安全地检查所有配置是否一目了然