使用Docker在Ubuntu中部署SpringBoot与Vue应用

🛠️ 准备工作 🛠️

系统要求

• 操作系统：Ubuntu 22.04
• 硬件：至少2GB RAM，2核CPU
• 网络：稳定的互联网连接

安装Docker

1. 更新系统包列表： sudo apt update
2. 安装Docker： sudo apt install -y docker.io
3. 启动并启用Docker服务： sudo systemctl start docker sudo systemctl enable docker

安装Docker Compose

1. 下载并安装Docker Compose： sudo curl -L "https://github.com/docker/compose/releases/download/$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep -Po '"tag_name": "\K.*\d')" /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose
2. 验证安装： docker-compose --version

📂 准备项目文件 📂

1. 创建项目目录

mkdir springboot-vue-docker
cd springboot-vue-docker

2. 创建Dockerfile

SpringBoot后端Dockerfile

在项目根目录下创建 backend 文件夹，并在其中创建 Dockerfile：

mkdir backend
cd backend
touch Dockerfile

编辑 Dockerfile：

# 使用官方的Java运行时镜像
FROM openjdk:11-jre-slim

# 设置工作目录
WORKDIR /app

# 将构建好的SpringBoot jar文件复制到容器中
COPY target/*.jar app.jar

# 暴露端口
EXPOSE 8080

# 运行应用
ENTRYPOINT ["java", "-jar", "app.jar"]

Vue前端Dockerfile

在项目根目录下创建 frontend 文件夹，并在其中创建 Dockerfile：

mkdir frontend
cd frontend
touch Dockerfile

编辑 Dockerfile：

# 使用官方的Node.js运行时镜像
FROM node:14-alpine AS build

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制源代码
COPY . .

# 构建Vue应用
RUN npm run build

# 使用Nginx镜像
FROM nginx:alpine

# 复制构建好的Vue应用到Nginx的默认目录
COPY --from=build /app/dist /usr/share/nginx/html

# 暴露端口
EXPOSE 80

# 运行Nginx
CMD ["nginx", "-g", "daemon off;"]

3. 创建Docker Compose文件

在项目根目录下创建 docker-compose.yml 文件：

version: '3.8'

services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

🚀 部署应用 🚀

1. 构建SpringBoot后端

1. 导航到 backend 目录： cd backend
2. 构建SpringBoot应用： mvn clean package -DskipTests
3. 返回项目根目录： cd ..

2. 构建Vue前端

1. 导航到 frontend 目录： cd frontend
2. 安装依赖并构建Vue应用： npm install npm run build
3. 返回项目根目录： cd ..

3. 使用Docker Compose启动应用

1. 在项目根目录下运行： sudo docker-compose up -d
2. 验证服务是否正常运行： sudo docker-compose ps

🌐 访问应用 🌐

• SpringBoot后端：访问 http://localhost:8080，你应该能够看到后端API的响应。
• Vue前端：访问 http://localhost，你应该能够看到Vue应用的界面。

❗ 常见问题与解决方案 ❗

问题1：Docker无法启动

• 解决方案：
• 确保Docker服务已经启动并正在运行：
  bash sudo systemctl status docker
• 如果服务未运行，启动并启用Docker：
  bash sudo systemctl start docker sudo systemctl enable docker

问题2：Docker Compose命令未找到

• 解决方案：
• 确认Docker Compose已经正确安装：
  bash docker-compose --version
• 如果未找到，重新安装Docker Compose：
  bash sudo curl -L "https://github.com/docker/compose/releases/download/$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep -Po '"tag_name": "\K.*\d')" /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose

问题3：应用无法访问

• 解决方案：
• 确认容器已经成功启动：
  bash sudo docker-compose ps
• 检查Docker日志，查找可能的错误信息：
  bash sudo docker-compose logs
• 确保防火墙允许80和8080端口的访问：
  bash sudo ufw allow 80/tcp sudo ufw allow 8080/tcp

🔗 结语 🔗

通过上述步骤，你应该能够在Ubuntu 22.04上成功使用Docker部署SpringBoot后端和Vue前端应用。希望本文能帮助你快速搭建一套完整的开发环境，提高开发效率。

如果你有任何疑问或遇到问题，欢迎留言交流。🌟 开发顺利，编码愉快！🌟