Ubuntu 云服务器部署 Spring Boot + Vue + MySQL 实践

背景介绍

之前使用 AI 代码工具 Trae 基于 Spring + Vue + MySQL 生成了一个输入要做事情 AI 自动生成待办任务列表的小工具，效果如下：

本地跑通后正好有一台阿里云服务器和域名，准备把这个项目部署到云服务器实现远程访问，本文记录部署过程。

部署过程

云服务器配置

云服务器使用的是 2 核（vCPU）、2 GiB 最基础配置，不过跑一个简单服务也绰绰有余。安装的系统是 Ubuntu 24.04 64 位。

部署后端服务

安装 MySQL

后端服务采用了 SpringBoot + MySQL，首先安装 MySQL，这里通过 Ubuntu 官方仓库安装。

首先更新系统包列表：

sudo apt update

接着安装 mysql 服务器：

sudo apt install mysql-server

接下来启动 MySQL 服务：

sudo systemctl start mysql
sudo systemctl enable mysql # 设置开机自启

最后通过 sudo systemctl status mysql 查看 mysql 服务状态。

安装完成后，运行安全脚本加固 MySQL：

sudo mysql_secure_installation

按提示操作：

1. 设置 root 密码。
2. 移除匿名用户。
3. 禁止远程 root 登录。
4. 删除测试数据库。
5. 刷新权限表。

接下来创建我们项目的数据库：

CREATE DATABASE IF NOT EXISTS autotodo DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

构建后端项目

后端项目采用 springboot，通过 maven 构建，在 pom.xml 所在目录下执行：

mvn clean package -DskipTests

构建完成后会在 target 路径下生成对应 Jar，我们直接运行 jar 包查看运行结果：

java -jar autotodo-server-1.0.0-SNAPSHOT.jar

这样服务就启动起来了。

项目中我们使用了 Flyway 来进行数据库版本控制。在 Spring Boot 中，Flyway 是一个轻量级的数据库版本控制工具，用于自动化管理和执行数据库迁移脚本（如创建表、修改字段、插入初始化数据等）。它通过跟踪已应用的数据库变更，确保不同环境（开发、测试、生产）的数据库结构一致。以下是 Flyway 的核心概念和在 Spring Boot 中的使用指南。

Flyway 核心机制

1. 迁移脚本 (Migrations)
   • Flyway 使用 SQL 文件 或 Java 类 定义数据库变更。
   • 脚本命名规则：V<版本号>__<描述>.sql（例如 V1__Create_user_table.sql）。
   • 版本号必须唯一且按顺序递增（如 V1, V2, V3.1）。
2. 元数据表 (flyway_schema_history)
   • Flyway 自动创建此表，记录已执行的迁移脚本、校验和、执行时间等信息。
   • 每次应用启动时，Flyway 会检查未执行的脚本并自动执行。
3. 迁移类型

类型	描述	示例文件名
Versioned	常规结构变更（DDL/DML）	V1__Create_table.sql
Repeatable	可重复执行的脚本（如视图、存储过程）	R__Update_view.sql
Undo	回滚脚本（需商业版支持）	U1__Drop_table.sql

Spring Boot 集成 Flyway

1. 添加依赖 在 pom.xml 中引入 Flyway 依赖：

<dependency>
    <groupId>org.flywaydb</groupId>
    <artifactId>flyway-core</artifactId>
</dependency>

这里项目中由于未指定版本遇到问题改为下面方式：

<dependency>
    <groupId>org.flywaydb</groupId>
    <artifactId>flyway-core</artifactId>
    <version>8.5.13</version>
</dependency>
<dependency>
    <groupId>org.flywaydb</groupId>
    <artifactId>flyway-mysql</artifactId>
    <version>8.5.13</version>
</dependency>

2. 配置数据源和 Flyway 在 application.properties 或 application.yml 中配置：

# 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=123456
# Flyway 配置
spring.flyway.enabled=true
spring.flyway.locations=classpath:db/migration # 脚本存放路径
spring.flyway.baseline-on-migrate=true # 初始化已有数据库
spring.flyway.validate-on-migrate=true # 校验脚本是否被修改

3. 创建迁移脚本 在 src/main/resources/db/migration 目录下创建 SQL 文件：

src/main/resources/
└── db/
    └── migration/
        ├── V1__Create_user_table.sql
        └── V2__Add_email_column.sql

这样不需要我们自己创建表，服务启动后就会自动帮我们创建表。

后台运行服务

我们通过 java 命令直接运行 jar 的方式会阻塞控制台，如果控制台关闭，服务就停了，这里使用 systemd（系统服务管理）来创建守护进程，支持开机自启、日志监控和自动重启。

Systemd 特点：

• 适合长期运行的服务（如 Web 服务器）。
• 需要 root 权限。

