Springboot+vue前后端分离项目部署到云服务器

部署到云服务器

环境配置

默认已配置jdk环境，如果没有需要自行配置。

Mysql

首先查看有无centos默认安装的mariadb，如果有则卸载

rpm -e mariadb-libs --nodeps

创建存放mysql的文件夹

cd /usr/local

mkdir mysql

cd mysql

在线下载mysql

wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.16-2.el7.x86_64.rpm-bundle.tar

下载好后如图

解压文件夹

tar -xvf mysql-8.0.16-2.el7.x86_64.rpm-bundle.tar

安装mysql

rpm -ivh mysql-community-common-8.0.16-2.el7.x86_64.rpm --nodeps --force

rpm -ivh mysql-community-libs-8.0.16-2.el7.x86_64.rpm --nodeps --force

rpm -ivh mysql-community-client-8.0.16-2.el7.x86_64.rpm --nodeps --force

rpm -ivh mysql-community-server-8.0.16-2.el7.x86_64.rpm --nodeps --force

配置mysql

MySQL 的核心配置文件位于 /etc/my.cnf 或 /etc/mysql/my.cnf，我们可以通过下面的命令找到my.cnf文件

find / -name my.cnf

修改my.cnf文件，添加下面的配置

lower_case_table_names = 1

初始化配置

启动mysql，查看运行状态

sudo systemctl start mysqld

service mysqld status

获取初始密码：

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

这里遇到问题，尝试获取初始化密码失败，没有密码无法登录，于是开始尝试跳过密码登录后再修改密码：

修改vi /etc/my.cnf，在[mysqld]下面加上：

skip-grant-tables

保存后重启mysql，重启之后直接登录

mysql -u root -p

进入后修改密码，先查看用户host

use mysql;

SELECT user, host, plugin, authentication_string FROM user WHERE user = 'root';

修改密码，并且刷新权限，改完后重启用新密码登录一下确定没有问题

alter user 'root'@'%' identified by 'User@123456';

flush privileges;

连接mysql

在navicat中建立云服务器连接，将项目的数据库导入

Redis

这里使用简单的yum命令安装redis，也可以选择在redis官网下载后导入包

sudo yum install -y epel-release redis

sudo systemctl start redis

sudo systemctl enable redis

redis-cli ping

这样安装后配置文件位置如下：

Redis主配置文件

/etc/redis.conf

Redis Sentinel配置文件

/etc/redis-sentinel.conf

可执行文件位置：

Redis服务器

/usr/bin/redis-server

Redis客户端

/usr/bin/redis-cli

Redis基准测试工具

/usr/bin/redis-benchmark

Redis检查工具

/usr/bin/redis-check-aof

/usr/bin/redis-check-rdb

Redis Sentinel

/usr/bin/redis-sentinel

检查Redis服务状态

sudo systemctl status redis

查看版本和运行信息

查看Redis版本

redis-server --version

redis-cli --version

查看运行信息

redis-cli info | head -20

修改redis配置

编辑修改redis配置文件

vi /etc/redis.conf

允许访问的地址，默认为本地

bind 127.0.0.1 -::1

守护进程，修改为yes后即可后台运行

daemonize yes

设置redis密码，默认无需密码

requirepass 123456

将protected-mode设置为no，避免因未配置密码或非本地连接导致拒绝访问。

protected-mode no

重启Redis使配置生效，之后使用密码连接测试

重启Redis使配置生效

sudo systemctl restart redis

使用密码连接测试

redis-cli -a 123456 ping

设置Redis开机自启

新建一个系统服务文件

vi /etc/systemd/system/redis.service

写入如下内容，注意文件的路径修改为自己的

$Unit$
Description=Redis persistent key-value database

After=network.target

After=network-online.target

Wants=network-online.target
$Service$
ExecStart=/usr/bin/redis-server /etc/redis.conf --supervised systemd

ExecStop=/usr/bin/redis-cli shutdown

Type=notify

User=redis

Group=redis

RuntimeDirectory=redis

RuntimeDirectoryMode=0755
$Install$
WantedBy=multi-user.target

如何重载系统服务

systemctl daemon-reload

之后可以使用以下redis命令运行redis

启动

systemctl start redis

允许开机自启

systemctl enable redis

停止

systemctl stop redis

重启

systemctl restart redis

查看状态

systemctl status redis

Nginx

安装

创建并进入目录，将nginx安装包放到目录下

cd /usr/local/nginx

解压缩包到当前目录

tar -xvf +包名

进入目录

cd nginx-1.19.6

编译执行命令

./configure

执行编译

make

执行安装命令

make install

启动

cd /usr/local/nginx/sbin

默认配置文件为/usr/local/nginx/conf/nginx.conf

启动nginx

./nginx

通过ip地址+端口号(默认80)的方式访问：

出现这个页面说明运行成功了

配置

打开配置文件

vi /usr/local/nginx/conf/nginx.conf

修改

html 复制代码

