要想成为一个好的开源项目，一个官网必不可少，Pro 也不例外。 Pro 还有一个预览界面，其中带有 API 的访问，需要支持一定的动态能力。

技术选型

静态网站部署起来非常简单，市面上很多种方案来实现。比较常用的有：

面向国内用户的话 firebase 是不能够使用，所以最好的方案是 netlify，免费额度不少，并且拥有很多方便的功能，比如 PR 的 preview。现在 Ant Design 和 Pro 的 PR 预览全部是使用的 netlify，并且 支持 master 更新自动部署，统计， function 等一系列功能。但是 netlify 在国内并没有节点，访问速度延时在 3000ms 以上，如果你的网站在 2m 以上访问速度会很慢。

Github Pages 虽然是 Github 的官方方案，但是只支持纯静态页面，不支持任何动态能力。而且访问速度也不够理想。cloudflare 的 cdn 这时候就可以来解决这个问题，cloudflare 在全球拥有的部署节点，可以保证在全球的访问速度在 1000ms 以内。

Preview 的部署

官网是一个静态网页，使用 github + cloudflare 可以完美解决问题。但是 Pro 的预览是有 api 的，需要部署一个后台服务，而且作为脚手架，其中的一些代码的不能开放给用户使用。API 方面我们选择了 netlify，netlify function 基于的 AWS 的 function，稳定性与易用性都还不错。静态网站可以配合 cloudflare 加速来保证速度。

在 fetch:blocks 时，我们来会将 SettingDrawer 和拷贝区块的按钮加到项目中去，SettingDrawer 并不推荐在生产环境中使用，他是为了在预览界面中展示能力才加入的。

cloudflare 不支持三级域名，如果需要像我们一样为其加速，可以考虑氪金。

内置变量

在 Pro 的项目中我们增加了一个环境变量 ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION 判断是否是 preview 的环境，如果 ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION 我们会注入 Google Analytics 和 umi-plugin-pro 插件，umi-plugin-pro 的插件会加入讲 Pro 的 Api 请求转化为 https://ant-design-pro.netlify.com/api/xxx 。并且会将默认的用户权限设置为 admin，让预览用户可以访问任何页面。

不推荐在实际项目中打开 ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION 和使用 fetch:blocks 。

  • SettingDrawer 并不适合在生产中使用，使用方案有点问题。
  • ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION 打开会造成权限问题，并且会将你的项目上报到我们的 Google Analytics 中。ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION 中这个字段又长又罗嗦就是为了不让用户使用。