使用 Docker Compose 部署前后端应用

在现代软件开发中，Docker 和 Docker Compose 已成为部署应用程序的利器。尤其是在前后端分离的架构中，使用 Docker Compose 可以有效地管理多个服务。本文将介绍如何通过 Docker Compose 部署一个简单的前后端应用，并使用图示说明相关结构。

什么是 Docker Compose？

Docker Compose 是 Docker 的一个工具，能够定义和运行多个 Docker 容器的应用。通过一个配置文件（通常是 docker-compose.yml），开发者可以轻松管理应用的构建、连接和服务。

项目结构

我们将创建一个简单的 Node.js 后端和一个基于 React 的前端应用。项目结构如下：

my-app/
├── backend/
│   ├── app.js
│   └── Dockerfile
├── frontend/
│   ├── index.js
│   └── Dockerfile
└── docker-compose.yml

后端代码

首先，创建一个简单的 Node.js 后端，假设我们需要提供一个 API。

backend/app.js:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.get('/api/message', (req, res) => {
    res.json({ message: 'Hello from backend!' });
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

backend/Dockerfile:

# 使用官方 Node.js 镜像
FROM node:14

# 设置工作目录
WORKDIR /app

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

# 安装依赖
RUN npm install

# 复制应用代码
COPY . .

# 暴露端口
EXPOSE 5000

# 启动应用
CMD ["node", "app.js"]

前端代码

接下来，创建 React 前端以调用后端 API。

frontend/index.js:

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        fetch('/api/message')
            .then(response => response.json())
            .then(data => setMessage(data.message));
    }, []);

    return (
        <div>
            {message}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

frontend/Dockerfile:

# 使用官方 Node.js 镜像
FROM node:14

# 设置工作目录
WORKDIR /app

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

# 安装依赖
RUN npm install

# 复制应用代码
COPY . .

# 构建应用
RUN npm run build

# 使用静态文件服务器
FROM serve:latest
COPY --from=0 /app/build /srv/serve
EXPOSE 3000
CMD ["serve", "-s", "/srv/serve"]

Docker Compose 配置

最后，我们需要创建一个 docker-compose.yml 文件以连接前后端服务。

docker-compose.yml:

version: '3.8'

services:
  backend:
    build:
      context: ./backend
    ports:
      - "5000:5000"

  frontend:
    build:
      context: ./frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

启动应用

使用以下命令启动应用：

docker-compose up --build

访问 http://localhost:3000 可以看到前端页面，并通过该页面可以调用后端提供的 API。

可视化结构

在理解了代码之后，我们来看看系统的服务结构以及类图。

服务架构图

pie
    title 服务架构
    "Frontend": 50
    "Backend": 50

类图

classDiagram
    class App {
        +String message
        +void fetchMessage()
    }

    class Express {
        +void get(String path, Function callback)
    }

    App --> Express : uses

结论

本文介绍了如何使用 Docker Compose 部署一个简单的前后端分离应用。通过 Docker 和 Docker Compose，开发者可以轻松地管理和部署多服务应用，提高开发效率。在未来的项目中，考虑使用 Docker 可以大大简化环境配置和应用部署的复杂性。希望这篇文章能够帮助到你，开启你的 Docker 之旅！