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
重新加載文件並啓動

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章