文章目录

  • 1:项目部署所使用的工具或资源
  • 2:SpringBoot项目部署
  • 2.1更改跨域配置
  • 2.2项目打包
  • 2.3部署jar包
  • 2.3.1上传jar包和静态资源文件
  • 2.3.2安装JDK
  • 2.3.3安装MySQL
  • 2.3.4导入sql文件资源
  • 2.3.5运行jar包
  • 2.4接口测试
  • 3.Vue项目部署
  • 3.1更改代理服务器、axios、Vuex配置
  • 3.2将项目打包上传到云服务器
  • 3.3Nginx安装
  • 3.4部署第一个Vue项目
  • 3.4.1将已经打包好的dist文件传送到nginx以下指定目录
  • 3.4.1修改nginx.conf配置文件
  • 3.5部署第二个Vue项目



部署进阶篇:docker部署


博客地址:

1:项目部署所使用的工具或资源

  1. Xshell:用于在本机Windows界面访问远端不同系统下的服务器。
    Xshell官网
  2. Xftp:Xftp是一个功能强大的SFTP、FTP 文件传输软件。使用了 Xftp 以后,MS Windows 用户能安全地在 UNIX/Linux 和 Windows PC 之间传输文件。
    Xftp官网
  3. Postman:Postman是一个接口测试工具,本次部署中用于测试后端接口。
    相较于Postman,可以有更好的选择即ApiFox。在本次部署中为方便采用Postman。
  4. Nginx:Nginx是一个高性能的 HTTP 和反向代理服务器,可以作为静态页面的 web 服务器
  5. ECS服务器或者轻量应用服务器:
    可以选择大厂云服务器供应商,如阿里、腾讯、华为。本次部署中采用腾讯云服务器。
    我购买的云服务器配置是2核2GB,镜像为CentOS 7.6

vue和springboot架构 vue和springboot部署_vue和springboot架构

2:SpringBoot项目部署

2.1更改跨域配置

将跨域配置修改为云服务器的公网ip

vue和springboot架构 vue和springboot部署_nginx_02

2.2项目打包

一:首先打开maven,在maven生命周期选择clear选项,clear命令是maven的清除命令,这一步的目的是为了清空target目录下的所有内容。

vue和springboot架构 vue和springboot部署_spring boot_03

二:选择package选项,将项目打成jar包。

vue和springboot架构 vue和springboot部署_spring boot_04

三:控制台出现BUILD SUCCESS就表示打包成功

vue和springboot架构 vue和springboot部署_spring boot_05

四:查看target目录,找到打包好的项目jar包。

vue和springboot架构 vue和springboot部署_vue.js_06

2.3部署jar包

2.3.1上传jar包和静态资源文件

一:查看SpringBoot项目服务端口:我的是8090

vue和springboot架构 vue和springboot部署_vue.js_07

二:在控制台开放相应端口

vue和springboot架构 vue和springboot部署_vue.js_08

vue和springboot架构 vue和springboot部署_后端_09

三:打开Xshell,输入云服务器公网ip创建一个新的会话。

vue和springboot架构 vue和springboot部署_spring boot_10

四:双击刚刚创建的会话进行连接,输入用户名和密码

vue和springboot架构 vue和springboot部署_nginx_11

五:密码如果忘记的话到控制台中进行修改:

vue和springboot架构 vue和springboot部署_vue和springboot架构_12

连接成功:

vue和springboot架构 vue和springboot部署_nginx_13

六:创建新目录,并将jar包通过Xftp传输到新创建的目录当中,如果有静态资源的话就传输到jar包的同级目录下:

vue和springboot架构 vue和springboot部署_vue.js_14

vue和springboot架构 vue和springboot部署_vue和springboot架构_15

vue和springboot架构 vue和springboot部署_vue和springboot架构_16

2.3.2安装JDK

jdk官网:Java Downloads | Oracle

下载Linux版本:

vue和springboot架构 vue和springboot部署_nginx_17

一:将JDK传输到项目目录

vue和springboot架构 vue和springboot部署_vue.js_18

二:解压至自定义目录(一般是 /usr/local)

tar -xzvf jdk-8u291-linux-x64.tar.gz -C /usr/local/

vue和springboot架构 vue和springboot部署_nginx_19

二:配置环境变量。进入到/etc目录下,用vim编辑器在 profile 文件中添加四个变量。

export JAVA_HOME=/usr/local/jdk1.8.0_291
export JRE_HOME=$JAVA_HOME/jre
export CLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=/bin:/usr/bin:$PATH:$JAVA_HOME/bin:$PATH

vue和springboot架构 vue和springboot部署_后端_20


JDK11环境配置

