【原生部署】SpringBoot+Vue前后端分离项目_springboot与vue前后端分离

本次主要讲解SpringBoot+Vue前后端完全分离项目在CentOS云服务器上的环境搭建与部署过程，我们主要讲解原生部署。

一.原生部署概念

原生部署是指将应用程序（一般是指软件、应用或服务）在底层的操作系统环境中直接运行和部署，而不依赖于额外的中间件、框架或虚拟化技术。
在原生部署中，应用程序直接与操作系统进行交互，并利用操作系统提供的资源和功能来执行任务。这种部署方式通常需要考虑操作系统的兼容性和依赖项，以确保应用程序能够正确地在目标操作系统上运行。
原生部署的优点包括：

1. 性能高：由于没有中间层的额外开销，原生部署的应用程序可以更直接地访问底层系统资源，从而获得更好的性能。
2. 可控性强：可以直接控制操作系统环境和配置，更容易进行定制和优化，以满足特定的需求。
3. 可移植性好：原生部署允许将应用程序部署到多个操作系统上，从而实现跨平台的可移植性。

存在的问题：

1. 平台依赖性：原生部署的应用程序在不同的操作系统或架构上可能会有不兼容性的问题，需要做额外的适配。
2. 部署复杂性：原生部署通常需要手动进行配置和安装，可能需要额外的管理和维护工作。
3. 扩展性和弹性：相对于一些云原生或容器化部署方式，原生部署可能在扩展性和弹性方面具有一定的限制。

二.确定所需环境

为了能让项目正常运行，我们需要在Linux服务器上安装了以下软件和工具：
SpringBoot项目：

• Java Development Kit（JDK）： Spring Boot 是一个 Java 框架，需要 JDK来编译和运行。因为 SpringBoot 内嵌 Tomcat，因此我们无需再安装 Tomcat 服务器。
• Maven： Maven 是一个用于构建和管理 Java 项目的强大工具。 它提供了一种规范化的项目结构和一组标准化的构建配置，以简化项目的构建、依赖管理和项目报告等任务。
• MySQL（根据项目需要安装）：MySQL 是一个强大、稳定且易于使用的关系型数据库管理系统,可以用来存储系统执行时产生的数据。
• Redis（根据项目需要安装）：Redis 是一种开源的基于内存的键值存储系统，也被称为数据结构服务器。由于 Redis 的高性能和基于内存的特性，它常常被用作缓存服务器。将常用的数据放在 Redis 中可以加快数据访问速度，减轻后端数据库的负载。

Vue.js项目：

• Node.js和npm： Vue.js是一个JavaScript框架，使用Node.js作为运行环境。安装Node.js会自动安装npm（Node包管理器）。
• Nginx：Nginx 是一个高性能的HTTP和反向代理web服务器。

工具库：

• Git：Git 是一个分布式版本控制系统，广泛用于协作开发和源代码管理。上传项目代码服务器有两种方式：一是直接从本地拖拽代码文件上传到服务器上，二是使用Git在第三方代码托管平台下载我们上传的代码。

三.搭建环境

注：左边>>右边左边的代表所在文件目录，右边代表的是Linux指令。

1）Java安装

我们可以通过CentOS服务器上的yum指令快速安装好Java环境。

1. yum安装不用配置环境变量，它直接帮我们安装好了

~>> yum install -y java-1.8.0-openjdk*
1

2. 查看java版本,安装成功

~>> java -version
#openjdk version "1.8.0_322"
#OpenJDK Runtime Environment (build 1.8.0_322-b06)
#OpenJDK 64-Bit Server VM (build 25.322-b06, mixed mode)
1
2
3
4

2）Maven安装

1. 切换到用来存放软件的目录（自己选择存放位置）

~>> cd /root/services/
1

2. 使用curl在线下载Maven安装包

services>> curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz
1

3. 查看我们下载的安装包

services>> ls
#apache-maven-3.8.5-bin.tar.gz  
1
2

4. 使用tar对压缩包进行解压

services>> tar -zxvf apache-maven-3.8.5-bin.tar.gz
1

5. 查看解压出来的安装包

services>> ls
#apache-maven-3.8.5  #apache-maven-3.8.5-bin.tar.gz             
1
2

6. 进入到Maven的bin目录查看可执行文件所在路径

services>> cd apache-maven-3.8.5
apache-maven-3.8.5>> cd bin
bin>> ls
#m2.conf  mvn  mvn.cmd  mvnDebug  mvnDebug.cmd  mvnyjp
//这里的mvn是maven的可执行文件,咱们就是用这个文件去构建项目
1
2
3
4
5

7. 查看并复制当前所在目录路径

bin>> pwd
#/root/services/apache-maven-3.8.5/bin
1
2

8. 添加mvn到环境变量

bin>> vim /etc/profile
1

