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

2026-02-14 12:20:32 分类：云计算

在单服务器环境下配置前后端共存，可以采用以下几种常见方案：

一、基础部署方案

1. 静态文件分离部署

# Nginx 配置示例
server {
    listen 80;
    server_name yourdomain.com;

    # 前端静态文件
    location / {
        root /var/www/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持前端路由
    }

    # 后端APIXX
    location /api/ {
        proxy_pass http://localhost:3000;  # 后端服务端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 静态资源缓存
    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

2. 目录结构示例

/var/www/
├── frontend/          # 前端构建文件
│   ├── dist/
│   │   ├── index.html
│   │   ├── static/
│   │   └── assets/
├── backend/           # 后端源码
│   ├── src/
│   ├── package.json
│   └── server.js
└── nginx/
    └── sites-available/yourdomain.conf

二、技术栈选择

前端技术栈

  • 框架: React/Vue/Angular
  • 构建工具: Vite/Webpack
  • 部署: 静态文件构建（npm run build）

后端技术栈

  • Node.js: Express/Koa/NestJS
  • Python: Django/Flask/FastAPI
  • Java: Spring Boot
  • Go: Gin/Echo

三、详细配置步骤

方案A：Nginx反向XX（推荐）

# 1. 安装Nginx
sudo apt update
sudo apt install nginx

# 2. 部署前端
cd frontend
npm run build
sudo cp -r dist/* /var/www/frontend/

# 3. 启动后端服务（以Node.js为例）
cd backend
npm install
# 使用PM2管理进程
sudo npm install -g pm2
pm2 start server.js --name backend

# 4. 配置Nginx
sudo nano /etc/nginx/sites-available/yourdomain
# 粘贴上面的Nginx配置
sudo ln -s /etc/nginx/sites-available/yourdomain /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

方案B：后端服务直接托管静态文件

// Express示例
const express = require('express');
const path = require('path');
const app = express();

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

// API路由
app.use('/api', require('./routes/api'));

// 处理前端路由（返回index.html）
app.get('*', (req, res) => {
    if (!req.path.startsWith('/api')) {
        res.sendFile(path.join(__dirname, '../frontend/dist/index.html'));
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

四、环境变量配置

前端环境变量

// .env.production
VITE_API_URL=/api
VITE_BASE_URL=/

后端环境变量

# .env
PORT=3000
NODE_ENV=production
DATABASE_URL=your_database_url

五、安全配置

Nginx安全加固

# 防止点击劫持
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

# CSP策略
add_header Content-Security-Policy "default-src 'self';" always;

# 限制请求大小
client_max_body_size 10M;

HTTPS配置

# 使用Certbot获取SSL证书
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

六、性能优化

1. 前端优化

# 开启Gzip压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;

# 浏览器缓存
location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

2. 后端优化

// Node.js集群模式
const cluster = require('cluster');
const os = require('os');

if (cluster.isMaster) {
    const numCPUs = os.cpus().length;
    for (let i = 0; i < numCPUs; i++) {
        cluster.fork();
    }
} else {
    // 启动应用
    app.listen(3000);
}

七、监控与维护

日志配置

# Nginx访问日志
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

# 日志轮转
# /etc/logrotate.d/nginx

进程管理

# 使用PM2管理
pm2 startup  # 设置开机自启
pm2 save     # 保存当前进程列表
pm2 monit    # 监控面板

八、常见问题解决

1. 跨域问题

// 后端CORS配置
const cors = require('cors');
app.use(cors({
    origin: 'https://yourdomain.com',
    credentials: true
}));

2. 路径冲突

  • 前后端路由使用不同前缀
  • API使用 /api/ 前缀
  • 静态资源使用 /static/ 前缀

3. 端口冲突

  • 前端：80/443（通过Nginx）
  • 后端：3000/8080等
  • 数据库：3306/5432等

九、自动化部署脚本

#!/bin/bash
# deploy.sh

echo "开始部署..."

# 拉取最新代码
git pull origin main

# 前端构建
cd frontend
npm install
npm run build
sudo cp -r dist/* /var/www/frontend/

# 后端重启
cd ../backend
npm install
pm2 restart backend

echo "部署完成！"

十、推荐架构

对于生产环境，建议采用：

  1. Nginx作为反向XX – 处理静态文件和负载均衡
  2. PM2管理Node进程 – 保证服务高可用
  3. 独立数据库服务 – 使用云数据库或Docker容器
  4. 配置SSL证书 – 启用HTTPS
  5. 设置防火墙 – 只开放必要端口

这种配置方案简单高效，适合中小型项目，同时保持了良好的可维护性和扩展性。

相关推荐

云服务器