Nginx + Docker Compose 前后端分离部署指南

一、概述

在现代应用开发中，前后端分离架构被广泛采用。这种架构将前端和后端服务解耦，有助于提升开发效率和系统的灵活性。Nginx 是一种高性能的 Web 服务器和反向代理服务器，而 Docker Compose 是一种用于定义和运行多容器 Docker 应用的工具。本文将详细介绍如何使用 Nginx 和 Docker Compose 实现前后端分离部署。

二、架构设计

前后端分离部署的基本架构包括以下几个组件：

1. 前端应用：通常为一个静态文件应用，如 React、Vue 或 Angular 应用。
2. 后端服务：处理业务逻辑和数据存储的服务，通常为 RESTful API 或 GraphQL API。
3. Nginx：作为反向代理服务器，负责将客户端请求转发到前端或后端服务。
4. Docker Compose：用于管理这些服务的容器化和配置，简化部署过程。

三、准备工作

在开始部署之前，请确保已安装以下软件：

1. Docker：容器化平台。
2. Docker Compose：用于定义和管理多容器 Docker 应用的工具。
3. Nginx：Web 服务器和反向代理服务器。

四、Docker Compose 配置

1. 创建项目目录

首先，创建一个项目目录并进入该目录：

mkdir my-app
cd my-app

2. 前端应用 Dockerfile

在 my-app 目录中创建一个子目录 frontend，并在其中创建一个 Dockerfile：

# frontend/Dockerfile
FROM node:16 AS build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80

这个 Dockerfile 文件首先使用 Node.js 镜像构建前端应用，然后将构建好的静态文件复制到 Nginx 镜像中。

3. 后端应用 Dockerfile

在 my-app 目录中创建一个子目录 backend，并在其中创建一个 Dockerfile：

# backend/Dockerfile
FROM openjdk:17-jdk-slim

WORKDIR /app
COPY target/my-backend.jar /app/my-backend.jar

EXPOSE 8080
CMD ["java", "-jar", "my-backend.jar"]

这个 Dockerfile 文件使用 OpenJDK 镜像运行 Java 后端服务，假设已经将后端服务打包为 my-backend.jar 文件。

4. Nginx 配置文件

在 my-app 目录中创建一个子目录 nginx，并在其中创建一个 nginx.conf 文件：

# nginx/nginx.conf
server {
    listen 80;

    location / {
        proxy_pass http://frontend:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api/ {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

这个配置文件将请求分发到不同的服务：前端请求通过 proxy_pass 转发到前端服务，而以 /api/ 为前缀的请求转发到后端服务。

5. Docker Compose 配置文件

在 my-app 目录中创建一个 docker-compose.yml 文件：

# docker-compose.yml
version: '3.8'

services:
  frontend:
    build:
      context: ./frontend
    container_name: frontend
    ports:
      - "80:80"

  backend:
    build:
      context: ./backend
    container_name: backend
    ports:
      - "8080:8080"

  nginx:
    image: nginx:alpine
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - frontend
      - backend

这个配置文件定义了三个服务：frontend、backend 和 nginx。前两个服务根据各自的 Dockerfile 构建，而 nginx 服务则使用官方 Nginx 镜像，并将本地的 nginx.conf 配置文件挂载到容器中。

五、启动和验证

1. 构建和启动服务

在 my-app 目录中运行以下命令构建并启动所有服务：

docker-compose up --build

这个命令将会构建前端和后端应用的 Docker 镜像，并启动所有定义的服务。

2. 验证部署

• 打开浏览器，访问 http://localhost，你应该能够看到前端应用的页面。
• 通过前端应用发起 API 请求，确保它们正确地转发到后端服务。

六、总结

通过上述步骤，我们成功实现了使用 Nginx 和 Docker Compose 部署一个前后端分离的应用。Nginx 作为反向代理服务器，将请求根据路径前缀转发到不同的服务，Docker Compose 简化了多容器应用的管理和部署过程。这种部署方式不仅提高了应用的灵活性，还简化了运维操作。

这种前后端分离的部署方式将应用的不同部分解耦，使得开发和维护变得更加高效，同时确保系统的灵活性和可扩展性。