vue+springboot前后端分离项目部署教程(CentOs8.2)

前言：

部署需要配置jdk(1.8)，nginx,mysql(5.7),文件压缩包在下边的百度网盘链接中。

项目配置需要xshell7，xftp7

链接：https://pan.baidu.com/s/1O7fw3R_-51wBen6aK0h4TA 
提取码：2qcr

1.jdk的部署

1.将压缩包上传到xftp的/tmp目录下

2.开始部署jdk

#解压jdk到对应目录
tar -zxvf /tmp/jdk-8u371-linux-x64.tar.gz -C /usr/local/ 
#移动jdk到java目录下 
mv /usr/local/jdk1.8.0_371 /usr/local/java


#进入profile文件，对jdk设置全局变量
vi /etc/profile

# 按shift + G 快速到达文件末尾   再按下键盘的a键 进入 insert 模式

export JAVA_HOME=/usr/local/java
export PATH=$JAVA_HOME/bin:$PATH

# 按下 esc 退出insert模式  再输入 :wq

source /etc/profile

# 验证
java -version

显示下图则表示jdk安装成功

2.nginx安装

#安装库文件

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


#解压、编译nginx并安装
mkdir /usr/local/nginx
tar -zxvf /tmp/nginx-1.24.0.tar.gz -C /usr/local/nginx

cd /usr/local/nginx/nginx-1.24.0

# 编译安装
./configure --with-http_stub_status_module --with-http_ssl_module
make && make install

每次安装时出现complete则表示安装成功，可以进行下一步的操作了

nginx基本命令

#创建软连接，让系统识别Nginx命令
ln -s /usr/local/nginx/sbin/nginx /usr/local/sbin/
 
#检查文件是否正确
nginx -t

# 启动
nginx    

ps -ef | grep nginx  # 查看
./nginx -s stop      # 停止
./nginx -s reload    # 重启

此时可以通过ps -ef | grep nginx查看nginx状态

在网站端输入公网ip即可测试nginx

3.安装mysql

1.linux系统会自动携带一个数据库，需要把它给卸载掉，通过以下代码可以查看mariadb 并卸载

rpm -qa | grep mariadb
yum remove -y mariadb-connector-c-3.1.11-2.oc8.1.x86_64
yum remove -y mariadb-connector-c-config-3.1.11-2.oc8.1.noarch

2.下载mysql 并 上传到 /tmp 目录

安装mysql命令：

mkdir -p /data/mysql
tar -zxvf /tmp/mysql-5.7.42-el7-x86_64.tar.gz -C /usr/local
mv /usr/local/mysql-5.7.42-el7-x86_64 /usr/local/mysql

# 添加用户组
groupadd mysql
useradd -r -g mysql mysql
chown -R mysql.mysql /usr/local/mysql
chown -R mysql.mysql /data/mysql

       

接下来这条命令会生成一个mysql临时密码，需要先记下为之后进入数据库做准备

cd /usr/local/mysql    
/usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql/ --datadir=/data/mysql --initialize   

继续执行下面代码

#  将mysql加入到服务中    
cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql

# mysql快捷方式
ln -s  /usr/local/mysql/bin/mysql /usr/bin
ln -s /usr/lib64/libtinfo.so.6.1 /usr/lib64/libtinfo.so.5 
ln -s /usr/lib64/libncurses.so.6.1 /usr/lib64/libncurses.so.5

3.配置mysql配置文件 my.cnf(具体操作和之前给jdk加环境变量道理一样)

vi /etc/my.cnf

这是需要配置的内容

[mysqld]
datadir=/data/mysql
basedir=/usr/local/mysql
socket=/tmp/mysql.sock
user=mysql
port=3306
character-set-server=utf8
# 取消密码验证
# skip-grant-tables
# # Disabling symbolic-links is recommended to prevent assorted security risks
symbolic-links=0
[mysqld_safe]
log-error=/var/log/mysqld.log
pid-file=/var/run/mysqld/mysqld.pid

3.配置好后启动mysql

 service mysql start 

显示如下则为启动成功

开机启动

chkconfig mysql on

4.登录mysql：

mysql -uroot -p

输入临时密码进入mysql(之前让保存的)

这里为了保护用户隐私在输入时不会显示，输入正确密码回车即可

5.接下来进行一些基础设置

#密码尽量复杂，但是要记得住
SET PASSWORD = PASSWORD('1234'); 

use mysql;
update user set host ='%' where user ='root' and host ='localhost';
flush privileges;
exit;

注意：在本地连接mysql需要打开mysql3306端口的防火墙

4.vue项目的部署

1.有.env.production的文件前提下修改对应配置(将9090端口前服务器改为自己公网ip地址)

2.在终端进入vue项目

cd vue

3.打包项目

npm run build

打包后会生成一个dist包

4.在服务器上找一个合适的地方上传dist包(我在/home目录下创建了一个study文件夹)

5.修改nginx配置文件

#进入nginx.conf文件
vi /usr/local/nginx/conf/nginx.conf

原文件如下

listen则为要监视的端口，根据自己需求进行设置，我们要把location下root位置修改为自己vue项目所在的地址，并加入

try_files $uri $uri/ /index.html;

修改后如下：

配置好后重启nginx

cd /usr/local/nginx/sbin    
./nginx -s reload

此时通过公网ip就能看到自己的前端项目了

5.springboot项目的部署

1.项目右边点开maven，点击package

2.找到target文件夹下的红色框的jar包

3.将jar包上传到服务器

4.创建start.sh脚本

右击对内容进行编辑

NAME=springboot-0.0.1-SNAPSHOT.jar
nohup java -jar $NAME > server.log 2>&1 &
echo 'start success'

Ctrl+s保存后退出

5.创建stop.sh脚本

和上面道理一样

代码是这样

PORT=9090
pid=`netstat -tnlp | grep $PORT | grep -v grep | awk '{print $7}' | awk -F/ '{print $1}'`
if [ ${pid} ]; then
    kill -9 $pid
    echo "kill $PORT"
else
    echo 'stop sucess!'
fi

去除特殊符号

sed -i 's/\r//' start.sh
sed -i 's/\r//' stop.sh

6.数据库脚本的导入

1.首先在navicat中将本地数据库的内容导出

2.转出后要将对应的localhost转换为自己的公网ip，点击全部替换

3.将.sql文件上传到对应文件夹下

在xshell中进入数据库

mysql -u root -p

#输入自己的密码

#创建数据库
create database manager;

#查看数据库
show databases;

#执行脚本文件
source /home/study/manager.sql

#进入manager库
use manager;

#查看数据库表
show tables;

4.服务器上可以外置application.yml 覆盖配置

application.yml 里的数据库名称和数据库密码需要修改

文件上传配置的ip需要修改

修改如下地方即可，密码为自己的mysql密码，另外一个是自己的公网ip

5.接下来给设置权限

需要在自己项目对应的文件夹下，我这里是在study文件夹

chmod +x *.sh
chmod +x *.yml

启动后端：

./start.sh

查看日志：

 tail -f server.log

后端启动成功

注意：要打开后端9090端口防火墙

登陆测试，测试成功：