按下shift+g将光标定位到最后一行，在path后面添加Maven可执行文件所在路径: /root/services/apache-maven-3.8.5/bin

编辑完成后按ESC键退出编辑模式,输入:wq然后按下回车键保存退出。

9. 使文件修改生效

bin>> source /etc/profile
1

10. 切换到一个非Maven可执行文件所在目录，例如services，看看环境变量配置是否设置成功，查看maven版本

bin>> cd /root/services/
services>> mvn -v
#Apache Maven 3.8.5 (3599d3414f046de2324203b78ddcf9b5e4388aa0)
#Maven home: /root/services/apache-maven-3.8.5
#Java version: 1.8.0_322, vendor: Red Hat, Inc., runtime: /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.322.b06-1.el7_9.x86_64/jre
#Default locale: en_US, platform encoding: UTF-8
#OS name: "linux", version: "3.10.0-1160.45.1.el7.x86_64", arch: "amd64", family: "unix"
1
2
3
4
5
6
7

3）Git安装

1. Git的下载方式与Java一致

services>> yum install -y git
1

2. 查看git版本，检测是否下载成功

services>> git --version
git version 1.8.3.1
1
2

4）MySQL安装

（遇到选择都输入y即可）

1. 下载mysql

services>> yum install mysql
1

2. 下载mysql-server（3条指令分别执行）

services>> wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
services>> rpm -ivh mysql-community-release-el7-5.noarch.rpm
services>> yum install mysql-community-server
1
2
3

3. 下载mysql-devel

services>> yum install mysql-devel
1

4. 安装完成后启动MySQL服务

services>> systemctl start mysqld
1

5. 设置mysql服务开机自启动

services>> systemctl enable mysqld
1

MySQL数据库相关指令：

systemctl disable mysqld  //停止mysql服务开机自启动
systemctl status mysqld //查看mysql服务当前状态
systemctl restart mysqld //重启mysql服务
systemctl stop mysqld //停止mysql服务
1
2
3
4

6. 初次安装mysql，root账户没有密码，为了保证数据库的安装，我们需要设置一个比较复杂的密码，首先进入到mysql内部:

services>> mysql -u root 
#Welcome to the MySQL monitor.  Commands end with ; or \g.
#Your MySQL connection id is 2
#Server version: 5.6.51 MySQL Community Server (GPL)...
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.00 sec)
mysql>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7. 进入到mysql内部后输入如下命令设置密码

 mysql> set password for 'root'@'localhost' =password('root用户密码');
1

8. （接下来为可选步骤，如若不进行，连接时使用root账户）为了安全起见，强烈建议在远程连接的时候使用非root账户，我们需新建一个账户并授予权限

 mysql> create user '用户名'@'%' identified by '密码' with grant option;
 或者
 mysql> create user '用户名'@'%' identified with mysql_native_password by '密码';
 
注意：mysql8.0及以上版本需要使用以下语句：
mysql> create user 用户名@'%' identified by '密码';
1
2
3
4
5
6

9. (步骤8配套可选项)把在所有数据库的所有表的所有权限赋值给该新建用户

mysql> grant all privileges on *.* to 用户名@'%' with grant option;
1

10. (步骤8配套可选项)刷新权限使操作生效，并退出mysql

mysql> FLUSH PRIVILEGES;
mysql> quit
Bye
1
2
3

11. 修改/etc/my.cnf配置文件，在[mysqld]下添加编码配置,配置mysql默认编码为utf-8:

>> vim /etc/my.cnf
 [mysqld]
 character_set_server=utf8
 init_connect='SET NAMES utf8'
1
2
3
4

输入vim /etc/my.cnf 进入到文件内，按 i 进入编辑模式，把编码配置粘贴到[mysqld]的下面。

添加完编码配置后，按ESC键退出编辑模式，输入:wq并按回车，重新回到命令行界面

12. 重启MySQL

>> systemctl restart mysqld
1

5）Nginx安装

1. 进入到nginx 官网，选择需要安装的版本，点击鼠标右键复制链接地址

2. 把nginx安装包下载下来，并改名为nginx-1.20.2.tar.gz

services>> curl -o nginx-1.20.2.tar.gz http://nginx.org/download/nginx-1.20.2.tar.gz
#  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
#                                 Dload  Upload   Total   Spent    Left  Speed
#100 1037k  100 1037k    0     0  48743      0  0:00:21  0:00:21 --:--:-- 46562
services>> ls
#  nginx-1.20.2.tar.gz
1
2
3
4
5
6

3. 解压压缩包

services>> tar -zxvf nginx-1.20.2.tar.gz
services>> ls
# nginx-1.20.2  nginx-1.20.2.tar.gz
1
2
3

4. 进入到nginx目录

