[英]How to use Environment Variables for API Url (Angular 8, TypeScript, HTML and SCSS for FrontEnd and C# for BackEnd)
My API Url is hardcoded to localhost:4300
in my Development environment ( which is in utilities.ts
)我的 API utilities.ts
在我的开发环境(位于 utility.ts 中)中硬编码为localhost:4300
These are the codes below这些是下面的代码
utilities.ts实用程序.ts
const hostToApiUrlMap = {
localhost: 'http://localhost:4300'
};
environment.prod.ts环境.prod.ts
export const environment {
production: true
};
environment.ts环境.ts
export const environment {
production: false
};
I know when we move to Production environment the API Url will change.我知道当我们转移到生产环境时,API Url 会发生变化。 My question is "How can I use Environment Variables to configure the API Url on the frontend so that it is not Hardcoded to localhost:4300
?我的问题是“如何使用环境变量在前端配置 API Url 以便它不会硬编码为localhost:4300
?
So that whenever the API Url changes, the Development environment will automatically update to the new API Url这样每当 API Url 发生变化时,开发环境就会自动更新到新的 API Z02A3A357710CC2A5DFDFB74ED0
I would suggest putting the two URLs in the environment.ts
and environment.prod.ts
files and import it directly from environment.ts
.我建议将这两个 URL 放在environment.ts
和environment.prod.ts
文件中,然后直接从environment.ts
导入。 At compile time the Angular compiler will use the environment.prod.ts
file as environment.ts
file if you do a production build.在编译时,如果您进行生产构建,Angular 编译器将使用environment.prod.ts
文件作为environment.ts
文件。 So like that:就像这样:
import { environment } from "~/environment/environment.ts" // Change this to your file location
console.log("Current API URL:", enviroment.apiUrl);
export const environment = {
production: false,
apiUrl: "http://localhost:4300"
}
export const environment = {
production: true,
apiUrl: "https://your.actual.api"
}
This works because of the build configuration of Angular.这是因为 Angular 的构建配置而起作用的。 In the angular.json
file you will find this:在angular.json
文件中,您会发现:
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
This means that in production mode build the environment.ts
file will be replaced with environment.prod.ts
file.这意味着在生产模式下构建environment.ts
文件将替换为environment.prod.ts
文件。
So you can create a.env file at the root of the project, and then use process.env.[whatever your variable name is]
.因此,您可以在项目的根目录创建一个 .env 文件,然后使用process.env.[whatever your variable name is]
。 Then you can just easily change these variables whenever you need to.然后,您可以在需要时轻松更改这些变量。
So inside the .env
file you could create a variable like API_URL= blah blah blah
.因此,在.env
文件中,您可以创建一个变量,如API_URL= blah blah blah
。 The nice thing about this is you can even pass these variable through npm scripts这样做的好处是您甚至可以通过 npm 脚本传递这些变量
Or if you production url and dev url will be static for the most part, you could define a variable in.env called something like 'environment' and set if = prod or = dev.或者,如果您生产 url 和 dev url 在大多数情况下将是 static,您可以定义一个变量 if = prodenv 或 = dev 之类的东西。 Then in the js somewhere in like a util file just do something like然后在 js 中的某个地方,比如一个 util 文件,只需执行类似的操作
const apiUrl = process.env.environment === 'prod' ? [prod url] : [dev url]
As far as automatically changing the url when the api url changes you have to be more specific.至于在 api url 更改时自动更改 url,您必须更具体。 Like how are you going to notify the FE that the api url has changed.就像您将如何通知 FE api url 已更改。 These two things are completely separate entities.这两件事是完全独立的实体。 It has no way of knowing that the Api Url changes/ what it is with out you specifically telling it what the url is.它无法知道 Api Url 的变化/它是什么而没有你具体告诉它 url 是什么。 So in some sense it has to be hardcoded in the project in some way, even if its just in the.env file.所以从某种意义上说,它必须以某种方式在项目中进行硬编码,即使它只是在 .env 文件中。 The only other way is if you like defined some other server thats job is to literally just serve whatever your API path is from a database or something, but thats ridiculous.唯一的另一种方法是,如果您喜欢定义其他服务器,那么您的工作就是为您的 API 路径来自数据库或其他东西的任何内容提供服务,但这太荒谬了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.