#antd Pro 项目环境搭建
##一、搭建项目
参考网址:https://pro.ant.design/docs/deploy-cn
###1、安装
从 GitHub 仓库中直接安装最新的脚手架代码。
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
###2、安装依赖
$ npm install
如果网络状况不佳,可以使用 cnpm 进行加速。
####3、运行
$ npm start
##二、配置本地代理
###1、cnpm install nginx
###2、修改nginx.conf文件内容为
server {
listen 80;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
}
location /api {
proxy_pass https://preview.pro.ant.design;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
}
server {
# 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
listen 443 ssl http2 default_server;
# 证书的公私钥
ssl_certificate /path/to/public.crt;
ssl_certificate_key /path/to/private.key;
location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass https://preview.pro.ant.design;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
}
}
###3、修改config.js文件,添加以下代码
proxy: {
'/api/': { //匹配所有以/api/为开头的接口
target: 'http://192.168.1.191:8080/', //后端服务器地址
changeOrigin: true,
pathRewrite: { '^/api/': '' }, //因为我们项目的接口前面并没有api 所以直接去掉
},
},
##三、项目构建发布
1、打包项目为dist文件
$ npm run build
2、发布
然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。
重新启动项目,访问 http://localhost:8080/ 就可以看到效果。