前端部署(包括Node服务端部署)—-手动部署全流程指南

在云计算和DevOps工具普及的今天，手动部署仍是开发者理解系统架构、排查问题的重要方式。本文将系统讲解前端项目（含Node服务端）手动部署的全流程，涵盖环境准备、代码部署、服务启动及安全优化等关键环节。

一、部署前环境准备

1.1 服务器环境配置

选择服务器时需考虑项目规模：

小型项目：1核2G配置即可满足静态页面+Node API服务
中大型项目：建议4核8G起，配备SSD硬盘提升I/O性能

操作系统推荐使用CentOS 8或Ubuntu 20.04 LTS，安装后需执行基础安全配置：

# 更新系统包
sudo apt update && sudo apt upgrade -y
# 配置SSH安全
sudo sed -i 's/^#PermitRootLogin prohibit-password/PermitRootLogin no/' /etc/ssh/sshd_config
sudo systemctl restart sshd

1.2 依赖环境安装

Node环境：

使用nvm管理多版本Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 16.14.0  # 推荐LTS版本

构建工具：

# 前端构建依赖
sudo apt install -y build-essential python3
# PM2进程管理
sudo npm install pm2 -g

二、代码部署实施

2.1 代码传输方案

Git拉取方式（推荐）：

# 生成SSH密钥（若未配置）
ssh-keygen -t rsa -b 4096 -C "deploy@yourdomain.com"
# 添加公钥到Git仓库
cat ~/.ssh/id_rsa.pub
# 克隆代码
git clone git@github.com:yourname/yourrepo.git
cd yourrepo

本地压缩传输（备选）：

# 本地打包
tar -czvf project.tar.gz ./dist ./server
# 服务器解压
tar -xzvf project.tar.gz -C /var/www/

2.2 前端静态资源部署

Nginx配置示例：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/yourrepo/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # 静态资源缓存
    location ~* \.(js|css|png|jpg)$ {
        expires 1y;
        add_header Cache-Control "public";
    }
}

关键配置点：

确保root路径指向构建后的dist目录
配置try_files实现前端路由支持
设置合理的缓存策略（开发环境可设为0）

2.3 Node服务端部署

PM2启动配置（ecosystem.config.js）：

module.exports = {
  apps: [{
    name: 'api-service',
    script: './server/app.js',
    instances: 'max', // 或指定数字
    exec_mode: 'cluster',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: '/var/log/api-error.log',
    out_file: '/var/log/api-out.log'
  }]
};

启动命令：

pm2 start ecosystem.config.js
pm2 save  # 保存进程列表
pm2 startup  # 设置开机自启

三、服务验证与监控

3.1 基础验证

端口监听检查：

netstat -tulnp | grep LISTEN
# 或使用ss命令
ss -tulnp | grep LISTEN

服务可用性测试：

curl -I http://localhost:3000/api/health
# 应返回200状态码

3.2 日志监控方案

PM2日志管理：

# 实时查看日志
pm2 logs api-service
# 日志轮转配置
pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 10M

Nginx日志分析：

# 在nginx配置中添加
access_log /var/log/nginx/yourdomain.access.log main;
error_log /var/log/nginx/yourdomain.error.log warn;

四、安全加固措施

4.1 防火墙配置

UFW简单配置：

sudo ufw allow 22/tcp  # SSH
sudo ufw allow 80/tcp  # HTTP
sudo ufw allow 443/tcp # HTTPS
sudo ufw enable

高级规则（iptables示例）：

# 限制SSH连接频率
sudo iptables -A INPUT -p tcp --dport 22 -m connlimit --connlimit-above 3 -j REJECT

4.2 进程权限管理

创建专用用户：

sudo useradd -m -s /bin/bash nodeuser
sudo chown -R nodeuser:nodeuser /var/www/yourrepo

使用sudoers限制权限：

# 编辑sudoers文件
sudo visudo
# 添加以下内容
nodeuser ALL=(ALL) NOPASSWD: /usr/bin/pm2

五、常见问题处理

5.1 端口冲突解决方案

# 查找占用端口的进程
sudo lsof -i :3000
# 强制终止进程
sudo kill -9 <PID>

5.2 静态资源404问题排查

检查Nginx配置中的root路径是否正确
确认构建后的文件是否包含在传输包中
验证文件权限（应为644）

5.3 Node进程崩溃处理

PM2自动重启配置：

// 在ecosystem.config.js中添加
module.exports = {
  apps: [{
    // ...其他配置
    max_restarts: 10,
    restart_delay: 1000,
    min_uptime: '10s'
  }]
};

六、部署优化建议

蓝绿部署：准备两套环境，通过Nginx配置切换
金丝雀发布：先部署少量实例，监控无误后再全量

自动化脚本：将部署步骤编写为Shell脚本（示例）：

#!/bin/bash
# deploy.sh
echo "开始部署..."
cd /var/www/yourrepo
git pull origin main
npm install --production
npm run build
pm2 reload ecosystem.config.js
echo "部署完成"

手动部署虽然比自动化工具耗时，但能帮助开发者深入理解系统运行机制。建议新手从手动部署开始，逐步过渡到自动化方案。实际部署时，应根据项目规模选择合适的服务器配置，并始终将安全性放在首位。

前端部署全流程：手动操作指南与最佳实践