VUE+SpringBoot前后端分离部署笔记

2020-09-17

项目部署流程

  • 简介：RuoYi 开源框架部署为例
  • CentenOS 6
  • SpringBoot打War包
  • JDK1.8
  • Tomcat 9
  • vue+springboot前后端分离部署方案
  • mysql 5.7
  • redis-3.2.3

1.linux基础配置

1.检查配置环境

1.1 JDK

这里以JDK1.8为例进行配置

检查当前JDK版本

java -version

升级JDK版本

yum install java-1.8.0-openjdk* -y

使用yum命令安装后无需配置，安装完后需要检查jdk环境是否更新

更换JDK版本

原因：openJDK去掉了某个类，导致启动项目失败 java.lang.ClassNotFoundException: com.sun.image.codec.jpeg.JPEGCodec的问题：查询资料得知，原来openjdk从jdk7开始去掉了这个类。所以不能再继续使用自带的openJDK，重新安装JDK1.8

  • 卸载原OpenJDK

    • 查看系统jdk版本

      [root@localhost software]# java -version
openjdk version "1.8.0_102"
OpenJDK Runtime Environment (build 1.8.0_102-b14)
OpenJDK 64-Bit Server VM (build 25.102-b14, mixed mode)

    • 检测jdk安装包

      [root@localhost software]# rpm -qa | grep java
java-1.7.0-openjdk-1.7.0.111-2.6.7.8.el7.x86_64
python-javapackages-3.4.1-11.el7.noarch
tzdata-java-2016g-2.el7.noarch
javapackages-tools-3.4.1-11.el7.noarch
java-1.8.0-openjdk-1.8.0.102-4.b14.el7.x86_64
java-1.8.0-openjdk-headless-1.8.0.102-4.b14.el7.x86_64
java-1.7.0-openjdk-headless-1.7.0.111-2.6.7.8.el7.x86_64

    • 卸载openJDK

       [root@localhost jvm]# yum remove *openjdk*

    • 查看卸载情况

      [root@localhost software]# rpm -qa | grep java
python-javapackages-3.4.1-11.el7.noarch
javapackages-tools-3.4.1-11.el7.noarch

  • 安装JDK

    • 从华为云下载JDK1.8（到指定位置）

      wget https://repo.huaweicloud.com/java/jdk/8u192-b12/jdk-8u192-linux-x64.tar.gz

    • 解压

      [root@edi02 ~]# cd /usr/lib/java
[root@edi02 java]# tar -zxvf jdk-8u192-linux-x64.tar.gz

    • 创建符号连接统一管理（可选），以后有新版本，只要更改这个连接就可以了

      [root@edi02 java]# ln -s /usr/lib/java/jdk1.8.0_201 /usr/jdk

    • 修改环境变量

      [root@edi02 java]# vim /etc/profile

      添加以下内容

      JAVA_HOME=/usr/jdk
CLASSPATH=$JAVA_HOME/lib/
PATH=$PATH:$JAVA_HOME/bin
export PATH JAVA_HOME CLASSPATH

    • 使配置生效

      [root@edi02 java]# source /etc/profile

    • 检查是否安装成功

      java -version

1.2 Tomcat

下载Tomcat

去官网下载包，可以wget直接下载或下载完后拷贝到linux

wget

wget https://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-8/v8.5.41/bin/apache-tomcat-8.5.41.tar.gz  
// 以tomcat 8 为例，根据实际情况更换版本

拷贝

使用 scp 命令传输到linux虚拟机中，直接使用终端命令即可：

scp -P 22 /Users/hhw/Downloads/apache-tomcat-9.0.36.tar.gz root@10.211.55.4:/project/tomcat9

  • 端口大写P 为参数，22 表示更改SSH端口后的端口，如果没有更改SSH端口可以不用添加该参数。

  • /Users/hhw/Downloads/apache-tomcat-9.0.36.tar.gz 表示本地上准备上传文件的路径和文件名。

  • root@123.456.789.987 表示使用root用户登录远程服务器。

  • :/usr/server/tomcat7/webapps/ 表示保存在远程服务器上目录和文件名。

  • 拷贝文件夹使用scp -r

解压Tomcat

cd到tomcat包目录，执行解压：

tar -zxvf apache-tomcat-9.0.36.tar.gz

cd到tomcat的bin目录下，测试启动tomcat，执行命令，出现启动标识：

./startup.sh  开启
./shutdown.sh  关闭

image-20200723141645361

检查是否启动成功

