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

项目部署

环境配置
- Redis
- Nginx
前端项目部署
后端项目部署

该项目采用前后端分离架构，后端基于 Spring Boot 框架开发，前端使用 Vue.js 实现，下面介绍具体部署方案。

首先是服务器的环境准备

环境配置

其中 JDK 和 Mysql 的配置在我这篇博客里有详细介绍在Linux上部署Web项目，此项目还需要 Redis 和 Nginx 的配置

Redis

创建文件夹 /usr/local/redis，通过 yum 包管理器快速安装和启动 Redis

安装 Redis

bash 复制代码

sudo yum install -y epel-release redis

配置文件位置如下：
Redis 主配置文件：/etc/redis.conf
Redis Sentinel 配置文件：/etc/redis-sentinel.conf
可执行文件在系统默认的可执行目录 /usr/bin 下（系统会自动识别，无需配置环境变量即可直接执行）：
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 版本

bash 复制代码

redis-server --version
redis-cli --version

这里我们需要按需修改 Redis 核心配置

bash 复制代码

vi /etc/redis.conf

bind 127.0.0.1 -::1
找到 NETWORK 下的 bind 参数，默认配置为127.0.0.1 -::1，表示仅允许本地访问，若需远程访问，可绑定服务器IP或注释该行
daemonize yes
守护进程，找到 GENERAL 修改 daemonize 为 yes 后即可后台运行
protected-mode no
将protected-mode设置为no，避免因未配置密码或非本地连接导致拒绝访问
requirepass 123456
在配置文件中添加 requirepass 密码以设置访问密码

修改完成后保存文件，重启 Redis 使配置生效

bash 复制代码

sudo systemctl restart redis

使用密码连接测试

bash 复制代码

redis-cli -a 123456 ping

查看状态

bash 复制代码

systemctl status redis

查看运行信息

bash 复制代码

redis-cli info | head -20

若默认服务文件的启动参数不符合需求或想自定义服务的依赖、重启策略等，可用自定义配置覆盖系统默认配置

bash 复制代码

vi /etc/systemd/system/redis.service

创建 Redis 的自定义 systemd 服务配置文件，/etc/systemd/system/ 是用户自定义服务文件目录，优先级高于系统默认的 /usr/lib/systemd/system/，一旦在这里创建了 redis.service，systemd 会优先用这个文件的规则管理 Redis，忽略 yum 安装的默认配置。

写入如下内容，注意文件的路径按需修改

bash 复制代码

[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

设置完后重载系统服务，让 systemd 守护进程重新扫描所有.service文件，加载最新配置

bash 复制代码

systemctl daemon-reload

启动服务

bash 复制代码

systemctl start redis

再允许开机自启

bash 复制代码

systemctl enable redis

如何进入 Redis 客户端：

进入到 Redis 根目录文件夹（我这里是 /usr/local/redis）输入：redis-cli [-p 端口号]

若使用默认端口 6379 则可省略 -p 参数，若配置了密码，连接后需填写密码进行认证

Nginx

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

解压缩包到当前目录：tar -xvf +包名

进入目录

bash 复制代码

cd nginx-1.19.6

编译执行命令

bash 复制代码

./configure

执行编译

bash 复制代码

make

执行安装命令

bash 复制代码

make install

nginx 的默认安装根目录是 /usr/local/nginx，因此执行 make install 后，/usr/local/ 目录下会生成 nginx 文件夹

进入nginx的 /sbin 目录下

bash 复制代码

cd /usr/local/nginx/sbin

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

启动 nginx

bash 复制代码

./nginx

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

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

前端项目部署

修改 vue.config.js 当中的url，按照自己服务器的 ip 地址和后端的 springboot 端口号进行修改

在此目录下运行打包命令：

bash 复制代码

npm run build:prod

这里产生了报错，这是因为 Node.js 17+ 版本升级了 OpenSSL 3.0，不再支持 MD4/MD5 等旧哈希算法，而在项目中 Webpack 版本较低仍在使用这些旧算法，导致加密算法不兼容，触发 ERR_OSSL_EVP_UNSUPPORTED 错误。

这里采用临时解决方案：

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

bash 复制代码

set NODE_OPTIONS=--openssl-legacy-provider
npm run build:prod

这里通过设置 NODE_OPTIONS=--openssl-legacy-provider 环境变量，强制 Node.js 启用旧版 OpenSSL 提供程序，兼容旧哈希算法，这个临时配置仅对当前终端会话有效，关闭终端后失效，下次打包需要重新执行环境变量设置命令。

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

在服务器中创建目录 /usr/src/communityVueProject 用于存放前端项目文件，将打包好的 dist 文件夹放到里面

修改 nginx 的配置文件

bash 复制代码

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

bash 复制代码

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  106.55.104.210;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        # 前端静态文件
        location / {
            root   /usr/src/communityVueProject/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:8282/;  # 转发到 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/src/communityVueProject/dist;
        }
 
    }
}