nginx-1.20.2>> cd nginx-1.20.2
nginx-1.20.2>> ls
#auto  CHANGES  CHANGES.ru  conf  configure  contrib  html  LICENSE  man  README  src
1
2
3

5. 安装相关依赖

nginx-1.20.2>> yum install pcre pcre-devel -y
nginx-1.20.2>> yum install openssl openssl-devel -y
1
2

6. 设置系统配置参数

nginx-1.20.2>> ./configure --with-http_ssl_module --with-http_v2_module --with-stream
1

7. 开始编译

nginx-1.20.2>> make

# 如果编译报错：make: *** No rule to make target `build', needed by `default'.  Stop.
# 则需要安装下面配置
# 安装下面配置
>> yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel
# 重新configure
>> ./configure 
# 编译
>> make
1
2
3
4
5
6
7
8
9
10

8. 安装

nginx-1.20.2>> make install 
1

9. 配置环境变量

nginx-1.20.2>> vim /etc/profile 

# 按下shift+g将光标定位到最后一行，新增以下内容：
export PATH=$PATH:/usr/local/nginx/sbin	
1
2
3
4

按 i 进入编辑模式，把新增的内容放到/etc/profile 文件内的最后一行就可以了，按ESC键退出编辑模式，然后输入:wq 再按下enter即可保存退出

10. 使文件修改生效

source /etc/profile
1

11. 查看当前所有tcp端口/查看启动情况，可以看到我们启动的MySQL和Nginx服务

nginx-1.20.2>> netstat -ntlp
Active Internet connections (only servers)
#Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
#tcp        0      0 0.0.0.0:80              0.0.0.0:*               LISTEN      8210/nginx: master
#tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1648/sshd      
#tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1120/master    
#tcp6       0      0 :::22                   :::*                    LISTEN      1648/sshd      
#tcp6       0      0 ::1:25                  :::*                    LISTEN      1120/master    
#tcp6       0      0 :::3306                 :::*                    LISTEN      10626/mysqld 
1
2
3
4
5
6
7
8
9

6）Redis安装

1. 进入到redis 官网，选择需要安装的版本，点击鼠标右键复制链接地址

2. 在服务器上使用命令在线下载，并改名为redis-6.2.5.tar.gz

~>> curl -o redis-6.2.5.tar.gz http://download.redis.io/releases/redis-6.2.5.tar.gz
1

3. 解压文件

~>> tar -zxvf redis-6.2.5.tar.gz
1

4. 安装gcc依赖环境，由于Redis依赖于gcc环境，并且Redis 6需要gcc版本至少是gcc7以上

~>> yum install gcc
1

5. 编译并安装

#切换到 redis目录
~>> cd redis-6.2.5/
# 编译
redis-6.2.5>> make
# 安装
redis-6.2.5>> make install
1
2
3
4
5
6

6. 切换到默认安装路径为/usr/local/bin目录

# 切换到安装路径
redis-6.2.5>> cd /usr/local/bin
# 查看文件
bin>> ls
1
2
3
4

7. 启动redis：redis的启动分为两种方式：前台启动和后台启动。由于前台启动后，命令行界面不能再执行其他操作，且命令行界面关闭后，redis也会随即关闭，所以不推荐使用。

• 前台启动命令(bin目录下)：

bin>> redis-serve
1

• 后台启动：Redis默认不是以守护进程的方式运行，可以通过该配置项修改，使用yes启用守护进程

bin>> cd /root/redis-6.2.5
redis-6.2.5>> cp redis.conf redis.conf.bak
redis-6.2.5>> vim redis.conf
1
2
3

在vim界面命令行模式下输入/daemonize no进行查找，然后按i进入编辑模式，并将该内容修改为··daemonize yes··，然后按Esc键，输入:wq再按enter键保存退出

重新切换到bin目录启动则是后台运行了

redis-6.2.5>> cd /usr/local/bin
bin>> redis-server /root/redis-6.2.5/redis.conf
1
2

8. 设置密码，没有密码肯定是不安全的

bin>> cd /root/redis-6.2.5
redis-6.2.5>> vim redis.conf
1
2

在vim界面命令行模式下输入/requirepass进行查找，然后按i进入编辑模式，在右边输入密码，然后按Esc键，输入:wq再按enter键保存退出

9. 关掉redis并重新启动

bin>> redis-cli shutdown
bin>> redis-server /root/redis-6.2.5/redis.conf
1
2

10. 启动并输入密码重新进入

7）Node.js安装

1. 进入到node.js，选择需要安装的版本，点击鼠标右键复制链接地址

2. 在服务器上使用命令在线下载，并改名为node-v20.10.0.tar.gz

~>> curl -o node-v16.15.1.tar.gz https://nodejs.org/dist/v16.15.1/node-v16.15.1-linux-x64.tar.gz
1

3. 解压压缩包

~>> tar -xvf node-v16.15.1.tar.gz
1