1.先去看tomcat查看日志是否启动成功：

去logs/catalina.out 看日志，主要看最后一行是否启动成功即可；

tail -f catalina.out 		实时查看日志
tail -n 200 -f catalina.out 	实时查看日志 最后N行

2.linux本机测试访问tomcat是否成功，执行命令：

 curl 10.211.55.4:8080

如果能访问到网页，那么证明执行成功。

image-20200723143450318

测试远端访问Linux的Tomcat

如果本机无法访问，检查端口防火墙是否打开

第一步：执行指令：

vim /etc/sysconfig/iptables

添加8080端口号配置，默认只有22端口，一定要配置在

-A INPUT -j REJECT --reject-with icmp-host-prohibited -A FORWARD -j REJECT --reject-with icmp-host-prohibited 这两行之前才能生效。如图：

image-20200723143900491

第二步：重启防火墙，执行：

service iptables restart

浏览器输入linux的tomcat地址，这里是http://10.211.55.4:8080/，成功访问！

1.3 Nginx(废弃)

创建nginx.repo

执行：

vim  /etc/yum.repos.d/nginx.repo

文件内容要求如下，注意版本，数字位置位版本：

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/6/$basearch/
gpgcheck=0
enabled=1

清除缓存

yum clean all

建立新的缓存

yum makecache

安装

yum -y install nginx

如下表示成功：

image-20200723151729197

检查/启动

执行命令检查是否安装成功：

rpm -q nginx

启动：

service nginx start

查看安装以及配置文件目录：

ps -aef|grep nginx

之后根据环境进行具体配置即可！

配置完后检查配置文件是否正确：

nginx -t

配置完成后重启：

nginx -s reload

nginx关闭指令

sudo nginx -s quit

*记得打开防火墙外面才能访问*

1.4 MySQL

cd到要存放的目录下：

检查是否已安装

rpm -qa | grep MySQL
或
rpm -qa | grep mysql

yum安装mysql

更新wget：

yum -y install wget

wget --no-check-certificate  http://dev.mysql.com/get/mysql57-community-release-el6-7.noarch.rpm

rpm -ivh mysql-community-release-el7-5.noarch.rpm

安装完后查看源情况：

yum repolist enabled

看见 MySQL 5.7 Community Server 就可以

查看下mysql的版本：

yum list mysql-community*

安装最新版本：

yum -y install mysql-server

⚠️ [Centos7.5安装mysql5.7.28rpm包报错：postfix-2.10.1-6.el7.x86_64需要：libmysqlclien]：

yum remove mysql-libs

⚠️[遇到的问题 libsasl2.so.2]：

找到 /etc/yum.repos.d/mysql-community.repo 打开后，找到 [mysql57-community] 这一块配置(将加粗的两个位置更新一下) baseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$basearch/ gpgcheck=0

启动

[root@mysql2 ~]# service mysqld start
Initializing MySQL database:                               [FAILED]
[root@mysql2 ~]# service mysqld start
Starting mysqld:                                           [  OK  ]

停止：service mysqld stop

修改密码

查看默认密码：

grep 'temporary password' /var/log/mysqld.log

最后一串就是默认密码。

进入mysql命令行，输入默认密码即可进入：

mysql -uroot -p

更改密码：

set password for root@localhost = password('密码');
或
set password for root@localhost = '密码'

开启外部访问

grant all on *.* to  root@"%" Identified by "密码"; //开启root用户外部登陆
FLUSH PRIVILEGES;

⚠️Mysql下表名区分大小写，可能项目启动会因此报错，可以通过修改配置文件解决。

vim /etc/my.cnf

在[mysqld]下加一行

lower_case_table_names=1

重启即可service mysqld restart

1.5 Redis

安装

cd到存放Redis的目录下：

$ wget http://download.redis.io/releases/redis-3.2.3.tar.gz
$ tar xzf redis-3.2.3.tar.gz
$ cd redis-3.2.3
$ make

启动

启动redis。进入redis-3.2.3/src目录下，执行： ./redis-server

或 结合配置文件执行

./redis-server & ../redis.conf

make命令报错解决方法：

安装C++编译器：

yum -y install gcc-c++

若还是出错，则执行：

$ make clean  
$ make

再检查redis-x.x.x/src 目录下有没有 redis-server、redis-cli 和 /usr/local/bin下有没有

若无，则把redis-x.x.x 文件夹删掉，再解压一次redis的压缩包，cd进入 redis-x.x.x 中， make 一下 即可

配置外网访问与后台常驻

