如何将Angular项目assets文件夹迁移至受保护的Azure Storage并正常访问

以下是3种经过生产环境验证的落地思路，可根据你的业务场景选择：

方案1：CDN+动态SAS令牌认证（最推荐，适配高流量公网应用场景） #

• 先给Azure Storage的assets容器绑定Azure CDN，在CDN规则引擎中配置访问校验规则，要求所有资源请求必须携带有效SAS令牌，拦截无令牌的非法请求
• Angular侧统一管理资源根路径，在environment.prod.ts中配置存储资源前缀：

export const environment = {
  production: true,
  storageAssetsBase: 'https://<你的CDN域名>/assets/'
};

• 后端服务提前配置好Storage的访问权限，用Azure SDK生成有效期1~2小时的短时效SAS令牌，Angular应用初始化时从后端拉取该令牌缓存到本地
• 封装全局assetUrl管道，自动给所有静态资源路径拼接前缀和SAS令牌，业务层无需单独调整资源引用逻辑：

// asset-url.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { environment } from '../environments/environment';
import { CommonService } from '../services/common.service';

@Pipe({name: 'assetUrl', pure: false})
export class AssetUrlPipe implements PipeTransform {
  constructor(private commonService: CommonService) {}

  transform(relativePath: string): string {
    const sasToken = this.commonService.getStorageSasToken();
    return `${environment.storageAssetsBase}${relativePath}?${sasToken}`;
  }
}

• 模板调用示例：<img src="{{ 'imgs/banner.png' | assetUrl }}">

方案2：后端反向代理（无额外服务依赖，适合小流量场景） #

• 给现有的业务后端服务（比如部署在Azure App Service的接口服务）新增/assets/*代理路由，所有访问该路由的请求，由后端通过Azure Managed Identity（无需硬编码密钥）从Storage拉取资源后返回给前端
• Angular侧直接修改angular.json中的资源引用前缀，统一指向后端的代理路由即可，业务代码无需额外调整，适配成本最低

注意：需要给代理接口配置强缓存规则，避免重复拉取Storage资源导致不必要的性能损耗和带宽成本

方案3：Azure AD身份认证（适合内部企业应用场景） #

• 给Storage的assets容器配置Azure AD访问权限，给应用用户分配「Storage Blob数据读取者」角色
• Angular侧集成@azure/msal-angular库完成Azure AD登录，封装HTTP拦截器自动给所有发往Storage域名的请求添加Authorization认证头
• 该方案无需后端额外开发接口，但要求所有访问资源的用户必须先完成企业身份认证，不适合面向外部匿名用户的公网应用

通用注意事项：绝对禁止在前端代码中硬编码SAS令牌、Storage访问密钥等敏感凭证，所有认证信息必须由后端动态生成或者通过OAuth2流程动态获取，避免资源泄露。

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