介绍
在开发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上部署这样的项目，并为标题添加了一些美化效果。希望本文对你有所帮助！
注意：本文归作者所有，未经作者允许，不得转载
