极智开发 | nginx 部署 antd pro

欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

大家好，我是极智视界，本文介绍一下 nginx 部署 antd pro。

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端 / 设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板 / 业务组件 / 配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。nginx 是一个高性能的 http 和反向代理 web 服务器，同时也提供了 IMAP / POP3 / SMTP 服务。简单来说就是，antd pro 是前端脚手架，nginx 是 web 服务器。这里要讲的就是怎么把 antd pro 塞到 nginx 中，然后用 nginx 起前端应用。

文章目录

1. antd pro 打包
2. nginx 服务构建
3. nginx 部署 antd pro

1. antd pro 打包

首先快速构建一个 antd pro 脚手架工程：

# 工程名为 app
npx create-umi app

这里咱们选择了 ant-design-pro -> JavaScript -> simple。

继续：

cd app# 安装工程依赖，也就是第三方库
yarn# 启动测试
yarn start

在 chrome 中打开 http://localhost:8000，可以看到页面效果：

以上说明我们的前端工程在开发模式下是没有问题的，下面开始打包。

# 打包
yarn build

这个命令后会生成 dist 文件夹，里面放着我们打包的文件，可以直接用于静态部署。

当然，还有一些分析工具，如可以可视化分析依赖模块的体积分布，从而优化咱们的代码，可以使用如下命令：

yarn run analyze

可以看到页面中分布着很多的模块，各模块的面积大小和实际大小是等比例的，这样十分直观。在左上角还有个展开按钮，可以方便选择重点关心的模块进行细化分析：

2. nginx 服务构建

nginx 的安装方法可以参考我的这篇：《极智开发 | ubuntu 安装 nginx》。

启动 nginx 服务：

sudo /usr/local/nginx/sbin/nginx

然后打开浏览器，键入 ip 进行访问，如下，访问成功：

3. nginx 部署 antd pro

前面已经做好了全部的准备工作，包括 antd pro 打包的 dist，和 nginx 服务环境。

我们先把打包好的 dist 文件夹放到 ~nginx/html 下，然后我们只需要关注 nginx 的配置文件 ~nginx/conf/nginx.conf：

#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;server {listen       88;     # 自定义端口server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   ~/nginx/html/dist;       # 实际写成绝对路径index  index.html index.htm;try_files $uri $uri /index.html;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

以上重点关注几个地方：

server 里的 listen：这是需要配置的端口号；
server 里的 server_name：这是可配置的服务代理，若要配置则需要和 antd pro 里的 proxy 对应起来才能进行网页的访问。配置成 localhost 则可使用 ip: 端口 进行访问；
server 里的 location：这个地方需要配置我们刚打包的 dist 路径，包括 root 路径、index 文件名和 try_files;

启动服务看看：

sudo /usr/local/nginx/sbin/nginx  # 这样就行了# 为了以后方便也可以这样
sudo ln -s /usr/local/nginx/sbin/nginx /usr/bin/nginx
# 然后就可以直接
sudo nginx

然后我们在浏览器中打开 ip：88，可以看到在 antd pro 中使用 yarn start 后同样的页面，这就说明咱们的 antd pro 已经用 nginx 打包部署成功了。

好了，以上分享了 nginx 部署 antd pro 的方法。希望我的分享能对你的学习有一点帮助。

【公众号传送】

《极智开发 | nginx 部署 antd pro》

扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！