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

news2025/5/12 19:42:46

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

环境准备

首先，我们需要在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/tlias
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456
  servlet:
    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: debug

server:
  port: 8080

#阿里云OSS（如果使用，需要替换为实际的配置）
aliyun:
  oss:
    endpoint: https://oss-cn-beijing.aliyuncs.com
    bucketName: your-bucket-name
    region: 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