前端部署(包括Node服务端部署)—-手动部署

一、环境准备与基础配置

1.1 服务器环境选择

手动部署的核心在于对服务器的完全控制。建议选择Linux系统（如Ubuntu 22.04 LTS），其稳定性与社区支持远超Windows Server。配置时需考虑：

CPU/内存：根据项目规模选择，一般前端项目2核4G即可，Node服务端需根据并发量调整（建议4核8G起）
磁盘空间：预留至少50GB空间（含系统盘与数据盘分离）
网络带宽：公网带宽建议10Mbps起，内网通信需确保千兆网络

1.2 基础软件安装

# 基础工具链
sudo apt update && sudo apt install -y git curl wget nginx pm2 build-essential
# Node环境安装（使用nvm管理多版本）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
source ~/.bashrc
nvm install --lts

1.3 安全配置要点

防火墙规则：仅开放必要端口（80/443/22/3000）

sudo ufw allow 22/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable

SSH密钥认证：禁用密码登录

# 生成密钥对
ssh-keygen -t ed25519 -C "deploy@yourdomain.com"
# 将公钥添加到服务器~/.ssh/authorized_keys

二、前端项目部署流程

2.1 构建优化策略

代码分割：使用React.lazy/Suspense或Vue动态导入

// React示例
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

资源压缩：配置webpack生产模式

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all',
    },
  },
};

2.2 Nginx反向代理配置

server {
    listen 80;
    server_name yourdomain.com;
    # 前端静态资源
    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;
        expires 1y;
        add_header Cache-Control "public";
    }
    # Node服务端代理
    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2.3 自动化部署脚本示例

#!/bin/bash
# 部署脚本deploy.sh
REPO_URL="git@github.com:yourname/frontend.git"
DEPLOY_DIR="/var/www/frontend"
# 拉取最新代码
git clone $REPO_URL $DEPLOY_DIR || exit 1
cd $DEPLOY_DIR
# 安装依赖并构建
npm install --production
npm run build
# 重启Nginx
sudo systemctl restart nginx

三、Node服务端部署要点

3.1 生产环境配置

PM2进程管理：

npm install pm2 -g
pm2 start app.js --name "api-service" -i max
pm2 save
pm2 startup

环境变量管理：

// .env文件示例
DB_HOST=localhost
DB_PORT=5432
JWT_SECRET=your_secure_secret

3.2 数据库连接优化

// 使用连接池
const { Pool } = require('pg');
const pool = new Pool({
  user: process.env.DB_USER,
  host: process.env.DB_HOST,
  database: process.env.DB_NAME,
  password: process.env.DB_PASSWORD,
  port: process.env.DB_PORT,
  max: 20, // 连接池最大数量
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
});

3.3 日志与监控配置

日志轮转：

# /etc/logrotate.d/nodejs
/var/log/nodejs/*.log {
  daily
  missingok
  rotate 14
  compress
  delaycompress
  notifempty
  copytruncate
}

健康检查端点：

// Express健康检查
app.get('/health', (req, res) => {
  res.status(200).json({ status: 'healthy' });
});

四、高级部署技巧

4.1 蓝绿部署实现

准备两套完全相同的环境（蓝/绿）

通过Nginx配置切换流量：

upstream api_service {
  server 10.0.0.1:3000; # 蓝环境
  # server 10.0.0.2:3000; # 绿环境（注释状态）
}

使用sed命令动态切换配置后重载Nginx

4.2 容器化基础配置（可选）

# Dockerfile示例
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
EXPOSE 3000
CMD ["node", "app.js"]

4.3 性能调优参数

Node.js：

# 启动时指定内存限制
node --max-old-space-size=4096 app.js

Nginx：

worker_processes auto;
worker_rlimit_nofile 65535;
events {
  worker_connections 4096;
}

五、常见问题解决方案

5.1 跨域问题处理

// Express CORS中间件
const cors = require('cors');
app.use(cors({
  origin: 'https://yourdomain.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

5.2 静态资源404错误

确保Nginx配置中root指令指向正确的构建目录

检查文件权限：

sudo chown -R www-data:www-data /var/www/frontend
sudo chmod -R 755 /var/www/frontend

5.3 Node进程崩溃处理

配置PM2自动重启策略：

pm2 start app.js --max-restarts 10 --max-memory-restart 1G

设置邮件报警：
```
pm2 set pm2:email your@email.com
```

六、部署后验证清单

功能测试：
- 核心业务流程验证
- 边界条件测试

性能测试：

使用ab或wrk进行压力测试

wrk -t12 -c400 -d30s http://yourdomain.com/api/endpoint

安全扫描：
- 使用nmap检查开放端口
- 进行OWASP ZAP漏洞扫描

七、运维监控体系

7.1 基础监控指标

指标类型	监控工具	告警阈值
CPU使用率	htop/nmon	>85%持续5分钟
内存使用率	free -m	>90%
磁盘I/O	iostat	>80%利用率
网络吞吐量	iftop	>带宽上限80%

7.2 日志分析方案

# 实时日志监控
tail -f /var/log/nodejs/api.log | grep "ERROR"
# 日志统计分析
cat /var/log/nodejs/api.log | awk '{print $5}' | sort | uniq -c | sort -nr

八、持续改进建议

部署文档化：
- 维护DEPLOYMENT.md文件
- 记录所有部署步骤与依赖关系
回滚机制：
- 保留最近3个成功部署版本
- 制定快速回滚SOP
知识共享：
- 定期进行部署演练
- 建立内部Wiki记录常见问题

通过系统化的手动部署流程，开发者可以获得对系统的完全掌控力，这在项目初期或需要高度定制化的场景中具有不可替代的价值。建议从简单项目开始实践，逐步完善部署规范，最终形成适合团队的标准化操作流程。

手动部署全攻略：前端与Node服务端协同部署实践指南