Spring Boot前后端分离项目使用Docker-compose部署在Ubuntu

幻想之翼 2024-03-06 ⋅ 6 阅读

介绍

在开发Web应用程序时,我们通常选择Spring Boot作为后端框架,并使用一些现代化的前端框架(如Vue.js、React等)来构建用户界面。为了方便部署和管理,我们可以使用Docker和Docker-compose来打包和部署我们的应用程序。

在本文中,我们将介绍如何使用Docker-compose在Ubuntu上部署一个Spring Boot前后端分离的项目,并为标题添加一些美化效果。

准备工作

在开始之前,我们需要确保已经安装了以下工具和环境:

  • Ubuntu操作系统
  • Docker
  • Docker-compose

我们假设您已经对Ubuntu操作系统和Docker有一定的了解。如果您还不熟悉这些工具,请先阅读相关文档。

步骤

步骤1:创建项目

首先,我们需要创建一个Spring Boot项目和一个前端项目。你可以使用你喜欢的任何编辑器或IDE来创建这些项目。

步骤2:编写Dockerfile文件

针对Spring Boot项目,我们需要编写一个Dockerfile文件来定义容器镜像的构建过程。以下是一个示例的Dockerfile文件:

# 使用官方的maven镜像作为基础镜像
FROM maven:3.6.3-openjdk-11-slim AS build

# 将项目文件复制到容器中
COPY . /app

# 设置工作目录
WORKDIR /app

# 运行maven构建
RUN mvn clean package -DskipTests

# 使用OpenJDK镜像作为基础镜像
FROM openjdk:11-jre-slim

# 设置工作目录
WORKDIR /app

# 复制构建好的jar包到容器中
COPY --from=build /app/target/*.jar app.jar

# 使用8080端口
EXPOSE 8080

# 设置启动命令
ENTRYPOINT ["java","-jar","app.jar"]

同样地,对于前端项目,我们也需要编写一个Dockerfile文件。例如,如果你的前端项目是用Vue.js构建的,可以使用以下示例Dockerfile文件:

# 使用官方的node镜像作为基础镜像
FROM node:14.16.1 AS build

# 将项目文件复制到容器中
COPY . /app

# 设置工作目录
WORKDIR /app

# 安装依赖并构建前端项目
RUN npm install
RUN npm run build

# 使用nginx镜像作为基础镜像
FROM nginx:1.21.3

# 复制构建好的前端文件到nginx的Web目录
COPY --from=build /app/dist /usr/share/nginx/html

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

步骤3:编写docker-compose.yml文件

接下来,我们需要编写一个docker-compose.yml文件来定义如何部署我们的项目。以下是一个示例的docker-compose.yml文件:

version: '2'
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    depends_on:
      - database
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - 80:80
    depends_on:
      - backend
  database:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: my-secret-pw
      MYSQL_DATABASE: my-database

在这个示例中,我们定义了三个服务:backend、frontend和database。backend服务使用之前编写的Spring Boot项目的Dockerfile来构建容器镜像,并将主机的8080端口映射到容器的8080端口。frontend服务使用之前编写的前端项目的Dockerfile来构建容器镜像,并将主机的80端口映射到容器的80端口。database服务使用MySQL 8.0的官方镜像。

步骤4:部署项目

现在,我们可以使用以下命令来部署我们的项目:

$ docker-compose up -d

这将会启动所有的服务,并将它们作为后台进程运行。你可以通过访问http://localhost来访问前端应用程序,访问http:localhost:8080来访问后端应用程序。

步骤5:添加标题美化效果

为了为标题添加一些美化效果,我们可以使用一些HTML和CSS代码。以下是一个示例的HTML和CSS代码:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome App</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }
    h1 {
      text-align: center;
      color: #333;
      padding: 20px;
      background-color: #f8f8f8;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>Welcome to my awesome app!</h1>
</body>
</html>

你可以将上面的代码添加到你的前端项目的index.html文件中,然后重新构建和部署项目。

结论

通过使用Docker和Docker-compose,我们可以方便地部署和管理Spring Boot前后端分离的项目。在本文中,我们介绍了如何使用Docker-compose在Ubuntu上部署这样的项目,并为标题添加了一些美化效果。希望本文对你有所帮助!


全部评论: 0

    我有话说: