Springboot+vue项目上云

一、准备工作

云服务器

购买一台 Windows 系统的云服务器（如阿里云 ECS、腾讯云 CVM 等），推荐配置：2 核 4G 以上，系统选 Windows Server 2019/2022。记住服务器的 公网 IP、登录用户名（默认一般是
Administrator）和密码（购买时设置或重置）。

本地工具

远程连接工具：系统自带的「远程桌面连接」（Windows 搜索 “mstsc” 打开）。数据库连接工具：本地已有的
Navicat或
DBeaver（用于远程管理服务器的 MySQL）。

二、远程连接服务器

打开本地「远程桌面连接」，输入服务器的 公网 IP，点击「连接」。输入用户名（
Administrator）和密码，登录服务器（首次登录可能提示证书，点 “是” 即可）。
登录后会看到一个 Windows 桌面，和本地电脑操作类似。

三、在服务器上安装必要软件

1. 安装 JDK（SpringBoot 运行依赖）

服务器上打开浏览器，下载 JDK 8 或 11（推荐 8，兼容性好）：官网地址：https://www.oracle.com/java/technologies/downloads/#java8-windows选择 
jdk-8uXXX-windows-x64.exe（XXX 是版本号，如 391）。双击安装，记住安装路径（默认
C:Program FilesJavajdk1.8.0_XXX）。配置环境变量：右键「此电脑」→「属性」→「高级系统设置」→「环境变量」→「系统变量」：
新建 
JAVA_HOME，值为 JDK 安装路径（如
C:Program FilesJavajdk1.8.0_391）。编辑 
Path，新增 
%JAVA_HOME%in 和 
%JAVA_HOME%jrein。 验证：打开服务器的「命令提示符」（Win+R 输入
cmd），输入 
java -version，显示版本号则成功。

2. 安装 MySQL（数据库）

服务器上下载 MySQL 8.0（或 5.7）：官网地址：https://dev.mysql.com/downloads/installer/选择 
mysql-installer-community-8.0.XX.0.msi（XX 是版本号）。双击安装，选择「Custom」自定义安装，勾选「MySQL Server」，一路下一步：
密码设置：设一个容易记的密码（如
root123456，后续会用到）。端口默认 3306，保持不变。 安装完成后，验证：打开「命令提示符」，输入 
mysql -u root -p，回车后输入密码，能进入 MySQL 命令行则成功。允许远程连接（关键）：在 MySQL 命令行中执行以下命令（替换
your_password为你的密码）：

sql

ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'your_password';
FLUSH PRIVILEGES;

（作用：允许任何 IP 用 root 账号远程连接数据库）

3. 安装 Nginx（部署 Vue 前端）

服务器上下载 Nginx：官网地址：http://nginx.org/en/download.html选择稳定版（Stable version）的
nginx-XXX.zip（如
nginx-1.24.0.zip）。解压到服务器的
C:
ginx目录（路径尽量简单，避免中文）。验证：双击
C:
ginx
ginx.exe，浏览器访问
http://localhost，出现 “Welcome to nginx!” 则成功。（注意：Nginx 启动后在任务管理器的「进程」中可见，关闭时需在进程中结束）

四、部署后端（SpringBoot）

1. 本地打包 SpringBoot 项目

在本地 IDE（如 IDEA）中，确保项目能正常运行，数据库连接暂时用本地的。打包成
jar包：
Maven 项目：右侧 Maven 面板→
Lifecycle→双击
package，等待打包完成，生成的
jar在
target目录下。Gradle 项目：右侧 Gradle 面板→
Tasks→
build→双击
bootJar，生成的
jar在
build/libs目录下。 测试 jar 包：本地命令行执行 
java -jar 你的项目.jar，能启动且访问接口则正常。

2. 修改后端配置（连接服务器 MySQL）

打开本地项目的
application.yml（或
application.properties），修改数据库连接配置：

yaml

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/你的数据库名?useSSL=false&serverTimezone=Asia/Shanghai
    username: root  # 服务器MySQL的用户名
    password: 你的服务器MySQL密码  # 步骤三.2中设置的密码

重新打包 jar 包（确保配置生效）。

3. 上传后端 jar 到服务器并运行

用
FileZilla连接服务器：
主机：服务器公网 IP用户名：
Administrator密码：服务器登录密码端口：默认 21，直接连接。 连接成功后，在服务器上新建目录（如
C:ackend），把本地的
jar包拖到该目录。服务器上打开「命令提示符」，进入
C:ackend目录，执行：

cmd

java -jar 你的项目.jar

看到 “Started XxxApplication in xxx seconds” 表示启动成功。让后端一直运行（关闭命令行不停止）：下载
WinSW工具（用于将 jar 注册为 Windows 服务）：
下载地址：https://github.com/winsw/winsw/releases，选
WinSW-x64.exe。放到
C:ackend目录，重命名为
backend-service.exe。同目录下新建
backend-service.xml，内容如下（替换路径和 jar 名）：

xml

<service>
  <id>backend</id>
  <name>backend</name>
  <description>SpringBoot Backend Service</description>
  <executable>java</executable>
  <arguments>-jar C:ackend你的项目.jar</arguments>
  <logpath>C:ackendlogs</logpath>
</service>

命令提示符执行 
backend-service.exe install，然后在「服务」中找到
backend，右键「启动」。

五、部署前端（Vue）

1. 本地打包 Vue 项目

本地项目中，修改接口请求地址：找到前端调用后端接口的地方（如
axios的 baseURL），把之前的
localhost:端口改成服务器的公网 IP: 后端端口，例如：

javascript

运行

axios.defaults.baseURL = 'http://服务器公网IP:8080'  // 假设后端端口是8080

打包：本地命令行进入 Vue 项目目录，执行 
npm run build，生成
dist文件夹。

2. 部署到 Nginx

用
FileZilla把本地
dist文件夹里的所有文件，上传到服务器的
C:
ginxhtml目录（覆盖原有文件）。重启 Nginx：服务器上打开「命令提示符」，进入
C:
ginx目录，执行：

cmd

nginx -s reload

（如果 Nginx 没启动，先执行
start nginx）

六、配置服务器安全组（关键）

云服务器默认会拦截端口，需要手动开放用到的端口：

登录你的云服务商控制台（如阿里云 ECS 控制台），找到你的服务器实例。找到「安全组」配置，添加以下端口规则：
80 端口（Nginx 前端访问）后端项目端口（如 8080，根据你的 SpringBoot 配置）3306 端口（MySQL 远程连接，可选，用完可关闭）规则方向：「入方向」，授权对象：
0.0.0.0/0（允许所有 IP 访问）。

七、测试访问

前端：浏览器访问 
http://服务器公网IP，能看到 Vue 页面则成功。后端：访问 
http://服务器公网IP:后端端口/你的接口（如
http://1.2.3.4:8080/api/test），能返回数据则成功。数据库：本地用 Navicat 连接服务器 MySQL，主机填公网 IP，用户名 root，密码步骤三.2 设置的，能连接则成功。