4. 切换到bin目录下，查看是否安装成功

~>> cd node-v16.15.1-linux-x64/bin
bin>> ./node -v
# v16.15.1
1
2
3

4. 获取bin文件路径，配置环境变量

~>> pwd
# /root/node-v16.15.1-linux-x64/bin
~>> vim /etc/profile
1
2
3

在vim界面命令行模式下，然后按i进入编辑模式，在最后配置bin目录所在路径/root/node-v16.15.1-linux-x64/bin，然后按Esc键，输入:wq再按enter键保存退出

5. 使配置文件生效

source /etc/profile
1

6. 在其他目录输入指令查看是否配置生效，如下表示生效

四.项目部署

项目所需的基本环境我们已经全部搭建完毕，上述环境并不是一定全部都得用到，我们有两套部署方案：

• JAVA、MySQL、Redis、Nginx：本地打包好前后端项目，然后上传到服务器上直接部署运行即可。
• JAVA、MySQL、Redis、Nginx、Node.js、Git、Maven：使用Git从远程代码仓库拉下代码，springboot项目使用maven进行打包编译，vue.js项目使用node.js打包编译，最后再部署运行即可。

由于第二种方案步骤完全覆盖第一种方案，我们便主要讲解第二种方案。非常重要的一点是最后在防火墙开启项目使用到的端口号！！！

1）拉取代码

使用如下指令拉取远程代码仓库前后端项目代码即可

~>> git clone https://xxxxxxx代码地址xxxxxx
1

2）打包部署

• 前端项目(这一步主要是为了获取dist文件，也就是说可以自己在本地打包好后直接上传dist文件)：

1. 切换到拉下的前端项目里

~>> cd 前端项目名
1

2. 进行打包构建，在项目根目录下运行以下命令：

前端项目名>> npm run build
1

这将生成一个dist目录，其中包含一组静态文件，包括HTML、CSS和JavaScript文件。

3. 修改Nginx配置文件，设置前端项目所在路径

前端项目名>> cd /usr/local/nginx/conf

conf>> vim nginx.conf

修改文件内容为：
user  root;(修改的地方)
worker_processes  1;
....(省略)....
location / {
  root   /root/services/前端项目名/dist;(前端项目dist目录路径)
  index  index.html index.htm;
}
....(省略)....
然后按ESC键退出编辑模式,按 :wq  保存退出 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. 更新配置文件

conf>> nginx -s reload
1

5. 如此我们便完成了前端项目的部署，最后需要自己去防火墙开放使用到的端口号

• 后端项目(这一步主要是为了获取jar包，也就是说可以自己在本地打包好后直接上传jar包)：

1. 切换到拉下的后端项目里面

~>> cd 后端项目名
1

2. 在项目根目录下运行以下命令，进行打包构建，跳过测试

后端项目名>> mvn package -DskipTests
1

3. Maven将在项目目录下生成一个target目录，其中包含我们需要的可执行JAR文件。

后端项目名>> cd target
1

4. 启动项目（执行jar包）

target>> java -jar ./自己打包出来的.jar --spring.profiles.active=prod
# 当然这么用的话，这个窗口就不能做任何事了,被这个命令占满了,按ctrl+c中断它
# 让它在后台运行
target>> nohup java -jar ./自己打包出来的.jar --spring.profiles.active=prod &
1
2
3
4

5. 如此我们便完成了后端项目的部署，最后需要自己去防火墙开放使用到的端口号

# 可以看见它正在运行
user-center-backend>> jobs
#[1]+  Running                 nohup java -jar ./后端项目名.jar --spring.profiles.active=prod &

//这里可以看到java在8080端口启动了
user-center-backend>> netstat -ntlp
#Active Internet connections (only servers)
#Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
#tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1393/sshd      
#tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1396/master    
#tcp6       0      0 :::3306                 :::*                    LISTEN      1441/mysqld    
#tcp6       0      0 :::8080                 :::*                    LISTEN      4367/java      
#tcp6       0      0 :::22                   :::*                    LISTEN      1393/sshd      
#tcp6       0      0 ::1:25                  :::*                    LISTEN      1396/master 

//用jps也可以看到运行的java程序
user-center-backend>> jps
#7298 Jps
#4367 后端项目名.jar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6. 后端项目管理常用命令

# 1.关闭后台Java项目
# 1.1.查看过滤出Java项目
ps -elf |grep java
# 1.2 根据pid杀死进程
kill -9 PID

# 2 查看后台启动项目
jobs # 查看后台项目
netstat -ntlp # 查看端口占用情况
jps # 查看运行的Java程序

# 3.日志查看
# 查看最新100行日志
tail -n 100 nohup.out | more
# 实时查看日志
tail -f nohup.out
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

至此我们便算是完成了整个项目的开发环境搭建与部署~