我们需要重启 nginx 让配置生效，首先需要进入这个目录

bash 复制代码

cd /usr/local/nginx/sbin

重启命令

bash 复制代码

./nginx -s reload

查看状态

bash 复制代码

./nginx -t

成功会出现下图：

通过 ip地址:端口号的形式访问

若能看到前端页面，那么前端部分就部署完成了

后端项目部署

修改 application.yml 配置文件

修改数据库的链接地址、用户名和密码

因项目和 MySQL 在同一台云服务器上，也可以使用 localhost

修改图片路径，图片资源是给前端终端访问的，前端运行在用户的本地电脑（不属于云服务器本机），需通过云服务器公网 IP 和端口号才能让前端访问到服务器上的图片文件

在 pom.xml 文件中加入配置

遵循Spring Boot规范构建可独立运行的可执行JAR包，且标准化管理项目资源文件的打包规则，最终保障Spring Boot项目从源代码转化为可直接部署运行的产物，且运行时能正确加载所有配置与资源文件。

xml 复制代码

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.*</include>
                </includes>
            </resource>
        </resources>
    </build>

spring-boot-maven-plugin 插件的作用

构建JAR包：将项目编译后的字节码、所有第三方依赖统一打包至JAR文件中，消除了传统Java项目运行时需手动配置依赖路径问题；
注入启动引导逻辑：自动在JAR包的 MANIFEST.MF 清单文件中配置主类（标注 @SpringBootApplication 的启动类）与类加载器规则，使产物可通过 java -jar 命令直接启动；

<resources>资源配置的规范与作用

<directory> 用于明确资源文件的基础目录，<includes> 用于指定包含该目录下文件，确保该目录下的资源纳入构建范围；
编译阶段处理：在Maven的 resources:resources 构建阶段，该配置会将指定资源文件复制至编译输出目录（默认为 target/classes），最终打包至Spring Boot JAR包的类路径根目录，保障运行时Spring Boot应用能通过类路径正确加载资源。
尽管Maven默认会处理 src/main/resources 目录下的资源文件，但显式声明该配置可规避默认规则被修改的风险。

打包完成后会在项目根目录下生成 target 文件夹，进入 target 文件夹找到 JAR 包文件，终端运行进行验证

创建文件夹 /usr/src/springboot 用于存放项目的后端文件，运行无误后将 Jar 包上传再运行

开放所有需要的端口号

查看防火墙开放端口

bash 复制代码

firewall-cmd --list-ports

防火墙开放某一端口

bash 复制代码

firewall-cmd --zone=public --add-port=8282/tcp --permanent

该项目后端服务的监听端口为 8282，redis 监听 6379 端口，nginx 监听 80 端口对外提供服务，均需开启

重启防火墙服务

bash 复制代码

firewall-cmd --reload

下面运行项目，java -jar 是前台临时运行，依赖终端、日志不保存，而使用下面的命令时后台持久运行，不依赖终端、日志保存。

bash 复制代码

nohup java -jar springBoot_community0323-1.0-SNAPSHOT.jar nohup.out &

nohup 全称 no hang up（不挂起），忽略终端关闭时的挂起信号，即使退出 SSH，Java 进程也会继续运行；

& 放在命令末尾，是让程序在后台运行，执行后终端立即释放，可以继续输入其他命令；

运行后查看日志看是否成功启动

实时跟踪最新日志

bash 复制代码

tail -f nohup.out

先读取文件最后 10 行，然后持续监听文件变化，有新日志写入就实时输出

查看完整日志

bash 复制代码

cat nohup.out

一次性读取文件全部内容，输出到终端后命令结束

如下图是项目启动成功的日志内容

若项目启动日志显示 "Address already in use" 端口被占用导致启动失败，我们需要需要找到占用 8282 端口的进程，再停止该进程，最后再重启 SpringBoot 服务。

查找占用8282端口的进程，可以使用通用ss命令（系统自带，无需安装）

bash 复制代码

ss -tulpn | grep :8282

使用 netstat 命令查找占用8282端口的进程

bash 复制代码

netstat -tulpn | grep :8282

需要确认进程是否为无关进程，查看PID对应的进程详情（这里需要替换为实际PID）

bash 复制代码

ps -ef | grep 12345

若输出是 "java -jar xxx.jar"，可放心停止，若为其他关键进程，需谨慎

停止占用端口的进程

bash 复制代码

kill 12345

更改内容后再重新启动 SpringBoot 服务

访问项目地址

这样项目就部署完成了