spring boot + vue +MySQL 项目的服务器部署
前言: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 curl
WORKDIR /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 80
CMD ["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.0
container_name: book-database
environment:
- MYSQL_ROOT_PASSWORD=0128
- MYSQL_DATABASE=library
- MYSQL_USER=book_app_user
- MYSQL_PASSWORD=SecurePassword123!
volumes:
- db_data:/var/lib/mysql
restart: unless-stopped
networks:
- book-network
ports:
- "3306:3306" # 添加端口映射
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
timeout: 20s
retries: 10
frontend:
build: ./frontend
container_name: book-frontend
ports:
- "80:80"
restart: unless-stopped
networks:
- book-network
depends_on:
- backend
backend:
build: ./backend
container_name: book-backend
environment:
- SPRING_PROFILES_ACTIVE=prod
- SPRING_DATASOURCE_URL=jdbc:mysql://database:3306/library
- SPRING_DATASOURCE_USERNAME=book_app_user
- SPRING_DATASOURCE_PASSWORD=SecurePassword123!
restart: unless-stopped
networks:
- book-network
depends_on:
database:
condition: service_healthy
volumes:
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代码,即可载入数据
四、结束
参考文档:
超详细Docker部署SpringBoot+Vue项目(三更博客项目部署)_三更博客部署-CSDN博客
如何从零将vue+springboot项目打包部署到云服务器(亲测,图文教程超详细!!)_spring boot vue 部署 图解-CSDN博客