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!"