在客户端访问动态生成的服务器端环境变量Angular app

问题描述：

我正在使用Heroku管道工作流程来部署带有动态生成URL的评论应用程序。例如，假设我的生产应用程序部署在mykickassapp.herokuapp.com，每次我将在回购中创建一个PR，Heroku会自动将该PR部署到像mykickassapp-pr-50.herokuapp.com这样的东西。在客户端访问动态生成的服务器端环境变量Angular app

在我的客户端代码中，我使用了环境文件并将我的应用程序URL存储在那里，在上面的示例中：mykickassapp.herokuapp.com。问题是，它显然不适用于部署在不同的动态生成的URL上的评论应用程序。值得庆幸的是，Heroku将应用程序的URL存储在一个环境变量中。但问题是如何将其加入Angular应用程序的客户端？

我的应用程序使用标准的Angular-CLI生产构建过程。

答

我很好奇，看看有没有人有更好或更简单的方法来做到这一点，但这里是我想出的解决方案。

我创建了一个小的js脚本，保存在项目根目录下的config.js文件中。然后，我在npm postinstall脚本中添加该脚本以在ng构建之前运行。

/src/environments/environment.prod.ts

export const environment = { 
    production: true, 
    URL: 'https://mykickassapp.herokuapp.com/' 
};

config.js

const fs = require("fs"); 
const appName = process.env.HEROKU_APP_NAME; 
if (appName) { 
    const data = fs.readFileSync('./src/environments/environment.prod.ts', 'utf-8'); 
    const appURL = `URL: 'https://${appName}.herokuapp.com',`; 
    const newValue = data.replace(/URL:(.*)/g, appURL); 
    console.log(newValue); 
    fs.writeFileSync('./src/environments/environment.prod.ts', newValue, 'utf-8'); 
}

的package.json

... 
"scripts": {  
    ... 
    "test": "cross-env DEBUG=true jasmine", 
    "postinstall": "node config.js && ng build --aot --prod" 
    }, 
...

在客户端访问动态生成的服务器端环境变量Angular app

相关推荐