如何将React应用打包并推送至Azure CDN，供.NET MVC应用复用

我来帮你一步步搞定这个流程，其实操作起来并不复杂，咱们分阶段来：

第一步：准备Azure上的存储与CDN资源 #

首先你得有对应的Azure资源来承载和分发你的bundle.js，推荐用存储账户 + CDN的组合：

• 1. 创建一个Azure存储账户：选标准存储（General Purpose v2就行），区域选离你用户近的。
• 2. 在存储账户里创建一个Blob容器：比如命名为react-bundles，记得把容器的访问级别设置为Blob（匿名读取访问Blob）（这样CDN能拉取文件，后续也可以通过CDN规则限制访问）。
• 3. 创建Azure CDN Profile和端点：
  • 新建CDN Profile，选合适的定价层（比如Standard Microsoft就够基础需求）。
  • 在Profile下创建CDN端点，源类型选“存储账户”，然后关联你刚才创建的存储账户和容器。等待端点部署完成（大概需要10-15分钟）。

第二步：上传bundle.js到存储容器 #

你有几种方式可以上传生成好的bundle.js：

方式1：Azure Portal手动上传 #

• 登录Azure Portal，找到你的存储账户→进入刚才创建的容器→点击“上传”，选择本地生成的bundle.js（如果有对应的.map文件或者其他依赖资源，也一起上传）。

方式2：用AzCopy命令行上传 #

如果需要自动化或者批量上传，AzCopy更方便：

azcopy copy "本地bundle.js路径" "https://你的存储账户名.blob.core.windows.net/react-bundles/bundle.js" --recursive

方式3：用Azure CLI #

az storage blob upload --account-name 你的存储账户名 --container-name react-bundles --name bundle.js --file 本地bundle.js路径

第三步：获取CDN上的bundle.js访问地址 #

当CDN端点部署完成后，你可以通过https://你的CDN端点域名/react-bundles/bundle.js来访问文件。比如你的端点域名为myreactcdn.azureedge.net，那完整地址就是https://myreactcdn.azureedge.net/react-bundles/bundle.js。

注意：刚上传的文件可能需要等几分钟CDN缓存同步，要是访问不到，可以先直接访问存储账户的Blob地址测试，确认文件没问题后再等CDN生效。

第四步：在.NET MVC应用中引入CDN资源 #

打开你的.NET MVC项目，找到对应的视图文件（比如_Layout.cshtml或者需要用到React组件的具体视图），添加script标签引入CDN地址：

<script src="https://myreactcdn.azureedge.net/react-bundles/bundle.js"></script>

如果你的bundle.js有哈希后缀（比如bundle.abc123.js，这是React构建时的默认行为），记得把地址里的文件名改成对应的哈希版本，或者可以考虑在MVC里用配置文件管理这个版本号，方便后续更新。

一些额外注意事项 #

• 缓存刷新：当你更新了bundle.js并重新上传后，需要在Azure CDN端点里手动刷新缓存（进入端点→“刷新”→输入/react-bundles/bundle.js路径），不然用户会一直拿到旧的缓存文件。
• React构建配置：如果你的React应用里有静态资源（比如图片、字体），记得在构建时设置正确的PUBLIC_URL，比如在create-react-app里可以在.env文件里加PUBLIC_URL=https://myreactcdn.azureedge.net/react-bundles，这样构建后的资源引用会自动指向CDN路径，不会出现404。
• 访问权限：如果不想把存储容器设为公开，可以在CDN里配置“源验证”，或者用SAS签名URL让CDN拉取文件，这样更安全。

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