接下来我们创建服务文件：

sudo nano /etc/systemd/system/autotodo.service

接着写入配置：

[Unit]
Description=My Spring Boot Application
After=syslog.target

[Service]
User=root
ExecStart=java -jar /root/code/AutoTodo/server/autotodo-server-1.0.0-SNAPSHOT.jar
Restart=on-failure
Environment=SPRING_PROFILES_ACTIVE=prod
WorkingDirectory=/root/code/AutoTodo/server

[Install]
WantedBy=multi-user.target

最后启用并启动服务：

sudo systemctl daemon-reload
sudo systemctl start autotodo # 启动服务
sudo systemctl enable autotodo # 开机自启

最后可以通过 systemctl status autotodo 查看服务运行情况：

部署前端项目

安装 Nginx

前端 Vue 打包后需要使用静态服务承接请求，这里使用 Nginx。

在 Ubuntu 上安装 Nginx 的步骤如下：

1. 更新系统包列表

sudo apt update

2. 安装 Nginx

sudo apt install nginx

3. 验证安装 安装完成后，Nginx 会自动启动。检查服务状态：

sudo systemctl status nginx

正常输出应显示 active (running)。 4. 调整防火墙（可选） 如果启用了 UFW 防火墙，开放 HTTP（80）和 HTTPS（443）端口：

sudo ufw allow 'Nginx Full' # 允许 HTTP 和 HTTPS
sudo ufw reload

5. 测试访问 在浏览器中访问服务器的 IP 或域名：

http://your-server-ip

若看到 'Welcome to nginx!' 页面，表示安装成功。 6. 管理 Nginx 服务

命令	说明
sudo systemctl start nginx	启动 Nginx
sudo systemctl stop nginx	停止 Nginx
sudo systemctl restart nginx	重启 Nginx
sudo systemctl reload nginx	重新加载配置（不中断服务）
sudo systemctl enable nginx	设置开机自启

7. 配置文件说明

• 默认配置文件路径：

/etc/nginx/nginx.conf # 全局配置
/etc/nginx/sites-available/* # 虚拟主机配置
/etc/nginx/sites-enabled/* # 已启用的虚拟主机配置（符号链接）

• 默认静态文件目录：/var/www/html

8. 基本配置示例 (1) 托管静态网站 创建配置文件 /etc/nginx/sites-available/my-site：

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    root /var/www/my-site;
    index index.html;
    location / {
        try_files $uri $uri/ =404;
    }
    # 静态资源缓存
    location ~* \.(css|js|png|jpg|svg)$ {
        expires 1y;
        add_header Cache-Control "public";
    }
}

启用配置并重载 Nginx：

sudo ln -s /etc/nginx/sites-available/my-site /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

(2) 反向代理后端服务 将请求转发到本地的 Spring Boot 应用（假设运行在 8080 端口）：

server {
    listen 80;
    server_name api.your-domain.com;
    location / {
        proxy_pass http://localhost: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;
    }
}

9. 启用 HTTPS（可选） 使用 Let's Encrypt 免费 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com -d www.your-domain.com

证书会自动续期，无需手动操作。

构建打包前端项目

可以在项目中直接使用 npm run dev 来运行前端项目，但部署的话需要先构建打包后再部署，通过 npm run build 来打包构建，打包完成后输出到 dist 目录。

将打包好路径上传到 /var/www/todo 下

接下来配置 Nginx。

配置 Nginx 服务

在 /etc/nginx/sites-available/ 下创建我们项目的配置文件 todo.conf，输入内容如下：

server {
    listen 80;
    server_name todo.xxx.com; # 优先匹配静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root /var/www/todo/frontend/dist;
        expires 1y; # 缓存静态资源
        add_header Cache-Control "public";
        access_log off;
    }
    # 前端静态文件
    location / {
        root /var/www/todo/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # 后端 API 代理
    location /api {
        proxy_pass http://localhost: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    # SSL 配置 (需要证书)
    # listen 443 ssl;
    # ssl_certificate /path/to/cert.pem;
    # ssl_certificate_key /path/to/key.pem;
    # 性能优化
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    client_max_body_size 10m;
}

这里面配置了静态资源服务和后端 server api 方向代理接口，这样通过域名可以直接访问我们的页面了。 最开始由于少配了下面内容：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    root /var/www/todo/frontend/dist;
    expires 1y; # 缓存静态资源
    add_header Cache-Control "public";
    access_log off;
}

导致打开页面是 js 文件无法被正确加载。

效果展示

最后放几个效果图： 首先登录：

等待完成可以输入我们要完成的事情：

输入内容等待服务端响应，服务端此时调用 DeepSeek 生成代办项：

生成结果后可以选中代办项进行保存：

保存后跳转到待办列表可以查看我们具体事项对应待办了：