【踩坑指南】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服務器就可以進行“熱更新”。