Azure多路径独立静态Web应用托管的存储与CDN配置方案咨询

关于存储账户的部署边界 #

• 完全无需为每个独立静态应用单独创建存储账户，所有应用可以统一托管在同一个Azure存储账户下。
  很多人误以为Blob静态托管只能托管单个网站，本质上它就是个带公开访问权限的静态文件目录服务：核心是依托存储账户内固定的$web容器作为根访问路径，你只需要在这个容器下创建和访问路径一一对应的一级子目录，直接将每个独立静态项目的构建产物上传到对应子目录即可——比如把app1的产物放在$web/app1/、app2的产物放在$web/app2/，访问路径example.com/app1、example.com/app2可以和这个目录结构天然对齐，不需要额外的路径映射配置。
  这里需要注意的小细节：每个前端项目的构建配置要适配子路径前缀，比如把React、Vue项目的资源base路径设置为/app1/、/app2/，避免静态资源加载404。

关于CDN的配置选择与拆分的成本影响 #

• 完全可以用单个Azure CDN统一承接所有子路径应用的流量，不需要为每个存储账户/每个应用单独配置独立CDN。
  你只需要把单个CDN端点的源站直接绑定上述存储账户的静态网站访问端点，因为源站的目录结构和请求路径天然匹配，绝大多数场景下连自定义路由规则都不需要额外配置，CDN可以直接将/app1/*、/app2/*的请求回源到对应的Blob目录下完成响应。

如果强行采用“一个应用对应一个存储+一个独立CDN”的一一映射配置，会带来三方面的成本抬升：

• 固定资源成本线性上涨：Azure CDN的每个独立端点都会产生基础的固定资源占用计费，6个独立端点的固定成本差不多是单端点的6倍，哪怕所有应用的总流量很小，也无法享受资源合并带来的规模成本优化
• 缓存效率下降带来的流量成本上升：多独立CDN的场景下，不同路径的访问缓存是分散在独立端点的缓存分区中的，跨路径的公共静态资源（比如通用前端SDK、开源字体、公共图标）无法共享缓存，实际回源的流量占比会比单统一配置高20%-30%，进一步推高回源流量费用
• 运维管理成本增加：每新增一个应用就要重复走一遍存储创建、静态托管开启、CDN端点创建、域名绑定、证书配置的全流程，6个应用的运维工作量是统一配置的5-6倍，还容易出现跨应用配置不一致的问题

适配当前场景的最优实现方案 #

针对你目前5-6个独立静态应用、同域名下按路径区分访问的需求，最优架构完全不需要做冗余的资源拆分：

1. 存储层：创建1个通用v2块Blob存储账户，开启静态网站托管能力，在默认$web容器下为每个应用创建独立的一级子目录，上传对应项目的构建产物，全程不需要为每个应用单独拆分存储
2. CDN层：创建1个Standard_Microsoft SKU的Azure CDN配置文件，添加1个自定义端点，源站绑定上述存储账户的静态网站访问地址；将example.com的DNS CNAME记录指向这个CDN端点，开启自动托管的TLS证书完成域名绑定，不需要为每个应用单独申请证书或者拆分端点
3. 缓存优化：在CDN端配置分层缓存规则——对js、css、图片等带哈希后缀的静态资源设置7天以上的长缓存TTL，对HTML入口文件设置短缓存TTL，最大化提升缓存命中率，降低回源成本
4. 弹性扩展预留：如果后续某个应用的流量规模远超其他应用，再单独将这个应用拆分到独立的存储和CDN资源即可，初期统一配置的架构完全可以支撑6个以内静态应用的访问需求，不存在性能隔离不足、应用间互相影响的问题

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