面试题：Angular应用在Docker容器中的环境变量配置

Question

在将Angular应用部署到Docker容器时，假设应用需要连接不同环境的后端API（如开发、测试、生产环境），如何通过环境变量来动态配置API地址？请详细说明在Angular项目以及Dockerfile中该如何实现。

Answer 1

在Angular项目中实现

1. 创建环境配置文件：
   • 在src/environments目录下，通常有environment.ts（开发环境）和environment.prod.ts（生产环境）。
   • 可以再创建environment.test.ts用于测试环境。
   • 例如，在environment.ts中添加：

   export const environment = {
     production: false,
     apiUrl: 'http://localhost:3000/api' // 开发环境API地址
   };
   

   • 在environment.prod.ts中：

   export const environment = {
     production: true,
     apiUrl: 'https://prod-api.example.com/api' // 生产环境API地址
   };
   

   • 在environment.test.ts中：

   export const environment = {
     production: false,
     apiUrl: 'http://test-api.example.com/api' // 测试环境API地址
   };
   

2. 使用环境变量：
   • 在服务中注入environment，例如在src/app/services/api.service.ts中：

   import { Injectable } from '@angular/core';
   import { environment } from '../environments/environment';
   import { HttpClient } from '@angular/common/http';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ApiService {
     constructor(private http: HttpClient) {}
   
     getSomeData() {
       return this.http.get(`${environment.apiUrl}/some - endpoint`);
     }
   }
   

在Dockerfile中实现

1. 构建Angular应用：
   • 假设使用Node.js和npm，Dockerfile可以如下：

   # 使用Node.js基础镜像
   FROM node:14 - alpine as build - stage
   
   # 设置工作目录
   WORKDIR /app
   
   # 复制package.json和package - lock.json
   COPY package*.json./
   
   # 安装依赖
   RUN npm install
   
   # 复制项目文件
   COPY.
   
   # 构建Angular应用
   RUN npm run build
   
   # 使用Nginx镜像作为运行时镜像
   FROM nginx:1.21.6 - alpine
   
   # 复制构建结果到Nginx默认HTML目录
   COPY --from = build - stage /app/dist/<your - angular - app - name> /usr/share/nginx/html
   
   # 配置Nginx
   RUN rm /etc/nginx/conf.d/default.conf
   COPY nginx.conf /etc/nginx/conf.d
   
   # 设置环境变量
   ENV API_URL=http://localhost:3000/api
   
   # 启动Nginx
   CMD ["nginx", "-g", "daemon off;"]
   

2. 在运行容器时传递环境变量：
   • 使用docker run命令时，可以通过-e参数传递环境变量。
   • 例如，对于生产环境：

   docker run -d -p 80:80 -e API_URL=https://prod - api.example.com/api your - angular - app - image
   

   • 对于测试环境：

   docker run -d -p 80:80 -e API_URL=http://test - api.example.com/api your - angular - app - image
   

在Angular中读取Docker环境变量

1. 修改构建配置：
   • 安装@angular - cli - environment - webpack：

   npm install @angular - cli - environment - webpack
   

   • 在项目根目录创建webpack.extra.js文件：

   const path = require('path');
   
   module.exports = {
     plugins: [
       new (require('@angular - cli - environment - webpack').EnvironmentWebpackPlugin)({
         API_URL: process.env.API_URL
       })
     ]
   };
   

   • 修改angular.json文件，在architect.build下添加：

   "builder": "@angular - cli - environment - webpack:browser",
   "options": {
     "customWebpackConfig": {
       "path": "./webpack.extra.js"
     },
     // 原来的配置项...
   }
   

2. 在Angular应用中使用：
   • 在src/environments/environment.ts中：

   export const environment = {
     production: false,
     apiUrl: process.env.API_URL || 'http://localhost:3000/api'
   };
   

   • 这样，在运行时，Angular应用会优先使用Docker容器传递的API_URL环境变量来配置API地址。