初始化

搭建方法随时可能更新，请注意查看最新官网相关文档

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。

官网：pro.ant.design/zh-CN/docs/getting-started/

一些准备：

由于国内网络和前端的特殊性，在安装依赖等方面可能会失败或导致无法启动，浪费大量的时间，因此 Ant Design 推荐使用 tyarn - npm (npmjs.com) 及 cnpm - npm (npmjs.com) 工具。

主要搭建指令：

1
2
npm i @ant-design/pro-cli -g   # 全局安装
pro create myapp               # 在项目文件夹下使用，myapp为项目名
一个可能遇到的问题

/usr/local/lib/node_modules/@ant-design/pro-cli/src/create/generators/ant-design-pro/index.js:10
const sortPackage = require(‘sort-package-json’);
Error [ERR_REQUIRE_ESM]: require() of ES Module

解决方法：
进入 @ant-design/pro-cli 全局安装目录（一般在 C:\Users\yourname\AppData\Roaming\npm\node_modules\@ant-design\pro-cli）中执行 npm i [email protected] -D（如果初始化失败则 npm cache clean --force）。

下载完成后终端输入：

1
yarn # 如果可以的话，是 tyarn。如果还出错，再试试 cnpm install

项目目录可看到生成好的依赖包：node_modules

注意：脚手架工具生成了项目后

  • 不要改动任何代码，先保证项目能运行
  • 确认环境是否匹配、安装项目依赖
1
2
yarn run start # 你可以看看package.json里的script，以模拟数据的方式运行
# npm run start也行

注意使用 F12 及时看错误。

image.png

react 是对 js 的一层封装，而 umi 是对 react 的进一步封装。

【可选】Ant Design Pro 项目瘦身

项目瘦身过程中，每做一步就运行测试

移除国际化模块（国际化集成了多种语言，如无国际化需求可以删掉）：npm run i18n-remove。这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

然后自己手动删掉 /src/locales 文件夹。

一些解决方案：

其它文件的删除（不同版本下的操作略有不同）：

  • 移除测试工具：/tests
  • （在老版本中出现）移除 e2e（自动化测试）：删除 src/e2e 文件夹
  • （在老版本中出现）移出自动化测试框架 playwright.config.ts
  • 移除默认页面时记得删掉路由
  • 移除 /src/services/swagger 接口文档工具

【可选但不推荐】Umi UI 加速开发

目前不再推荐使用 Umi UI 组件

只有框架的 V3 版本支持悬浮的 Umi UI 按钮：

1
2
npm i @ant-design/[email protected] -g
pro -v # 查看当前安装的版本

旧版本脚手架：

image.png

1
yarn add @umijs/preset-ui -D

多环境

关键的环境变量：

1
2
process.env.NODE_ENV
// 'development', 'production'

构建

执行构建命令：

1
npm run build

构建生成的文件在文件夹 /dist 中。

部署

本地部署

serve 工具可以在本地启动一个静态文件服务器。如果你需要将网站部署到正式环境，可以使用 Vercel 进行部署。

安装 serve 工具：

1
npm install serve -g # 全局安装

进入生成的文件夹 /dist 中，执行：

1
2
3
4
5
6
7
8
9
10
11
12
/dist> serve

   ┌──────────────────────────────────────────┐
   │                                          │
   │   Serving!                               │
   │                                          │
   │   - Local:    http://localhost:3000      │
   │   - Network:  http://192.168.30.1:3000   │
   │                                          │
   │   Copied local address to clipboard!     │
   │                                          │
   └──────────────────────────────────────────┘

Nginx 部署

Linux+Nginx

将文件夹 /dist 压缩成包 dist.zip 上传到服务器。

1
2
3
4
5
6
7
# 解压文件
unzip dist.zip -d myapp
# 把dist内容移出一层
cd myapp/dist
mv * ../
cd ..
rm -rf dist

假设 myapp 文件夹目录位置为：/var/www/temp_test/myapp。Nginx 配置文件的写法为：

1
2
3
4
5
6
7
8
server{
	server_name	projects.uuanqin.top; # 域名
	# 前端
	location / {
		root /var/www/temp_test/myapp;
		index	index.html	index.htm;
	}
}

上面是配置文件关键内容写法，端口号什么的自行补充。上面的配置可以使用 certbot 工具启用 HTTPS。详看：Linux 服务器 HTTPS 的配置。

重启 Nginx：

1
2
systemctl restart nginx
# 或 service nginx restart

完成登录。

Docker 容器部署

项目源码中新建一个文件夹 docker 用于存放构建 Docker 需要的相关文件。

在文件夹 docker 中新建 nginx.conf：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

	# 如果用户访问某个网页找不到的话就降级尝试访问index.html
    location / {
        try_files $uri /index.html;
    }
}

项目源码根目录中新建 Dockerfile：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
FROM nginx

# 指定工作目录
WORKDIR /usr/share/nginx/html/

# 【可选】指定用户
USER root

# 把我们的配置文件复制到服务器Nginx的配置文件中
COPY ./docker/nginx.conf /etc/nginx/conf.d/

COPY ./dist  /usr/share/nginx/html/

# 【可选】显示指定端口
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Docker 构建：

1
2
# 前端
docker build -t myapp:v0.0.1 .

Docker 运行：

1
2
# 前端
docker run -p 1122:80 -d myapp:v0.0.1 # 主机端口改一下比如1122，80可能会被占用；-d 表示后台运行

那么服务器上的 nginx 增加以下配置，以将请求转发到 1122 端口。比如我的设置为，访问 projects.uuanqin.top 请求时将进行转发。

1
2
3
4
5
6
7
server{
	server_name	projects.uuanqin.top;
	# 前端
	location / {
		proxy_pass http://localhost:1122;
	}
}

上面是配置文件关键内容写法，端口号什么的自行补充。上面的配置可以使用 certbot 工具启用 HTTPS。详看：Linux 服务器 HTTPS 的配置。

浏览器访问：projects.uuanqin.top 即可打开前端应用。

附 docker 常用命令：

1
2
3
4
5
docker ps # 查看运行的镜像
docker kill <CONTAINER...> # 杀死运行中的容器
docker logs <CONTAINER> # 追踪容器的日志输出
docker images # 查看镜像
docker rmi -f IMAGE [IMAGE...] # 移除镜像

本文参考