阿里云服务器上如何配置前端和后端共存的环境？

2026-02-23 23:40:37 分类：云计算

在阿里云服务器上配置前后端共存的环境，常见的有以下几种方案：

一、基础环境准备

1. 服务器初始化

# 更新系统
sudo apt update && sudo apt upgrade -y  # Ubuntu/Debian
# 或
sudo yum update -y                      # CentOS

# 安装常用工具
sudo apt install -y curl wget vim git   # Ubuntu/Debian

2. 安装 Node.js（前端/Node后端）

# 使用 nvm 安装 Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install --lts

3. 安装 Java/Python/PHP（根据后端需求）

# Java (Spring Boot等)
sudo apt install -y openjdk-11-jdk

# Python (Django/Flask等)
sudo apt install -y python3 python3-pip

# PHP
sudo apt install -y php php-fpm

二、方案一：Nginx 反向XX（推荐）

1. 安装 Nginx

sudo apt install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx

2. 前端配置（以 Vue/React 为例）

# 构建前端项目
npm run build  # 生成 dist 目录

# 部署到 Nginx
sudo mkdir -p /var/www/frontend
sudo cp -r dist/* /var/www/frontend/

3. 后端配置（以 Node.js 为例）

# 启动后端服务（监听 3000 端口）
npm start
# 或使用 PM2 守护进程
npm install -g pm2
pm2 start app.js --name "backend"

4. Nginx 配置

# /etc/nginx/sites-available/your-domain
server {
    listen 80;
    server_name your-domain.com;

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

    # 后端 API XX
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 静态文件缓存
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
# 启用配置
sudo ln -s /etc/nginx/sites-available/your-domain /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

三、方案二：Docker 容器化部署

1. 安装 Docker

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo systemctl start docker

2. Docker Compose 配置

# docker-compose.yml
version: '3.8'

services:
  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./frontend-dist:/usr/share/nginx/html
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    volumes:
      - ./backend:/app

3. Nginx 配置

# nginx.conf
events {}
http {
    server {
        listen 80;

        location / {
            root /usr/share/nginx/html;
            index index.html;
        }

        location /api/ {
            proxy_pass http://backend:3000/;
        }
    }
}

四、方案三：PM2 + Nginx（Node.js全栈）

1. 使用 PM2 管理前后端

# 安装 PM2
npm install -g pm2

# 启动前端服务（如果使用SSR）
pm2 serve /var/www/frontend 8080 --spa

# 启动后端服务
pm2 start backend/server.js

# 保存进程列表
pm2 save
pm2 startup

2. Nginx 配置

server {
    listen 80;

    # 前端（SSR或静态）
    location / {
        proxy_pass http://localhost:8080;
    }

    # 后端 API
    location /api/ {
        proxy_pass http://localhost:3000;
    }
}

五、安全配置

1. 防火墙设置

# 启用防火墙
sudo ufw enable
sudo ufw allow 22/tcp    # SSH
sudo ufw allow 80/tcp    # HTTP
sudo ufw allow 443/tcp   # HTTPS
sudo ufw status

2. SSL 证书（HTTPS）

# 使用 Certbot 获取免费证书
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

六、监控与维护

1. 日志管理

# 查看 Nginx 日志
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

# 查看应用日志
pm2 logs

2. 进程监控

# 使用 htop 监控资源
sudo apt install -y htop
htop

# PM2 监控
pm2 monit

七、快速部署脚本示例

#!/bin/bash
# deploy.sh

# 1. 拉取代码
git pull origin main

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

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

# 4. 重启 Nginx
sudo nginx -t && sudo systemctl reload nginx

建议方案选择

  • 小型项目：方案一（Nginx反向XX）最简单直接
  • 微服务架构：方案二（Docker）便于扩展和管理
  • Node.js全栈：方案三（PM2）适合JavaScript技术栈
  • 高可用需求：考虑使用负载均衡SLB + 多台ECS实例

注意事项

  1. 资源分配：根据项目需求合理选择ECS规格
  2. 域名解析：在阿里云DNS控制台添加A记录
  3. 备份策略：定期备份代码和数据库
  4. 监控告警：配置云监控告警规则
  5. 成本优化：合理使用抢占式实例或预留实例券

根据你的具体技术栈和项目规模，可以选择最适合的方案进行部署。

相关推荐

云服务器