SD06_前后端分离项目部署流程(采用Nginx)

本文档详细描述了如何在Ubuntu 20.04服务器上从零开始部署Tlias前后端分离系统。Tlias系统由Spring Boot后端（tlias-web-management）和Vue前端（vue-tlias-management）组成。

目录

• 环境准备
• 安装MySQL数据库
• 部署后端项目
• 部署前端项目
• 配置Nginx
• 系统访问
• 常见问题

环境准备

首先，我们需要在Ubuntu 20.04服务器上安装必要的环境和工具。

更新系统

# 更新软件包列表
sudo apt update# 升级已安装的软件包
sudo apt upgrade -y

安装基础工具

# 安装常用工具
sudo apt install -y curl wget vim git unzip net-tools

安装MySQL数据库

Tlias系统使用MySQL作为数据库，需要安装MySQL 8.0以上版本。

# 安装MySQL 8.0
sudo apt install -y mysql-server# 启动MySQL服务
sudo systemctl start mysql# 设置MySQL开机自启
sudo systemctl enable mysql# 检查MySQL状态
sudo systemctl status mysql

配置MySQL

# 登录MySQL（Ubuntu 20.04默认不需要密码）
sudo mysql# 在MySQL命令行中执行以下命令：
# 1. 设置root用户密码（替换'your_password'为你想设置的密码）
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';# 2. 刷新权限
FLUSH PRIVILEGES;# 3. 创建tlias数据库
CREATE DATABASE tlias DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
# 3.5. 导入数据库
mysql -u root-p tlias < 路径/tlias.sql# 4. 退出MySQL
EXIT;

安装Java 17

后端项目使用Java 17运行，需要安装Java 17环境。

# 安装Java 17
sudo apt install -y openjdk-17-jdk# 验证Java版本
java -version

部署后端项目

安装Maven

Maven用于构建后端项目。

# 安装Maven
sudo apt install -y maven# 验证Maven版本
mvn -version

上传并打包后端项目

假设后端项目源码已经上传到服务器的/home/ubuntu/tlias-web-management目录下。

# 进入后端项目目录
cd /home/ubuntu/tlias-web-management# 使用Maven打包项目（跳过测试）
mvn clean package -DskipTests

配置后端项目

在部署前，需要修改配置文件以适应服务器环境。

# 创建配置目录
mkdir -p /opt/tlias/config# 编辑配置文件
sudo vim /opt/tlias/config/application.yml

配置文件内容如下：

spring:application:name: tlias-web-management#配置数据库的连接信息datasource:url: jdbc:mysql://localhost:3306/tliasdriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: 123456servlet:multipart:#最大单个文件大小max-file-size: 10MB#最大请求大小(包括所有文件和表单数据)max-request-size: 100MB#Mybatis的相关配置
mybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl#开启驼峰命名映射开关map-underscore-to-camel-case: true#配置事务管理日志级别
logging:level:org.springframework.jdbc.support.JdbcTransactionManager: debugserver:port: 8080#阿里云OSS（如果使用，需要替换为实际的配置）
aliyun:oss:endpoint: https://oss-cn-beijing.aliyuncs.combucketName: your-bucket-nameregion: cn-beijing

运行后端项目

接下来，使用systemd管理后端服务，实现开机自启和状态监控。

# 复制打包好的jar文件到指定目录
sudo mkdir -p /opt/tlias/app
sudo cp target/tlias-web-management-0.0.1-SNAPSHOT.jar /opt/tlias/app/tlias-web-management.jar# 创建systemd服务配置文件
sudo vim /etc/systemd/system/tlias-backend.service

服务配置文件内容：

[Unit]
Description=Tlias Backend Service
After=network.target mysql.service[Service]
Type=simple
User=root
ExecStart=/usr/bin/java -jar /opt/tlias/app/tlias-web-management.jar --spring.config.location=/opt/tlias/config/application.yml
Restart=always
RestartSec=10[Install]
WantedBy=multi-user.target

启动服务：

# 重新加载systemd配置
sudo systemctl daemon-reload# 启动服务
sudo systemctl start tlias-backend# 设置开机自启
sudo systemctl enable tlias-backend# 查看服务状态
sudo systemctl status tlias-backend# 查看服务日志
sudo journalctl -u tlias-backend -f

部署前端项目

安装Node.js和npm

前端项目基于Vue.js开发，需要Node.js环境。

# 安装Node.js和npm
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs# 验证Node.js和npm版本
node -v
npm -v

安装Nginx

Nginx用于部署静态前端文件并提供Web服务。

# 安装Nginx
sudo apt install -y nginx# 启动Nginx
sudo systemctl start nginx# 设置开机自启
sudo systemctl enable nginx# 检查Nginx状态
sudo systemctl status nginx

构建前端项目

假设前端项目源码已经上传到服务器的/home/ubuntu/vue-tlias-management目录下。

# 进入前端项目目录
cd /home/ubuntu/vue-tlias-management# 安装依赖
npm install# 修改API基础路径配置文件（根据实际情况调整）
vim src/api/request.js  # 确保API路径指向后端服务地址# 构建生产环境代码
npm run build

配置Nginx

部署前端静态文件

# 创建前端部署目录
sudo mkdir -p /var/www/tlias# 复制构建好的前端文件到Nginx目录
sudo cp -r dist/* /var/www/tlias/

配置Nginx虚拟主机

# 创建Nginx配置文件
sudo vim /etc/nginx/sites-available/tlias

配置文件内容：

server {listen 80;server_name _;  # 可以替换为你的域名root /var/www/tlias;index index.html;# 前端静态文件location / {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;}
}

启用配置：

# 创建符号链接启用配置
sudo ln -s /etc/nginx/sites-available/tlias /etc/nginx/sites-enabled/# 测试Nginx配置
sudo nginx -t# 重新加载Nginx配置
sudo systemctl reload nginx

系统访问

完成上述步骤后，可以通过服务器IP或域名访问系统：

http://服务器IP

如果配置了域名并解析到服务器IP，则可以通过域名访问：

http://你的域名

常见问题

如果你是第一次NGINX，建议删掉NGINX可能导致冲突的默认配置：

sudo rm /etc/nginx/sites-enabled/default

1. 后端服务无法启动

检查以下几点：

• Java版本是否正确（需要Java 17）
• MySQL服务是否正常运行
• 配置文件中的数据库连接信息是否正确
• 查看日志定位具体错误：sudo journalctl -u tlias-backend -f

2. 前端访问报错

检查以下几点：

• Nginx配置是否正确
• 前端API基础路径配置是否与Nginx代理匹配
• 浏览器控制台是否有报错信息
• Nginx错误日志：sudo tail -f /var/log/nginx/error.log

3. 数据库连接失败

检查以下几点：

• MySQL服务状态：sudo systemctl status mysql
• 数据库用户名密码是否正确
• MySQL是否允许本地连接：sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

4. 文件上传失败

如果系统使用阿里云OSS存储文件，需要确保：

• 阿里云OSS配置正确
• 网络连接通畅
• 权限配置无误

安全加固建议

部署完成后，建议进行以下安全加固：

1. 配置防火墙，只开放必要端口（如80、443）
2. 使用HTTPS加密通信（配置SSL证书）
3. 定期更新系统和应用软件
4. 配置数据库备份策略