Nginx部署AntDesignpro 利⽤Ant Design pro开发的项⽬，如何⽤Nginx部署呢？
第⼀步：把项⽬打包，打包命令如下：
npm run build
运⾏完毕会在项⽬⽬录下⽣成dist⽂件夹。
第⼆步：想要测试打包好的代码是否可以正常运⾏，安装serve，如下命令
npm i serve -g
serve安装完毕，利⽤serve运⾏打包好的代码，运⾏命令：
serve dist
测试完毕，代码可以正常运⾏。
第三步：⽤Nginx进⾏部署。
1.下载Nginx：/en/download.html
我的部署在windows系统上，所以下载的windows 版本  nginx-1.16.0，下载完毕解压，如下图
2.把打包好的dist⽂件夹复制到html⽂件夹下。
3.打开conf⽂件夹，到f⽂件，打开编辑⾥⾯的内容如下，并保存
#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      pes;
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 5000;
# 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使⽤
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
# 如果有资源，建议使⽤ https + http2，配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ preview.pro.ant.design/$1 permanent;
}
nginx部署前端项目
location /api {
# proxy_pass  127.0.0.1:3999;  后台服务地址
proxy_pass  127.0.0.1:3999;
proxy_set_header  X-Forwarded-Proto $scheme;
proxy_set_header  Host              $http_host;
proxy_set_header  X-Real-IP        $remote_addr;
}
}
}
4.在⽬录下打开cmd窗⼝，运⾏命令：nginx -c f  如下图，nginx服务就开启成功了，现在可以在浏览器打开地址：localhost:5000/，查看我们部署的⽹站了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。