Linux部署前后端分离项目(SpringBoot+Vue)【Nginx部署】

需求引入

题外话:这种标题网上一搜全是,我为啥还写这篇文章,一是作为笔记,二是可能不同人遇到的问题不一样,处理方案也不同,我多发一篇,就帮助读这篇文章的你多一种部署成功的情况。

这个时候最多的是部署毕设吧,今天有朋友问我,我就整理成一篇文章供大家参考。

需求很简单,就是想把自己写的前后端分离的项目部署到Linux服务器上,我们要准备啥,首先就是前后端分离的一个项目,其次一个安装好nginx和jdk的服务器,我相信你也都有了,才看到这篇文章的,来吧,跟着开始。

Linux安装jdk可以看我的这篇文章:学妹跑过来抱着我的胳膊让我帮她在Linux上装jdk【手把手教学】

步骤

1、对前端项目的baseURL进行修改

82是你想在服务器那个端口访问这个项目,自己根据情况更改,XXXX是自己的服务器ip

加个api是为了后面在nginx处理,随便写,不一样非要是api,后面nginx中对应上就行

1
2
// baseURL: 'http://127.0.0.1:8082/pethospital/',
baseURL: 'http://XXXX:82/api/pethospital/',

image-20220426174636615

2、打包前端项目

在前端项目所在目录的控制台执行npm run build

image-20220426174930105

然后就会在项目的根目录下生成 dist 文件夹,一会再用。

3、打包后端项目

注意点说一下,打成jar包(其它什么包都行)但是后面步骤就不同了,就跟着打jar包即可,在pom.xml中加上spring-boot-maven-plugin

1
2
3
4
5
6
7
8
9
10
<packaging>jar</packaging>

<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

控制台执行mvn clean install -Dmaven.test.skip=true,打包同时抛弃测试用例。

image-20220426175717713

打包完成后,在target目录下就会出现一个jar包,留着下一步用,还有上面的前端的dist文件夹。

4、把jar包和dist文件夹上传的服务器

用什么工具都行xftp或MobaXterm,为了能跟着搞成,我下面说的可能很细,嫌弃多余跳着看即可,有基础的根据自己情况变更都可以,没经验的就跟着来,至少能成功。

在服务器根目录下创建个 文件夹存放 mkdir pet,然后把jar包和dist文件夹都移动到这里就行

image-20220426185159386

5、修改nginx的配置文件

我的配置文件目录在 /etc/nginx(cd /etc/nginx),编辑nginx.conf文件(vim nginx.conf),因为我的里面配置了其它的内容,我都粘贴出来看起来可能更复杂,我截取重点粘出来。

设置个跳转路径 ,相当于 ip地址/pet 跳转到 IP地址:82端口,这一步不配置也行,直接访问82端口也行。

:zero: 此处请 注意 :提前把服务器的82端口打开

1
2
3
4
5
6
7
8
9
10
server {
listen 80;
#填写绑定证书的域名
server_name XXXX;
...

location /pet {
rewrite ^/(.*) http://XXXX:82;
}
}

:one:注意 :配置到这就把服务器对应的后端项目对应的端口打开,我的后端设置的8083端口

两个注意点:

# 这里就是 dist 的文件位置 root /pet/dist;

# 这里端口对应后端端口 proxy_pass http://XXXX:8083;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
http{
...

server {
listen 82;
server_name pet;

location / {
# 这里就是 dist 的文件位置
root /pet/dist;
index index.html;
proxy_ssl_session_reuse off;
try_files $uri $uri/ /index.html;
}
#拦截/api/请求,因为所有的请求在前端被处理成 '/api+后端接口'形式
location /api/ {
#开启重写日志记录,这个会记录在error.log里面,级别为notice
rewrite_log on;
#重写规则,可根据实际情况调整。
rewrite ^.+api/?(.*)$ /$1 break;
# 这里端口对应后端端口
proxy_pass http://XXXX:8083;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}


}

执行下面两步:

校验配置文件:nginx -t

重启gninx:nginx -s reload

6、启动后端项目

切换到 /pet 目录下

启动命令:

nohup java -Dfile.encoding=utf-8 -jar pet-hospital-0.0.1-SNAPSHOT.jar >> log 2>&1 &

用nohup可以在窗口关闭时,使程序继续运行,我们也可以写个启动的脚本,这样重启起来方便

vim startPet.sh 编辑脚本

1
2
3
4
5
6
7
8
9
10
#!/bin/bash
pid=(`ps -ef | grep pet | grep -v grep | awk '{print $2}'`)
if [ -n $pid ]
then
echo "is null"
else
ps -ef | grep pet | grep -v grep | awk '{print $2}' | xargs kill
fi

nohup java -Dfile.encoding=utf-8 -jar pet-hospital-0.0.1-SNAPSHOT.jar >> log 2>&1 &

在变成可执行命令:chmod +x startPet.sh

在执行: ./startPet.sh (启动或重启)

这样就会参生log和nohup.out文件了,

image-20220426192659050

7、日志查看

看倒数n行 : tail -n 100 log

一直查看: tail -f log

看下日志后端没问题,基本就是搞定了

浏览器访问:服务器ip/pet 就可以访问看到项目的界面了