执行
tyarn build
完成后，会看到 Antd Pro 项目根目录下多了个 dist 目录。这个即是打包好的线上代码。
从 package.json 可以看到 build 对应的实际命令：
"build": "umi build",
将 dist 目录 scp 到生产服务器上，然后增加 nginx 配置：
location / {
root /home/path_of_project/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
reload nginx 配置，即可通过浏览器线上访问 Antd Pro 管理后台界面了。
吐槽一下
这种打包方式，很多资源文件 js css 非常大，有的接近 2M，明显的感受是，第一次打开一些页面时，需要等待， 体验非常不好。
> ls -lahS dist/
total 22M -rw-r--r-- 1 zhongwei zhongwei 1.8M Aug 26 13:05 p__Metrics.753ce86b.async.js -rw-r--r-- 1 zhongwei zhongwei 1.2M Aug 26 13:05 umi.dcbc12e1.js
-rw-r--r-- 1 zhongwei zhongwei 1.1M Aug 26 13:05 p__Settings.5790b8a5.async.js -rw-r--r-- 1 zhongwei zhongwei 1.1M Aug 26 13:05 p__Products.f4efe32c.async.js -rw-r--r-- 1 zhongwei zhongwei 1.1M Aug 26 13:05 p__Articles.96f69023.async.js
-rw-r--r-- 1 zhongwei zhongwei 805K Aug 26 13:05 p__Agents.c770de54.async.js
-rw-r--r-- 1 zhongwei zhongwei 804K Aug 26 13:05 p__Devices.29e5291d.async.js
-rw-r--r-- 1 zhongwei zhongwei 804K Aug 26 13:05 p__AgentRequests.2213d531.async.js
js 文件 800K 起步，稍微加上点富文本编辑器，图表库，就得上 1M。
Makefile 自动打包部署
.PHONY: deploy_front
deploy_front:
cd frontend/ && tyarn build
tar cvzf frontend.tar.gz frontend/dist
scp frontend.tar.gz user@sunzhongwei.com:~/app_backend/
注意第一行命令，进入前端目录，执行打包，然后退回到当前目录生成 tar 包，scp 上传。
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式