# 添加
worker_processes  1;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        # 监听端口，可以换成任意自己想要的
        listen       80;
        # 可以换成任意名称
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        # 前端静态文件
        location / {
            # 前端vue存放路径，写到dist即可
            root   /usr/local/src/myLibrary/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  # 解决 Vue 路由问题
        }
 
        # 后端 API 代理 - 将 /prod-api/ 转发到 Spring Boot
        location /prod-api/ {
            proxy_pass http://127.0.0.1:8383/;  # 转发到 Spring Boot
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # 增加超时设置
            proxy_connect_timeout 30s;
            proxy_send_timeout 30s;
            proxy_read_timeout 30s;
        }
 
        
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   404 =200 /index.html;
        location = /50x.html {
            #root   html;
            root /usr/local/src/myLibrary/dist;
        }
 
    }
}

重启nginx让配置生效

cd /usr/local/nginx/sbin

重启命令

./nginx -s reload

停止指令

./nginx -s stop

查看状态，成功会出现下图

./nginx -t

部署

springboot后端

打包

修改项目配置为云服务器信息，之后使用maven插件进行install打包

注意前面redis设置了密码，yml配置文件中也需要加上这一项

bash 复制代码

spring:
  redis:
    host: 127.0.0.1  # Redis 本地地址
    port: 6379       # Redis 端口
    password: 123456 # Redis 认证密码，与 redis.conf 保持一致

高版本idea创建项目时自带扫描resources下的xml文件的配置，但低版本如2017在打包之前需要添加配置，否则打包后无法访问到xml配置文件，会报错如下：

扫描resources下的xml文件需要在pom.xml中的build标签下添加如下配置

XML 复制代码

        <resources>
            <!--扫描resources下的xml文件-->
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.*</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>

部署

创建目录/usr/local/community，上传到云服务器并尝试运行

java -jar community.jar

运行没问题后再使用下面的命令，让springboot项目在后台运行，并且日志产生到该目录下的nohup.out当中

nohup java -jar community.jar &

nohup.out中的内容如下图，是springboot项目运行信息

vue前端

打包

1.修改本地项目配置

因为此处使用build将前端打包为静态页面，所以不需要考虑前端的端口号

搜索localhost / 127.0.0.1，全部替换为云服务器IP

2.运行命令npm run build:prod，但是这里遇到报错

error:0308010C:digital envelope routines::unsupported

根本原因是 Node.js 版本过高（我这里使用的是 v22.14.0），与项目中依赖的旧版 Webpack（或相关构建工具，如 Vue CLI、React Scripts）不兼容。

具体来说：高版本 Node.js 废弃了部分旧的 OpenSSL 加密算法，而项目依赖的旧版 Webpack 仍在使用这些被废弃的算法，导致构建过程中加密哈希计算失败，直接抛出该错误。

这里采用临时解决方案：

首先打开cmd进入项目路径，临时修改环境变量，之后执行打包

第一步：设置环境变量

set NODE_OPTIONS=--openssl-legacy-provider

第二步：执行打包命令

npm run build:prod

运行成功之后会在项目文件夹目录里面生成打包好的文件夹dist

部署

在云服务器中创建目录：/usr/local/src/myLibrary/，把打包好的dist文件夹放到里面

因为前面已经配置好环境、部署好后端了，我们确保环境和后端都启动后，就可以尝试用ip地址+端口的形式访问：

输入账号密码进入，访问成功即部署成功

额外：如何释放端口、终止进程

1.查找占用 8383 端口的进程 PID（进程编号）

使用 ss 结合 grep 命令（系统自带，无需额外安装）

ss -tulpn | grep 8383

2.终止进程

正常终止进程（3344改为上一步查出的进程 PID）

kill 3334

3.终止后再次执行第一步，查看是否成功终止进程

Springboot+vue前后端分离项目部署到云服务器

部署到云服务器

环境配置

Mysql

Redis

Redis主配置文件

Redis Sentinel配置文件

Redis服务器

Redis客户端

Redis基准测试工具

Redis检查工具

Redis Sentinel

查看Redis版本

查看运行信息

允许访问的地址，默认为本地

守护进程，修改为yes后即可后台运行

设置redis密码，默认无需密码

将protected-mode设置为no，避免因未配置密码或非本地连接导致拒绝访问。

重启Redis使配置生效

使用密码连接测试

启动

允许开机自启

停止

重启

查看状态

Nginx

创建并进入目录，将nginx安装包放到目录下

解压缩包到当前目录

进入目录

编译 执行命令

执行编译

执行安装命令

默认配置文件为/usr/local/nginx/conf/nginx.conf

启动nginx

打开配置文件

重启命令

停止指令

查看状态，成功会出现下图

部署

springboot后端

vue前端

第一步：设置环境变量

第二步：执行打包命令

使用 ss 结合 grep 命令（系统自带，无需额外安装）

正常终止进程（3344改为上一步查出的进程 PID）

编译执行命令