前后端分离的部署方案

约 1721 字大约 6 分钟

2025-03-15

一、总结

总结

软件设计可以用的一些框架有很多，我们可以根据各种框架的能力来设计部署方案：

原生代码、页面类框架： 如 Vue、React、Angular 等，这一类框架主要负责页面开发、集成了很多的插件去辅助我们开发页面
Node.js： 既可以作为前端、也可以作为服务端。
- 作为客户端：可以托管前端静态页面、配置代理去转发请求
- 作为服务端：可以承载后端 API，通过配置 CORS 来解决跨域问题。
静态服务器、CDN： 只提供代码托管服务。
Docker、Nginx、Apache 等： 可以托管前端代码后端代码，并提供负载均衡，代理等服务
- 可以配置请求转发，在接口的响应里添加 CORS 配置来解决跨域问题
后端： 后端提供 API 服务、提供CORS报文封装
- Node.js、Java、C++等：作为后端提供 API 服务，可以配置 CORS 服务解决跨域。

需要我们根据实际情况去选择方案：

相同服务器和端口：前后端代码可以部署在同一服务器和容器，使用相同的端口。
不同服务器、端口：如果配置在不同的端口，前端需要使用 Node.js 的 proxy 相关插件来实现跨域，后端可以通过配置 CORS 报文，配置转发前端的请求来解决跨域。

二、方案示例

在前后端分离的架构下，前端部署方案有多种选择，每种方案都需要考虑跨域问题。以下是常见的部署方案及其跨域处理方式：

1. 静态资源托管 + 后端 API 独立部署

方案描述

前端静态资源（HTML、CSS、JS）托管在静态服务器（如 Nginx、CDN、对象存储等）。
后端 API 独立部署在另一台服务器或容器中。

跨域问题

前端页面与后端 API 的域名或端口不同，会触发跨域。

解决方案：

CORS（跨域资源共享）：

在后端 API 服务中设置响应头，允许前端域名访问。

// Node.js示例（Express）
const cors = require("cors");
app.use(
  cors({
    origin: "https://frontend-domain.com", // 允许的域名
    methods: ["GET", "POST", "PUT", "DELETE"], // 允许的HTTP方法
    credentials: true, // 允许携带Cookie
  })
);

反向代理：

通过 Nginx 等反向代理将前端和后端 API 统一到同一域名下。

server {
    listen 80;
    server_name your-domain.com;

    # 托管前端静态资源
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }

    # 代理API请求
    location /api {
        proxy_pass http://backend-server:3000;
        proxy_set_header Host $host;
    }
}

2. 前端与后端同服务器部署

方案描述

前端静态资源和后端 API 部署在同一台服务器上，通过 Node.js 或 Nginx 统一托管。
前端页面和后端 API 使用同一域名和端口。

跨域问题

同源（协议、域名、端口一致），无跨域问题。
解决方案：
- 无需额外处理跨域。

示例代码（Node.js 托管静态资源 + API）

const express = require("express");
const path = require("path");
const app = express();

// 托管前端静态资源
app.use(express.static(path.join(__dirname, "dist")));

// 定义API路由
app.get("/api/data", (req, res) => {
  res.json({ message: "Data from backend" });
});

// 支持Vue/React的History模式
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});

app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

3. 前端部署到 CDN + 后端 API 独立部署

方案描述

前端静态资源部署到 CDN（如阿里云 OSS、AWS S3 + CloudFront）。
后端 API 独立部署。

跨域问题

前端页面与后端 API 的域名不同，会触发跨域。
解决方案：
1. CORS：
  - 在后端 API 服务中配置 CORS，允许 CDN 域名访问。
2. 自定义域名：
  - 为 CDN 和后端 API 配置同一主域下的子域名（如 frontend.your-domain.com 和 api.your-domain.com），并通过 CORS 允许子域名访问。

4. 前端部署到对象存储 + 后端 API 独立部署

方案描述

前端静态资源上传到对象存储（如阿里云 OSS、AWS S3）。
后端 API 独立部署。

跨域问题

前端页面与后端 API 的域名不同，会触发跨域。
解决方案：
1. CORS：
  - 在后端 API 服务中配置 CORS，允许对象存储域名访问。
2. 对象存储跨域配置：
  - 在对象存储中配置跨域规则，允许前端域名访问静态资源。

5. 前端部署到 GitHub Pages/Vercel/Netlify + 后端 API 独立部署

方案描述

前端静态资源部署到 GitHub Pages、Vercel 或 Netlify 等托管平台。
后端 API 独立部署。

跨域问题

前端页面与后端 API 的域名不同，会触发跨域。
解决方案：
1. CORS：
  - 在后端 API 服务中配置 CORS，允许托管平台域名访问。
2. 反向代理：
  - 在托管平台中配置反向代理（如 Vercel 的vercel.json或 Netlify 的_redirects文件），将 API 请求代理到后端服务器。
```
// vercel.json示例
{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://backend-server.com/api/:path*"
    }
  ]
}
```

6. 前端与后端容器化部署

方案描述

前端和后端分别打包为 Docker 容器，通过 Kubernetes 或 Docker Compose 部署。
前端容器通过 Nginx 托管静态资源，后端容器提供 API 服务。

跨域问题

若前端和后端容器使用不同域名或端口，会触发跨域。
解决方案：
1. CORS：
  - 在后端 API 服务中配置 CORS。
2. 反向代理：
  - 在 Nginx 容器中配置反向代理，统一前端和后端的访问入口。

7. 前端与后端使用 GraphQL 或 BFF（Backend for Frontend）

方案描述

使用 GraphQL 或 BFF 层聚合后端 API，前端只与 BFF 层通信。
前端部署到静态服务器或 CDN，BFF 层与后端 API 独立部署。

跨域问题

前端与 BFF 层的域名不同，会触发跨域。
解决方案：
1. CORS：
  - 在 BFF 层配置 CORS，允许前端域名访问。
2. 反向代理：
  - 通过 Nginx 等反向代理统一前端和 BFF 层的访问入口。

总结

部署方案	跨域问题	解决方案
静态资源托管 + 后端 API 独立部署	是	CORS、反向代理
前端与后端同服务器部署	否	无需处理
前端部署到 CDN + 后端 API 独立部署	是	CORS、自定义域名
前端部署到对象存储 + 后端 API 独立部署	是	CORS、对象存储跨域配置
前端部署到 GitHub Pages/Vercel/Netlify + 后端 API 独立部署	是	CORS、反向代理
前端与后端容器化部署	是	CORS、反向代理
前端与后端使用 GraphQL 或 BFF	是	CORS、反向代理

推荐方案：

小型项目：前端与后端同服务器部署，简单高效。
中大型项目：静态资源托管 + 后端 API 独立部署，结合 CORS 或反向代理解决跨域问题。
云原生项目：容器化部署，结合 Nginx 反向代理统一入口。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24