我试图容纳一个前端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 …