外网访问：

更改redis.conf 配置文件 由

bind 127.0.0.1 
protected-mode yes

更改为：

# bind 127.0.0.1
protected-mode no

设置常驻：

daemonize yes

以配置文件启动：

redis-server redis.conf

1.6 node.js

（不需要）

第一步 下载node.js

cd到安装目录下，使用wget下载node.js

cd /project/node
wget http://nodejs.org/dist/v0.10.26/node-v0.10.26.tar.gz

第二步 编译

需要保证python版本在2.6以上，查看python版本

python --version
// 2.6.6

编译

./configure --prefix=/usr/local/node/v0.10.26
make
make install

–prefix 可以把所有资源文件放在/usr/local/node/v0.10.26的路径中，

第三步 配置环境变量

修改之前先进行备份

cp /etc/profile /etc/profile.bak

vim编辑

vim /etc/profile

在文件最后加入

export NODE_HOME=/usr/local/node/v0.10.26
export PATH=$NODE_HOME/bin:$PATH
export NODE_PATH=$NODE_HOME/lib/node_modules:$PATH

保存退出之后，执行如下命令让配置立即生效

source /etc/profile

第四步 验证是否安装成功

node -v
// v0.10.26

1.7Nginx（新）

使用编译的方式安装nginx

卸载

linux有一系列的软件管理器，比如常见的linux下的yum、Ubuntu下的apt-get等等。通过这些软件管理器可以很快的卸载软件，并且不会有文件及配置残留。这里我使用的是yum，命令如下:

yum remove nginx

安装

cd到要存放的目录下，下载并解压安装包

wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

编译

./configure --prefix=/project/nginx-1.13.7
make
make install

注：–prefix=[需要安装到的路径]

⚠️ make时报错：*** 没有规则可以创建“default”需要的目标“build，原因是缺少依赖保，执行依赖包安装语句：

yum install pcre-devel zlib zlib-devel openssl openssl-devel

依赖包安装完成后，需要重新执行./configure语句

运行

cd到刚才安装的路径下，可以看到目录下有四个文件夹

cd /project/nginx-1.13.7

image-20200917114605910

cd到sbin下，执行

./nginx

使用此种方式安装，执行nginx命令都需要到此sbin文件夹下执行，无法全局执行

且执行命令方式例如： ./nginx -t ./nginx -s reload

查看端口占用情况

netstat -antp

可以看到80端口被nginx占用，此时访问本地80端口，会出现nginx的欢迎页面

配置文件在conf文件夹中，可自行更改

配置

  • 413错误

    原因：nginx限制了文件上传大小，需要更改nginx配置

    解决：在nginx.conf http段配置文件中配置允许客户端请求文件大小

    client_max_body_size 10m; #允许客户端请求的最大单文件字节数
client_body_buffer_size 128k; #缓冲区代理缓冲用户端请求的最大字节数

2.SpringBoot打包

以打war包部署到外部Tomcat为例子

打包前注意referer添加一个服务器的ip地址

步一：pom.xml修改

pom.xml中把jar改成war

<packaging>war</packaging>

步二：排除内嵌Tomcat

因为这里RuoYi项目已经通过继承SpringBootServletInitializer重写SpringApplicationBuilder方法来排除内置Tomcat，所以pom文件不需要额外改动

*如果启动类没有修改，那么需要在pom文件中排除tomcat

步三：启用打包程序

IDEA：先clean–>再package

image-20200723204213250

完成后会显示成功，并且war包会在target目录。

步四：部署

将war包放在tomcat的webapps目录下，启动tomcat即可。注意查看日志。

查看tomcat进程：

ps -ef | grep tomcat

访问路径为 ip:tomcat端口号/项目名称(war包名称)

