前言：Java课设做了一个前后端分离得图书管理系统，暑假没事看到腾讯云服务器可以免费试用，就试着将其部署在服务器上。
一、前期准备
1. 申请一个服务器
以腾讯云服务器为例
访问：轻量应用服务器Lighthouse_香港轻量服务器_海外轻量服务器-腾讯云 申请一个服务器，新用户可以免费使用一个月。
在申请时会让你选择服务器系统，这里我使用的是Ubuntu22.04-Docker26-1NZ1 它自带腾讯的docker镜像
申请成功后可以在站内信 - 控制台 内看到创建成功的消息，里面有远程连接的用户名和密码
然后前往服务器 - 轻量云 - 控制台启动服务器
登录服务器，可以直接点击上图中的登录 或者使用远程连接工具，我使用的是Xshell ,打开Xhell后点击新建会话 ，填写下面内容连接即可
成功连接
2.后端配置
修改application.properties文件中的数据库配置
"填入你的服务器ip" 下面的 library 是数据库名称
使用Maven打成jar包，点击最左侧的M选择package
等待一会就会新出现一个名为target的文件夹，里面的后缀为jar的文件就是我们需要的
3.前端配置
若未初始化，先使用pnpn i初始化前端代码
修改.env .env.development .env.production 使用相对路径，避免跨域请求失败
修改完毕之后运行pnpm build 打包文件，完成后会看到目录内出现了一个dist的文件夹
二、docker配置
1.安装Docker和Docker Compose
我选择的这个系统已经提前下载好了Docker和Docker Compose，故这一步可以跳过。
检测是否已安装
docker --version
docker-compose --version
若返回对应的版本号，说明安装完成
如未提前安装，请自行搜索 Ubuntu 安装 Docker、Docker Compose 记得还要配置镜像，否则由于网络原因镜可能无法下载
2.设置文件目录
新建一个文件夹存放我们之前打包好的前后端文件，这个文件夹配置好之后要传到服务器上
文件夹结构
# []包裹的文件需要我们手动创建
# dist 和 library-0.0.1-SNAPSHOT.jar是我们打包生成的文件
# package.json 和 pnpm-lock.yaml 在前端代码根目录里，复制过来
book-management/
├── [docker-compose.yml] # Docker Compose 编排文件
├── frontend/ # 前端项目
│ ├── [Dockerfile] # 前端 Docker 构建文件
│ ├── [nginx.conf] # Nginx 配置
│ ├── package.json # 前端依赖配置
│ ├── pnpm-lock.yaml # 依赖锁定文件
│ └── dist/ # 构建输出的静态资源
└── backend/ # 后端项目├── [Dockerfile] # 后端 Docker 构建文件└── library-0.0.1-SNAPSHOT.jar # 后端可执行 Jar 包
3.docker代码编写
1.后端
Dockerfile
FROM eclipse-temurin:17-jre-alpine# 安装 curl 用于健康检查
RUN apk add --no-cache curlWORKDIR /app# 复制jar包
COPY library-0.0.1-SNAPSHOT.jar app.jar# 暴露端口
EXPOSE 8080# 启动应用
ENTRYPOINT ["java", "-jar", "app.jar"]2.前端
Dockerfile
# 直接使用 nginx 提供静态文件服务
FROM nginx:alpine# 复制已构建好的静态文件
COPY dist/ /usr/share/nginx/html/ # 复制nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80CMD ["nginx", "-g", "daemon off;"]
nginx
server {listen 80;server_name localhost;root /usr/share/nginx/html;index index.html;# 前端路由location / {try_files $uri $uri/ /index.html;}# API代理 - 增强CORS支持location /api/ {proxy_pass http://backend:8080/api/;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;proxy_set_header Content-Type application/json;# CORS设置add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";# 处理预检请求if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization";add_header Access-Control-Max-Age 1728000;add_header Content-Type 'text/plain; charset=utf-8';add_header Content-Length 0;return 204;}}# 静态资源缓存location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {expires 1y;add_header Cache-Control "public, immutable";}
}根目录
docker-compose.yml
services:database:image: mysql:8.0container_name: book-databaseenvironment:- MYSQL_ROOT_PASSWORD=0128- MYSQL_DATABASE=library- MYSQL_USER=book_app_user- MYSQL_PASSWORD=SecurePassword123!volumes:- db_data:/var/lib/mysqlrestart: unless-stoppednetworks:- book-networkports:- "3306:3306" # 添加端口映射healthcheck:test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]timeout: 20sretries: 10frontend:build: ./frontendcontainer_name: book-frontendports:- "80:80"restart: unless-stoppednetworks:- book-networkdepends_on:- backendbackend:build: ./backendcontainer_name: book-backendenvironment:- SPRING_PROFILES_ACTIVE=prod- SPRING_DATASOURCE_URL=jdbc:mysql://database:3306/library- SPRING_DATASOURCE_USERNAME=book_app_user- SPRING_DATASOURCE_PASSWORD=SecurePassword123!restart: unless-stoppednetworks:- book-networkdepends_on:database:condition: service_healthyvolumes:db_data:networks:book-network:driver: bridge
三、服务器配置
1.文件上传服务器
将上一步配置好的文件夹压缩为zip文件，打开Xshell，点击Xftp
新建文件夹，然后将zip文件拖入对应文件夹
在服务上安装解压缩程序
sudo apt update
sudo apt install unzip -y
解压 zip 文件
unzip file.zip
2.docker部署
解压后进入项目文件夹，执行docker命令
docker-compose up -d
等待文件下载完毕，若无报错，查看服务状态
# 查看服务状态
docker-compose ps
若也正常，打卡浏览器，输入你的服务器IP看是否正常加载
3.导入sql数据
打开数据库操作工具，这里使用的是idea自带的数据库工具
打开sql文件，选择刚才连接的数据源，然后执行SQL代码，即可载入数据
四、结束
演示视频：图书管理系统演示视频_哔哩哔哩_bilibili
参考文档：
超详细Docker部署SpringBoot+Vue项目（三更博客项目部署）_三更博客部署-CSDN博客
如何从零将vue+springboot项目打包部署到云服务器（亲测，图文教程超详细！！）_spring boot vue 部署 图解-CSDN博客