单服务器环境下如何配置前后端共存？

在单服务器环境下配置前后端共存，是一种常见的部署方式。通常前端是静态资源（如 HTML、CSS、JS），后端提供 API 接口（如 Node.js、Python Flask/Django、Java Spring 等）。以下是几种常见且高效的配置方案：

✅ 方案一：使用 Nginx 反向X_X（推荐）

这是最主流、最灵活的方式。Nginx 作为反向X_X服务器，统一处理请求，根据路径将请求分发给前端或后端。

📁 目录结构示例：

/var/www/
├── frontend/          # 前端打包文件（如 dist）
│   ├── index.html
│   ├── static/
├── backend/           # 后端项目代码

🛠️ Nginx 配置（/etc/nginx/sites-available/default 或自定义站点）：

server {
    listen 80;
    server_name your-domain.com;  # 或服务器 IP

    # 前端静态资源
    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;  # 支持 SPA 路由（如 Vue/React）
    }

    # 后端 API 请求转发
    location /api/ {
        proxy_pass http://127.0.0.1:3000/;  # 假设后端运行在 3000 端口
        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;
    }

    # 可选：WebSocket 支持
    location /ws/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

🔧 后端服务启动（例如 Node.js）：

node server.js  # 监听 3000 端口

注意：确保后端只监听 127.0.0.1 或内网地址，避免直接暴露。

✅ 优点：

• 前后端共享一个域名和端口（80/443）
• 易于配置 HTTPS（通过 Let’s Encrypt）
• 支持负载均衡、缓存、压缩等高级功能

✅ 方案二：后端服务内置静态文件（适用于轻量级应用）

如果你的后端框架支持（如 Express、Flask、Spring Boot），可以直接让后端托管前端静态资源。

示例（Node.js + Express）：

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

// 托管前端静态文件
app.use(express.static(path.join(__dirname, 'frontend/dist')));

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

// SPA 路由回退
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend/dist/index.html'));
});

app.listen(3000);

✅ 优点：

• 部署简单，无需额外 Web 服务器
• 适合小型项目或原型开发

❌ 缺点：

• 不利于性能优化（如缓存、Gzip）
• 后端承担了本可由 Nginx 处理的任务

✅ 方案三：使用 PM2 + Nginx（生产推荐）

结合进程管理工具（PM2）和 Nginx 实现高可用部署。

步骤：

1. 使用 PM2 启动后端服务：

   pm2 start server.js --name "backend"

2. Nginx 配置同方案一，反向X_X到 localhost:3000

3. 自动启动：

   pm2 startup
   pm2 save

✅ HTTPS 配置（Let’s Encrypt）

使用 Certbot 为你的域名添加免费 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

之后 Nginx 会自动配置 HTTPS 并重定向 HTTP → HTTPS。

🔐 安全建议

• 前端不包含敏感信息（API 密钥等应放在后端）
• 后端启用 CORS 白名单
• 使用防火墙限制非必要端口（如只开放 80、443）
• 定期更新系统和软件

🧩 总结：推荐架构

如有具体技术栈（如 Vue + Spring Boot / React + Express），我可以提供更详细的配置模板。欢迎补充！