示例：(http://10.211.55.4:8088/ruoyi-admin/index)

步五：配置nginx

项目启动成功后，需要设置nginx，解决前后端分离的跨域问题；

如下，为该后端项目配置一个代理

image-20200917150015143

  location /prod-api {
  	proxy_pass http://127.0.0.1:8088/terton-dolphin-project;
  }

⚠️ 需要附上项目包名才能成功代理，配置完成后，重启nginx，成功代理。

3.vue打包部署

打包

cd到项目跟路径下，执行

npm install

执行完成后，在执行

npm run build

⚠️ 如果报错，出现npm ERR! missing script: build ，进入package.json中scripts，查看到参数为："build:prod": "vue-cli-service build",那么更改执行命令为:

npm run build:prod --report

打包成功后在项目目录下会生成dist文件夹

部署到Nginx

将生成的dist文件放到nginx的html文件夹下，修改nginx配置文件

先备份配置文件：

cp ./nginx.conf ./nginx.conf.bak

修改配置文件示例：在80端口添加如下两个配置，这里是在80端口部署2个vue项目

location /console {
  alias   html/dist;		# 项目打包生成的dist文件夹
  index  index.html index.htm;
  try_files $uri $uri/ /console/index.html;		# 首页
}

location /project {
  alias   html/dist2;	 # 项目打包生成的dist文件夹
  index index.html index.htm;
  try_files $uri $uri/ /project/index.html;		# 首页
}

完整截图，只改动红框内，其他不需要变动：

image-20200917142818397

重新启动nginx

在nginx/sbin目录下

./nginx -s reload

访问 ip/[刚才配置的路径] 即可跳转成功

4.Docker

【以后的项目安装都基于docker，而不是采用上述的单独分离安装，docker版本部署正在研究中…..】

1.安装docker

步骤一：检查cenos内核版本，必须为64位系统且系统内核>=3.1

uname -r

image-20200916142949269

步骤二：yum安装docker

先检查是否已经安装

yum list installed | grep docker

若无内容表示未安装

使用yum安装

yum -y install docker

-y表示不询问安装，直到安装成功，安装完后再次查看安装列表

安装完毕后，再次查看安装列表会出现：

image-20200916143140783

步骤三：启动docker

systemctl start docker

步骤四：查看docker服务状态

systemctl status docker

image-20200916143238016

2.docker 使用

  1. 查看容器状态

    docker ps -a

  2. 启动指定容器

    docker start [CONTAINER ID]

  3. 停止指定容器

    docker stop [CONTAINER ID]

5.minio文件服务器

使用docker安装minio 文件上传服务器

第三方中文官网: https://docs.min.io/cn/minio-quickstart-guide.html

安装

docker pull minio/minio
docker run -p 9000:9000 minio/minio server /data

配置密码+新建容器

docker run -p 9000:9000 --name minio2n -e "MINIO_ACCESS_KEY=【用户名】" -e "MINIO_SECRET_KEY=【密码】" -v /mnt/data:/data -v /mnt/config:/root/.minio minio/minio server /data

–name 后接容器名

配置Nginx

配置nginx反向代理到9000端口即可。

存在问题：上传文件时无法使用反向代理的路径，只能使用ip:9000端口的方式上传

6.Jenkins

1.安装

下载镜像文件

解压：

rpm -ivh [文件名]

配置端口：

vim /etc/sysconfig/jenkins

#监听端口
JENKINS_PORT="8080"

配置权限

为了不因为权限出现各种问题，这里直接使用root

修改用户为root

vim /etc/sysconfig/jenkins

#修改配置
$JENKINS_USER="root"

修改目录权限

chown -R root:root /var/lib/jenkins
chown -R root:root /var/cache/jenkins
chown -R root:root /var/log/jenkins

2.配置JDK

vim /etc/init.d/jenkins

在candidates后添加JDK路径

image-20211007171211097

3.启动

# 直接启动
systemctl start jenkins

或

# 改完配置文件的重启
systemctl daemon-reload
systemctl restart jenkins

4.修改防火墙端口

修改防火墙，开启端口以遍外部访问

vim /etc/sysconfig/iptables

配置可参考Tomcat端口开启配置

5.构建SpringBoot项目

7.SpringBoot Jar运行

打完Jar包后，如何保持后台运行：

nohup java -jar server-0.0.1-SNAPSHOT.jar >log.log &

  • nohup表示不挂断运行命令，即使shell关闭了，程序依然会在后台运行。

  • 其中的>log.log表示将程序的输出重定向到log.log文件中，默认的情况下，是输出到当前目录下的nohup.out文件中。

8.开启FTP服务(废弃，直接使用sftp)

1.1 安装 VSFTPD

使用 yum 安装 [vsftpd]：

yum install vsftpd -y

vsftpd 是在 Linux 上被广泛使用的 FTP 服务器，根据其官网介绍，它可能是 UNIX-like 系统下最安全和快速的 FTP 服务器软件。

1.2 启动 VSFTPD

安装完成后，启动 FTP 服务：

service vsftpd start

服务启动后，查看21端口是否启动：

netstat -nltp | grep 21

此时，在浏览器访问 ftp:// 服务器的IP 就可浏览机器上的 /var/ftp 目录了。

PS：记得打开防火墙端口