小编doc*_*ejs的帖子

如何将环境变量传递给前端Web应用程序?

我试图容纳一个前端Web应用程序,我有麻烦弄清楚如何传递环境变量.该应用程序是一个Angular应用程序,因此它是100%客户端.

在典型的后端服务中,传递环境变量很容易,因为一切都在同一主机上运行,​​因此后端服务可以轻松选择环境变量.但是,在前端应用程序中,这是不同的:应用程序在客户端的浏览器中运行.

我想通过环境变量配置我的应用程序,因为这使部署更容易.所有配置都可以完成,docker-compose.yml无需维护多个映像,每个映像都适用于所有可能的环境.只有一个不可变的图像.这遵循12因素应用原则,可以在https://12factor.net/config上找到.

我正在构建我的应用程序映像如下:

FROM node:alpine as builder
COPY package.json ./
RUN npm i && mkdir /app && cp -R ./node_modules ./app
WORKDIR /app
COPY . .
RUN $(npm bin)/ng build

FROM nginx:alpine
COPY nginx/default.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Run Code Online (Sandbox Code Playgroud)

app/config.ts,我有:

export const config = {
    REST_API_URL: 'http://default-url-to-my-backend-rest-api'
};
Run Code Online (Sandbox Code Playgroud)

理想情况下,我想在我的网站上做这样的事情docker-compose.yml:

backend:
  image: ...
frontend:
  image: my-frontend-app
  environment:
    - REST_API_URL=http://backend:8080/api
Run Code Online (Sandbox Code Playgroud)

所以我相信我应该改变它app/config.ts来替换REST_API_URL …

environment-variables 12factor docker dockerfile

20
推荐指数
3
解决办法
7606
查看次数