【踩坑指南】Nginx服务器发布Ant Design以及Ant Design Pro项目

Nginx服务器发布Ant Design以及Ant Design Pro项目

• 通过终端命令行进入项目目录
• 发布完成

通过终端命令行进入项目目录

1.// 在编译的项目中进行打包指令
npm run build

2. 找到打包后的文件夹

执行完打包指令后会在原来的项目结构中生成一个新的文件夹，这里分为两种情况

1).ant design (普通react)项目
此时会生成一个名为“build”的文件夹

2).ant design pro项目
此时会生成一个名为“dist”的文件夹

这两个文件夹内的文件都是属于打包后的项目

3.发布项目配置 修改nginx的nginx.conf文件
1).ant design (普通react)项目 ,
/************************  Ant Design ************************/
配置文件
server {
listen       80;
server_name  localhost;
root 项目路径;

location /static/ {
alias 项目路径下static/;
}
location / {
try_files $uri /index.html;
}
}

2).ant design pro项目
pro项目的不同点在于如果config.js配置了代理，则需要配置一遍代理，否在接口无法访问会出现500错误.
/**********************  Ant Design Pro **********************/
配置文件
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]\.";

# 打包后项目路径 指向dist
root /Users/xxxxxx/dist;

location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;

# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

}
location /server/api/ {
# 代理接口访问
proxy_pass http://localhost:8080/;
proxy_set_header   X-Forwarded-Proto $scheme;
proxy_set_header   X-Real-IP         $remote_addr;
}
}

发布完成

通过nginx发布后每次更新项目只需要替换掉打包后的文件即可，不需要重启Nginx服务器就可以进行“热更新”。

• 点赞 2
• 收藏
• 分享
• 文章举报