当前位置：首页 > news >正文

从零到一：Vue3 + Spring Boot + MySQL 全栈项目部署到阿里云服务器完整教程

news 2025/9/22 9:12:17

博客结构：

1. 项目介绍

# 项目概述
- 技术栈：Vue3 + Spring Boot + MyBatis + MySQL
- 功能：餐饮记账系统
- 部署：阿里云轻量应用服务器
- 特点：响应式设计，支持移动端访问

2. 技术架构

## 技术架构
- 前端：Vue3 + TypeScript + Vant UI + Vite
- 后端：Spring Boot + MyBatis Plus + JWT
- 数据库：MariaDB (MySQL兼容)
- 部署：Nginx + 阿里云ECS

3. 完整部署步骤

3.1 服务器环境准备

## 一、服务器环境准备### 1.1 连接服务器
```bash
# 在本地电脑执行
ssh admin@你的服务器IP
# 输入服务器密码
```### 1.2 安装基础环境
```bash
# 更新系统
sudo dnf update -y# 安装Java
sudo dnf install -y java-11-openjdk java-11-openjdk-devel# 安装Maven
sudo dnf install -y maven# 安装MariaDB
sudo dnf install -y mariadb-server mariadb# 安装Git
sudo dnf install -y git# 安装Node.js和npm
sudo dnf install -y nodejs npm# 安装Nginx
sudo dnf install -y nginx
```### 1.3 启动基础服务
```bash
# 启动MariaDB
sudo systemctl start mariadb
sudo systemctl enable mariadb# 启动Nginx
sudo systemctl start nginx
sudo systemctl enable nginx# 检查服务状态
sudo systemctl status mariadb
sudo systemctl status nginx

3.2 数据库配置

## 二、数据库配置### 2.1 安全配置MariaDB
```bash
# 运行安全配置脚本
sudo mysql_secure_installation# 按提示操作：
# - 设置root密码
# - 删除匿名用户
# - 禁止root远程登录
# - 删除测试数据库
# - 重新加载权限表
```### 2.2 创建数据库和表
```bash
# 连接MariaDB
mysql -u root -p# 创建数据库
CREATE DATABASE IF NOT EXISTS meal_accounting DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;# 使用数据库
USE meal_accounting;# 创建表结构
CREATE TABLE meal_records (id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '记录ID',record_date DATE NOT NULL COMMENT '记录日期',breakfast DECIMAL(10,2) DEFAULT 0.00 COMMENT '早饭金额',lunch DECIMAL(10,2) DEFAULT 0.00 COMMENT '午饭金额',dinner DECIMAL(10,2) DEFAULT 0.00 COMMENT '晚饭金额',snack DECIMAL(10,2) DEFAULT 0.00 COMMENT '零食金额',drink DECIMAL(10,2) DEFAULT 0.00 COMMENT '饮料金额',other DECIMAL(10,2) DEFAULT 0.00 COMMENT '其他金额',total DECIMAL(10,2) DEFAULT 0.00 COMMENT '总金额',create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',UNIQUE KEY uk_record_date (record_date),INDEX idx_record_date (record_date)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='餐饮记录表';# 退出
EXIT;
```### 2.3 配置远程访问
```bash
# 重新连接MariaDB
mysql -u root -p# 创建远程用户（替换为你的IP）
CREATE USER 'root'@'你的IP' IDENTIFIED BY '你的密码';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'你的IP' WITH GRANT OPTION;
FLUSH PRIVILEGES;# 退出
EXIT;
```

3.3 后端部署

## 三、后端部署### 3.1 配置SSH密钥
```bash
# 生成SSH密钥
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"# 查看公钥
cat ~/.ssh/id_rsa.pub# 将公钥添加到GitHub
# 1. 复制公钥内容
# 2. 登录GitHub
# 3. Settings → SSH and GPG keys → New SSH key
# 4. 粘贴公钥并保存
```### 3.2 克隆后端代码
```bash
# 克隆代码
git clone git@github.com:你的用户名/meal-accounting-backend.git
cd meal-accounting-backend# 检查代码
ls -la
```### 3.3 配置后端应用
```bash
# 编辑配置文件
vim src/main/resources/application.yml# 配置内容：
spring:datasource:url: jdbc:mysql://localhost:3306/meal_accounting?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghaiusername: rootpassword: 你的密码driver-class-name: com.mysql.cj.jdbc.Driverjpa:hibernate:ddl-auto: noneshow-sql: trueproperties:hibernate:dialect: org.hibernate.dialect.MySQL8Dialectserver:port: 8080logging:level:com.accounting: debug
```### 3.4 构建和运行后端
```bash
# 构建项目
mvn clean package -DskipTests# 检查构建结果
ls -la target/# 运行后端应用
nohup java -jar target/meal-accounting-backend-0.0.1-SNAPSHOT.jar > app.log 2>&1 &# 检查运行状态
ps aux | grep java# 查看日志
tail -f app.log
```

3.4 前端部署

## 四、前端部署### 4.1 克隆前端代码
```bash
# 克隆代码
git clone git@github.com:你的用户名/meal-accounting.git
cd meal-accounting# 检查代码
ls -la
```### 4.2 安装依赖和构建
```bash
# 安装依赖
npm install# 构建项目
npm run build# 检查构建结果
ls -la dist/
```### 4.3 部署到Nginx目录
```bash
# 创建网站目录
sudo mkdir -p /var/www/meal-accounting# 复制构建文件
sudo cp -r dist/* /var/www/meal-accounting/# 设置权限
sudo chown -R nginx:nginx /var/www/meal-accounting
sudo chmod -R 755 /var/www/meal-accounting# 检查文件
ls -la /var/www/meal-accounting/
```

3.5 Nginx配置

## 五、Nginx配置### 5.1 备份原配置
```bash
# 备份原配置文件
sudo cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup
```### 5.2 配置Nginx
```bash
# 编辑配置文件
sudo vim /etc/nginx/conf.d/default.conf# 删除所有内容，添加以下配置：
server {listen       80;server_name  localhost;# 前端静态文件location / {root   /var/www/meal-accounting;index  index.html index.htm;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;}# 错误页面error_page   500 502 503 504  /50x.html;location = /50x.html {root   /var/www/meal-accounting;}
}
```### 5.3 测试和重启Nginx
```bash
# 测试配置文件语法
sudo nginx -t# 如果测试通过，重启Nginx
sudo systemctl restart nginx# 检查Nginx状态
sudo systemctl status nginx# 查看Nginx进程
ps aux | grep nginx
```

3.6 安全配置

## 六、安全配置### 6.1 配置防火墙
```bash
# 查看防火墙状态
sudo systemctl status firewalld# 开放必要端口
sudo firewall-cmd --permanent --add-port=80/tcp
sudo firewall-cmd --permanent --add-port=8080/tcp
sudo firewall-cmd --permanent --add-port=3306/tcp# 重新加载防火墙
sudo firewall-cmd --reload# 查看开放的端口
sudo firewall-cmd --list-ports
```### 6.2 配置阿里云安全组

在阿里云控制台配置：

登录阿里云控制台

进入轻量应用服务器管理

点击服务器实例

进入"防火墙"标签页

添加规则：

端口：80，协议：TCP，授权对象：0.0.0.0/0

端口：3306，协议：TCP，授权对象：你的IP/32


### 6.3 配置数据库安全
```bash
# 连接MariaDB
mysql -u root -p# 创建专用数据库用户
CREATE USER 'meal_user'@'localhost' IDENTIFIED BY '强密码';
GRANT ALL PRIVILEGES ON meal_accounting.* TO 'meal_user'@'localhost';
FLUSH PRIVILEGES;# 退出
EXIT;
```

3.7 测试验证

## 七、测试验证### 7.1 测试后端API
```bash
# 测试API接口
curl -X POST http://localhost:8080/api/meal/save \-H "Content-Type: application/json" \-d '{"date": "2025-09-20","breakfast": 10,"lunch": 20,"dinner": 30,"snack": 0,"drink": 0,"other": 0}'# 测试获取数据
curl http://localhost:8080/api/meal/get/2025-09-20
```### 7.2 测试前端访问
```bash
# 测试静态文件
curl http://localhost/# 测试API代理
curl http://localhost/api/meal/get/2025-09-20
```### 7.3 测试数据库连接
```bash
# 使用DataGrip连接测试
Host: 你的服务器IP
Port: 3306
Database: meal_accounting
User: root
Password: 你的密码
```### 7.4 移动端测试

在手机浏览器访问：

http://你的服务器IP

测试功能：