AI全栈之路：Ubuntu云服务器部署Spring + Vue + MySql-EW帮帮网

背景介绍

之前使用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

按提示操作：

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

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

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 -var autotodo-server-1.0.0-SNAPSHOT.jar

这样服务就启动起来了。

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

Flyway 核心机制

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

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

Spring Boot 集成 Flyway

添加依赖
在 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>

配置数据源和 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          # 校验脚本是否被修改

创建迁移脚本
在 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 statue autoto查看服务运行情况：
在这里插入图片描述

部署前端项目

安装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!” 页面，表示安装成功。

管理 Nginx 服务

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

配置文件说明

默认配置文件路径：

/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生成代办项：
在这里插入图片描述

生成结果后可以选中代办项进行保存：
在这里插入图片描述

保存后跳转到待办列表可以查看我们具体事项对应待办了：
在这里插入图片描述

AI全栈之路：Ubuntu云服务器部署Spring + Vue + MySql

背景介绍

部署过程

云服务器配置

部署后端服务

安装mysql

构建后端项目

Flyway 核心机制

Spring Boot 集成 Flyway

后台运行服务

部署前端项目

安装nginx

构建打包前端项目

配置nginx服务

效果展示

网站公告

今日签到

热门文章

最新发布

AI全栈之路：Ubuntu云服务器部署Spring + Vue + MySql

背景介绍

部署过程

云服务器配置

部署后端服务

安装mysql

构建后端项目

Flyway 核心机制​​

Spring Boot 集成 Flyway​

后台运行服务

部署前端项目

安装nginx

构建打包前端项目

配置nginx服务

效果展示

网站公告

今日签到

热门文章

最新发布

Flyway 核心机制

Spring Boot 集成 Flyway