要想成为一个好的开源项目,一个官网必不可少,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 中这个字段又长又罗嗦就是为了不让用户使用。