将前端请求映射到后端通过 Docker 部署的服务

原创

mob649e8167c4a3 2024-09-21 04:04:35 ©著作权

文章标签 后端服务 Docker Dockerfile 文章分类 Docker 云计算

©著作权归作者所有：来自51CTO博客作者mob649e8167c4a3的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何将前端请求映射到后端通过 Docker 部署的服务

在现代 web 开发中，前后端分离的架构已经成为一种流行的设计模式。为了实现前端与后端之间的通讯，一般会使用 HTTP 请求。接下来，我将带你了解如何通过 Docker 部署后端服务，并将前端请求映射到这个服务的步骤。我们将一起走完这个过程。

流程概览

步骤	描述
1	创建后端服务（使用 Node.js 和 Express 示例）
2	编写 Dockerfile 打包后端服务
3	创建 Docker Compose 文件以启动服务
4	编写前端代码以发送请求
5	测试前后端通讯

甘特图

gantt
    title 前后端请求映射甘特图
    dateFormat  YYYY-MM-DD
    section 后端服务部署
    创建后端服务         :a1, 2023-05-01, 7d
    编写 Dockerfile      :after a1  , 3d
    创建 Docker Compose   :after a1  , 2d
    section 前端请求
    编写前端代码         :a2, after a1  , 5d
    测试前后端通讯       :after a2  , 2d

每一步的具体操作

1. 创建后端服务

首先，你需要创建一个简单的后端服务。我们将使用 Node.js 和 Express 框架。

mkdir my-backend
cd my-backend
npm init -y
npm install express

创建一个 server.js 文件：

// 引入 Express 框架
const express = require('express');
const app = express();
const PORT = 3000;

// 设置一个简单的 API 路由
app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from the backend!' });
});

// 启动服务
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

2. 编写 Dockerfile

在项目根目录下创建一个名为 Dockerfile 的文件：

# 基于官方 Node.js 镜像
FROM node:14

# 创建应用目录
WORKDIR /usr/src/app

# 安装应用依赖
COPY package*.json ./
RUN npm install

# 复制应用源代码
COPY . .

# 暴露服务端口
EXPOSE 3000

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

3. 创建 Docker Compose 文件

在项目根目录下创建一个名为 docker-compose.yml 的文件：

version: '3'
services:
  backend:
    build: .
    ports:
      - "3000:3000"

4. 编写前端代码

假设你的前端使用 React，可以在 src 文件夹中创建一个组件（例如 App.js）：

import React, { useEffect, useState } from 'react';

function App() {
    const [data, setData] = useState(null);

    // 使用 useEffect 获取后端数据
    useEffect(() => {
        fetch('http://localhost:3000/api/data')
            .then((response) => response.json())
            .then((data) => setData(data.message));
    }, []);

    return (
        <div>
            {data ? data : 'Loading...'}
        </div>
    );
}

export default App;