Angular项目一次性构建后多路径复用 无需重编译及多环境容器部署需求

要实现一次构建、多路径部署，同时复用容器镜像，核心是把编译时固定的配置（base href、API路径）改成运行时动态获取/注入，下面是具体实现步骤：

1. 动态设置base href #

Angular默认的<base href>是编译时通过--base-href参数固定的，要改成运行时自动适配当前路径：

在index.html的<head>里添加一段前置脚本，动态计算并设置base href：

<head>
  <script>
    // 提取当前URL的路径前缀（比如访问mysite/A/index.html时，得到/mysite/A/）
    const pathSegments = window.location.pathname.split('/').filter(Boolean);
    const basePath = pathSegments.length > 1 ? `/${pathSegments.slice(0, -1).join('/')}/` : '/';
    document.write(`<base href="${basePath}">`);
  </script>
  <!-- 原有的meta、title等内容 -->
</head>

这段脚本会自动识别当前页面的部署路径，无需手动修改。

2. 运行时动态配置API路径 #

不能把API地址写死在environment.ts里（编译后无法修改），要通过外部配置文件实现动态加载：

步骤1：创建外部配置文件 #

在src/assets目录下新建config.json：

{
  "apiBaseUrl": ""
}

步骤2：编写配置加载服务 #

创建src/app/services/config.service.ts，负责启动时加载配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  public config: { apiBaseUrl: string } | null = null;

  constructor(private http: HttpClient) {}

  loadConfig(): Promise<void> {
    return this.http.get<{ apiBaseUrl: string }>('/assets/config.json')
      .toPromise()
      .then(config => {
        this.config = config;
      });
  }
}

步骤3：配置应用初始化钩子 #

在app.module.ts中注册APP_INITIALIZER，确保应用启动前加载完配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { ConfigService } from './services/config.service';

export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  // ...其他模块、组件配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

步骤4：在API服务中使用动态配置 #

调用API时，从ConfigService获取动态路径：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ConfigService } from './config.service';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient, private configService: ConfigService) {}

  fetchData() {
    if (!this.configService.config) throw new Error('Config not loaded');
    return this.http.get(`${this.configService.config.apiBaseUrl}/data`);
  }
}

3. 容器化部署（复用镜像） #

用Docker构建包含编译后静态文件的镜像，通过环境变量在启动容器时动态修改配置，实现同一镜像适配不同环境：

步骤1：编写Dockerfile #

# 构建阶段：编译Angular项目
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --prod

# 运行阶段：用Nginx托管静态文件
FROM nginx:alpine
# 复制编译后的文件
COPY --from=builder /app/dist/your-project-name /usr/share/nginx/html
# 复制配置修改脚本
COPY set-config.sh /docker-entrypoint.d/
# 赋予脚本执行权限
RUN chmod +x /docker-entrypoint.d/set-config.sh
# 复制Nginx配置（处理单页应用路由）
COPY nginx.conf /etc/nginx/conf.d/default.conf

步骤2：编写Nginx配置（nginx.conf） #

确保支持单页应用路由刷新：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 处理Angular路由，刷新页面不404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location /assets/ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

步骤3：编写配置修改脚本（set-config.sh） #

在容器启动时，根据环境变量修改config.json：

#!/bin/sh
# 默认值，可通过环境变量覆盖
API_BASE_URL=${API_BASE_URL:-"/api"}

# 替换config.json中的API路径
sed -i "s|\"apiBaseUrl\": \"\"|\"apiBaseUrl\": \"${API_BASE_URL}\"|g" /usr/share/nginx/html/assets/config.json

exit 0

步骤4：构建并运行容器 #

• 构建镜像：

docker build -t angular-multi-env .

• 部署到mysite/A路径：

docker run -d -p 8080:80 \
  -e API_BASE_URL="/mysite/A/api" \
  angular-multi-env

• 部署到mysite/B路径：

docker run -d -p 8081:80 \
  -e API_BASE_URL="/mysite/B/api" \
  angular-multi-env

关键注意事项 #

• Angular路由建议使用相对路径，或确保RouterModule.forRoot()中未硬写useHash: true（除非你需要哈希路由）。
• 容器启动脚本中的sed用|作为分隔符，避免路径中的/导致替换失败。
• 如果部署在反向代理后，需确保代理服务器正确传递请求路径给Nginx容器。

内容的提问来源于stack exchange，提问作者Nicola Discardi