export JAVA_HOME=/usr/local/jdk-11.0.18
export CLASSPATH=.:$JAVA_HOME/lib
export PATH=$JAVA_HOME/bin:$PATH
export JAVA_HOME CLASSPATH PATH

三:刷新配置

source /etc/profile

**四:查看jdk是否安装成功**
java -version

vue和springboot架构 vue和springboot部署_vue.js_21

2.3.3安装MySQL

一:在控制台开发MySQL服务端口3306

vue和springboot架构 vue和springboot部署_nginx_22

二:在jar包同级目录下创建目录用于存放MySQL安装包

vue和springboot架构 vue和springboot部署_spring boot_23

三:将MySQL安装包传输到刚刚创建的目录下,并解压

MySQL安装包百度云地址(版本8.0.26) 提取码:xha8

解压命令:

tar -xvf mysql-8.0.26-1.el7.x86_64.rpm-bundle.tar

vue和springboot架构 vue和springboot部署_spring boot_24

四:查看解压后的MySQL压缩包

vue和springboot架构 vue和springboot部署_spring boot_25

五:清空linux自带的数据库(因为CentOS自带一个老版本的mariadb-libs与当前mysql包的冲突,故需要先卸载,再安装)

rpm -qa | grep Mysql
rpm -qa | grep mariadb

vue和springboot架构 vue和springboot部署_nginx_26

卸载已有的数据库:(卸载会把这个包的依赖包也一起卸载)

yum -y remove mariadb-libs.x86_64

vue和springboot架构 vue和springboot部署_vue和springboot架构_27

六:开始安装 mysql,依次执行下述命令

安装依赖:

yum install libaio

依次执行以下命令:

rpm -ivh mysql-community-common-8.0.25-1.el7.x86_64.rpm
rpm -ivh mysql-community-client-plugins-8.0.25-1.el7.x86_64.rpm 
rpm -ivh mysql-community-libs-8.0.25-1.el7.x86_64.rpm 
rpm -ivh mysql-community-client-8.0.25-1.el7.x86_64.rpm 
rpm -ivh mysql-community-server-8.0.25-1.el7.x86_64.rpm

vue和springboot架构 vue和springboot部署_spring boot_28

七:查看MySQL的安装情况:

rpm -qa|grep -i mysql

vue和springboot架构 vue和springboot部署_vue和springboot架构_29

八:启动MySQL服务并查看服务状态

systemctl start mysqld.service
systemctl status mysqld.service

vue和springboot架构 vue和springboot部署_spring boot_30

九:查看MySQL初始化密码

grep "password" /var/log/mysqld.log

vue和springboot架构 vue和springboot部署_后端_31

十:登录MySQL并修改初始密码

mysql -u root -p

vue和springboot架构 vue和springboot部署_vue.js_32

修改密码:

注意:此数据库的密码要和jar包项目所连接的数据库的密码相同,否则会连接不上

mysql8.0之后的版本加入密码安全度检测机制,如果设置密码过于简单会导致报错

下面将更改MySQL的密码安全设置:

1. 首先查看当前MySQL的密码安全设置

SHOW VARIABLES LIKE 'validate_password%';

vue和springboot架构 vue和springboot部署_后端_33

2. 更改密码长为6,密码安全策略等级为LOW

set global validate_password.length=6;
set global validate_password.policy=LOW;

vue和springboot架构 vue和springboot部署_spring boot_34

3. 查看更改后的密码安全设置

vue和springboot架构 vue和springboot部署_vue和springboot架构_35

4. 更改密码

ALTER USER 'root'@'localhost' IDENTIFIED BY '密码';

vue和springboot架构 vue和springboot部署_vue和springboot架构_36

2.3.4导入sql文件资源

一:打开Navicat,右键数据库->转储sql文件->结构和数据

vue和springboot架构 vue和springboot部署_spring boot_37

二:将sql文件通过Xftp传输到项目目录中

vue和springboot架构 vue和springboot部署_nginx_38

二:创建数据库

切记:创建的数据库名要和SpringBoot中配置文件当中配置的数据库url的数据库名保持一致。

create database 数据库名;
show databases;

vue和springboot架构 vue和springboot部署_spring boot_39

二:进入创建的数据库,导入sql文件资源

use 数据库名;
source sql文件相对路径/sql文件名

vue和springboot架构 vue和springboot部署_spring boot_40

查询测试:

select * from 表名;

vue和springboot架构 vue和springboot部署_后端_41

2.3.5运行jar包

一:进入jar包目录下

nohup 英文全称 no hang up(不挂起),用于在系统后台不挂断地运行命令,退出终端不会影响程序的运行。

执行命令:

nohup java -jar myMusic-0.0.1-SNAPSHOT.jar &

vue和springboot架构 vue和springboot部署_vue和springboot架构_42


vue和springboot架构 vue和springboot部署_nginx_43

二:查看日志文件

cat -n nohup.out

后端项目已经成功在8090端口运行

vue和springboot架构 vue和springboot部署_后端_44

三:注意:如果操作不当导致jar包并没有在相应端口运行,但是已经占用进程的情况,再次运行jar包会报错的解决方案,

查看当前所有进程

ps sux

vue和springboot架构 vue和springboot部署_后端_45

杀死该进程:

kill -9 进程ID

再次执行运行jar包命令即可。

2.4接口测试

一:打开Postman,输入要测试的接口,显示测试成功

vue和springboot架构 vue和springboot部署_vue和springboot架构_46

在nohub.out日志文件中可以查看到日志信息(需要在SpringBoot配置文件中配置mybatis-plus的日志文件

vue和springboot架构 vue和springboot部署_后端_47

3.Vue项目部署

3.1更改代理服务器、axios、Vuex配置

将上述三种的url路径由原来的localhost(本地化部署时)更改为云服务器公网IP

一:代理服务器

vue和springboot架构 vue和springboot部署_vue和springboot架构_48

二:axios接口配置

vue和springboot架构 vue和springboot部署_spring boot_49

三:Vuex

vue和springboot架构 vue和springboot部署_nginx_50

3.2将项目打包上传到云服务器

一:打开控制台,输入以下命令打包

npm run build

vue和springboot架构 vue和springboot部署_vue.js_51

二:在项目根目录下会自动生成一个dist文件夹

vue和springboot架构 vue和springboot部署_vue和springboot架构_52

三:有两个Vue项目的另一个和上述操作一样,将两个dist文件分别重命名,等待Nginx安装完成后上传到服务器

3.3Nginx安装

Nginx百度云网盘地址

提取码:xha8

一:将下载好的Nginx安装包发送到服务器中项目的根目录下

vue和springboot架构 vue和springboot部署_后端_53

二:解压安装包到当前目录

tar -xzvf nginx-1.18.0.tar.gz

vue和springboot架构 vue和springboot部署_nginx_54

安装包可以删除

三:安装相应依赖

安装gcc

yum install -y gcc

安装perl库

yum install -y pcre pcre-devel

安装zlib库

yum install -y zlib zlib-devel

vue和springboot架构 vue和springboot部署_nginx_55

四:进入到nginx-1.18.0目录下,并执行以下命令

源码编译安装

./configure

执行make命令

make

执行make install命令

make install

安装完成

vue和springboot架构 vue和springboot部署_vue和springboot架构_56

五:启动Nginx服务

进入到以下目录并执行./nginx命令启动Nginx服务

cd /usr/local/nginx/sbin/
./nginx

vue和springboot架构 vue和springboot部署_nginx_57

在本地输入云服务器公网ip,出现以下界面就表示Nginx安装成功。

vue和springboot架构 vue和springboot部署_spring boot_58

3.4部署第一个Vue项目

3.4.1将已经打包好的dist文件传送到nginx以下指定目录

cd /usr/local/nginx/html

vue和springboot架构 vue和springboot部署_nginx_59

3.4.1修改nginx.conf配置文件

一:进入到nginx目录下的conf目录,找到nginx.conf配置文件

vue和springboot架构 vue和springboot部署_vue和springboot架构_60

二:使用vim编辑 nginx.conf配置文件

解决Vue项目部署后刷新404的问题

try_files $uri $uri/ /index.html;

vue和springboot架构 vue和springboot部署_vue.js_61

三:在控制台开发相应端口

vue和springboot架构 vue和springboot部署_spring boot_62

四:保存并退出,进入nginx的sbin目录下重启Nginx服务

./nginx -s reload

vue和springboot架构 vue和springboot部署_spring boot_63

五:在本机浏览器输入公网ip和端口进行测试

vue和springboot架构 vue和springboot部署_后端_64

3.5部署第二个Vue项目

一:通过vim编辑器进入nginx.conf配置文件,复制server部分,放在上一个server下面

vue和springboot架构 vue和springboot部署_后端_65

二:在控制台开发相应端口

vue和springboot架构 vue和springboot部署_vue和springboot架构_66

三:保存并退出,进入nginx的sbin目录下重启Nginx服务

./nginx -s reload

vue和springboot架构 vue和springboot部署_nginx_67

四:在本机浏览器输入公网ip和端口进行测试

vue和springboot架构 vue和springboot部署_nginx_68

项目部署完成啦

vue和springboot架构 vue和springboot部署_spring boot_69