Antd Pro V5 使用 Nginx 部署到线上生产服务器

发布时间: 2021-08-26 15:23:52 作者: 大象笔记

执行

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 上传。

我是一名山东烟台的开发者,联系作者