【超详细】Vue + Spring Boot 云服务器原生部署全流程，一篇搞定生产环境上线

原创已于 2025-08-28 21:51:27 修改 · 1.7k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #spring boot #服务器

于 2025-08-28 11:26:23 首次发布

1. 关键文件与环境准备

关键项目：

前端：dist 文件夹（静态资源）
后端：jar 包（Spring Boot 或其他 Java 后端）
数据库：sql 文件（初始化数据库表结构和数据）

环境准备：

Java 运行环境：确保服务器安装了对应版本的 JDK/JRE（比如 JDK 17，如果你的 jar 是用 JDK17 编译的）。
Nginx 环境：安装 Nginx （方便使用代理，确保前端能正确调用后端 API ）。
数据库服务：MySQL、PostgreSQL 或你 sql 文件对应的数据库，确保数据库能启动，并且网络可达后端。

2. 部署后端项目

首先要安装 jdk ，然后启动 jar 包（如果有不会安装的看一下我的这个文章：Java（JDK）下载与环境配置全纪录-CSDN博客）

java -jar app.jar

如果运行这个程序之后没有报错就 ctrl+c 退出运行下面命令启动：

 nohup java -jar ./app.jar > backend.log 2>&1 &

注意：这个命令不需要着急运行，先调试一下 mysql 没问题了再用这个启动，运行了也没关系，可以打印查看：tail -f backend.log。我建议先不要运行，等调试好了再运行！

然后查看进程是否正常运行：

ps -ef | grep java

3. 安装 Mysql

下载 MySQL 官方 YUM repo 包：

wget https://dev.mysql.com/get/mysql80-community-release-el7-11.noarch.rpm

安装 repo：

sudo rpm -ivh mysql80-community-release-el7-11.noarch.rpm

更新 yum 缓存：

sudo yum clean all
sudo yum makecache

安装 MySQL 服务器：

sudo yum install mysql-community-server -y

启动 MySQL：

sudo systemctl start mysqld
sudo systemctl enable mysqld

找 root 临时密码：

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

用这个临时密码登录并修改密码：

# 执行完下面这个命令输入刚刚的root临时密码
mysql -u root -p

ALTER USER 'root'@'localhost' IDENTIFIED BY '你的新密码';
# 比如：ALTER USER 'root'@'localhost' IDENTIFIED BY 'Root@123456';

这样就成功了。

4. 导入 Mysql

如果 sql 表里面没有建表语句需要手动创建数据库表

mysql -u root -p

创建数据库：

CREATE DATABASE big_event CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
# big_event 换成你自己的表明
exit;

导入数据：

mysql -u root -p big_event < /root/yuanshengbushu/big_event.sql

验证是否导入成功：

mysql -u root -p
USE big_event;
SHOW TABLES;

这样就算成功了。

然后启动 jar 包进行测试看看能不能正确连接，如果连不上可以看看打印日志是什么原因，如果按照我的步骤连不上的话大概率是密码不匹配的问题，可以复制下面的代码到 application.yml（如果密码设置的跟我一样直接 copy 即可，不一样就修改一下密码）：

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/big_event?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
    username: root
    password: Root@123456

没问题了启动一下 jar 包，进入到 jar 的根目录：

 nohup java -jar ./app.jar > backend.log 2>&1 &

然后查看是否正常运行：

ps -ef | grep java

如果都没什么问题，可以在本地电脑访问一下看看能不能访问到，我用的是 postman 测试的。

这样数据库和后端就算联调完了，接下来上前端！

5. 安装 Nginx

为什么要安装？

安装 Nginx 是为了给前端 dist 静态文件提供高性能访问，同时可以做反向代理把请求转发给后端 jar，还能支持路由、缓存和 HTTPS，使前后端统一在同一个域名下安全访问。

怎么安装？

命令下载
本地下载完传到服务器上

我使用命令安装：

5.1. 检查有没有安装 EPEL 仓库

刚刚安装 sql 的时候已经安装了，不需要看了，直接执行安装命令即可

yum repolist | grep epel

如果安装了，会看到类似：

epel/x86_64        Extra Packages for Enterprise Linux 7 - x86_64       13,459

如果没有安装，则不会有任何输出，输入下面命令进行安装。

sudo yum install epel-release -y

5.2. 安装并启动 Nginx

安装 ngxin

sudo yum install nginx -y

出现这个界面即安装成功

启动 nginx 测试一下：

sudo systemctl start nginx         #启动 Nginx
sudo systemctl enable nginx        #设置开机自启（可选）
sudo systemctl status nginx        #检查 Nginx 状态

访问：http://你的服务器 ip/，如果可以看到界面就算成功了！

挂载 dist

如果没什么问题就可以把前端的项目挂载到 nginx 上了，首先进入 /usr/share/nginx/html/ 创建 dist文件夹，把 dist 复制进来

sudo mkdir -p /usr/share/nginx/html/dist
sudo cp -r /root/yuanshengbushu/dist/* /usr/share/nginx/html/dist/

配置 nginx.conf

cat /etc/nginx/nginx.conf #查看
sudo vi /etc/nginx/nginx.conf #编辑

编辑 /etc/nginx/nginx.conf，添加以下选项

第一步：找到 root 修改成下面的这个样子：

root /usr/share/nginx/html/dist;   # 指向你复制过去的 dist 目录
index index.html;

这样访问 / 就会打开 dist/index.html。

第二步：添加前端路由支持，前端 SPA（如 Vue、React）有自己的路由，需要在找不到文件时返回 index.html：

location / {
    try_files $uri $uri/ /index.html;
}

第三步：代理后端接口（避免跨域）

假设你的后端 jar 运行在 8080 端口，可以这样代理：

location /api/ {
    proxy_pass http://127.0.0.1:8080/;  # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

前端请求 /api/... 会转发到后端 jar 服务。
如果你的接口不是 /api/ 开头，请改成实际路径。

如果这里配置有人不懂得话，或者后面连不上后端，那大概率是因为第三步没有配置好，可以看看我的主页有讲这里怎么配的Nginx proxy_pass 404/502 根源：漏写末尾斜杠 / 的修复指南-CSDN博客。

检查并启动 nginx

sudo nginx -t          # 检查语法
sudo systemctl restart nginx

5.3. nginx 配置

我给大家贴出我的 nginx 配置，方便排除错误~

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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 /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 4096;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 80;
        listen [::]:80;
        server_name _;

        root /usr/share/nginx/html/dist;   # 指向你的 dist 目录
        index index.html;

        # 前端 SPA 支持
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 后端接口代理
        location /api/ {
            proxy_pass http://127.0.0.1:8080/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 默认错误页
        error_page 404 /404.html;
        location = /404.html {}

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {}

        # 引入默认配置（可选）
        include /etc/nginx/default.d/*.conf;
    }

    # TLS 配置（可选）
    # server {
    #     listen 443 ssl http2;
    #     listen [::]:443 ssl http2;
    #     server_name _;
    #     root /usr/share/nginx/html;
    #     ssl_certificate "/etc/pki/nginx/server.crt";
    #     ssl_certificate_key "/etc/pki/nginx/private/server.key";
    #     ssl_session_cache shared:SSL:1m;
    #     ssl_session_timeout 10m;
    #     ssl_ciphers HIGH:!aNULL:!MD5;
    #     ssl_prefer_server_ciphers on;
    #     include /etc/nginx/default.d/*.conf;
    #     error_page 404 /404.html;
    #     location = /40x.html {}
    #     error_page 500 502 503 504 /50x.html;
    #     location = /50x.html {}
    # }
}