Linux部署vue前端+Springboot后端項目

簡介

記錄手動部署前端，后端的過程和一些坑。

前端部署

前端項目使用Umi打包
部署參考了: Ant Design
選擇了前后端分離部署，即使用nginx服務器。

安裝nginx

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

wget -c https://nginx.org/download/nginx-1.11.6.tar.gz

tar -zxvf nginx-1.11.6.tar.gz

cd nginx-1.11.6

./configure --prefix=/work/nginx

make && make install

Nginx配置文件

#user  nobody;
worker_processes  1;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8000;
        server_name  172.168.122.1;
        
        # 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]\.";        

        #charset koi8-r;

	#root目錄 (前端項目編譯好的dist文件放置目錄)
        root /work/deploy/dist1;
	
        #index index.html;


        # 用於配合 browserHistory 使用，配置路由,使所有uri重定向到index.html
        location / {
	        try_files $uri $uri/ @fallback; 
	        #try_files $uri $uri/ /index.html; # 該配置適合 hashHistory 使用
			
			index index.html;
			
	        proxy_set_header   Host             $host;
	        proxy_set_header   X-Real-IP        $remote_addr;
	        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	        proxy_set_header   X-Forwarded-Proto  $scheme;
	    }
		
		# 重定向路由
	    location @fallback {
		# 因為前端配置了 contextPath=logs 正確寫法如下
	        rewrite ^.*$ /logs/index.html break; 
			
		#rewrite ^.*$ /index.html break; # 報錯500，因為項目中設置上下文路徑是 /logs
	    }
		
	    # 精確匹配 http://172.168.122.1:8000/ 的情況，使其能重定向路由
	    location =/ {
	        rewrite ^.*$ /logs/ui/index.html break;
	    }
		
 	# 后端項目部署的接口api代理
        location /api {
           proxy_pass http://172.168.122.1:8088/logs;
           proxy_set_header   X-Forwarded-Proto $scheme;
           proxy_set_header   X-Real-IP         $remote_addr;
        }


    }

}

前端Dist文件部署

要把前端編譯好的dist文件放到nginx配置文件中，指定的代理位置

前端編譯好的代碼：/work/deploy/dist.zip
前端Nginx部署目錄：/work/deploy/dist1

自定義的替換dist部署腳本

dist.sh

rm -rf /work/deploy/dist1
unzip /work/deploy/dist.zip
mkdir -p /work/deploy/dist1/logs/ui
cp /work/deploy/dist/* /work/deploy/dist1/logs/ui
rm -rf  /work/deploy/dist

最后啟動nginx前端即部署完畢。

此時前端訪問鏈接：http://172.168.122.1:8000/logs/index.html

后續要重新部署前端新編譯的代碼，直接執行dist.sh替換新的dist文件即可。

問題:訪問頁面出現404或500

比如訪問：http://172.168.122.1:8000/logs/detail.html

原因可能是：
前端配置了上下文路徑 contextPath=logs

但是，Nginx沒有配置重定向路由 @fallback，或者@fallback的rewrite中漏加上 logs 的上下文路徑

另一種方式，使用Hash
這種方式可以不配置重定向路由 @fallback

但是，此時訪問的url地址會變成這個樣子：
http://172.168.122.1:8000/logs/index.html#/logs/detail.html

后端部署

Springboot打的logs.jar包上傳到服務器
上傳目錄：/work/deploy

執行自定義部署腳本startup.sh

startup.sh

#!/bin/bash
#設置Java包名稱,部署路徑
NAME=logs.jar
DIR=/work/deploy/
echo $DIR$NAME

pkill -f $DIR$NAME

cd $DIR
pwd
nohup java -jar $DIR$NAME > msg.log 2>&1 &
echo "start success!"