Nginx部署Ant Design Pro项目

1.npm run buile
打包命令,执行此命令后会生成一个”dist“文件夹

2.将dist文件中的所有文件复制到nginx的html目录下
Mac的操作系统中,nginx的html目录可能在/usr/local/Cellar/nginx/1.17.10/html
(Windows没有实验)

3.配置nginx.co
nfig文件

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;
    	}
}  

4.nginx -s reload
重新加载文件并启动

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值