前端项目打包与部署实战

学习目标：掌握前端项目部署场景、Nginx 配置、静态资源部署、域名配置、文件上传、部署流程。

一、前端项目部署场景概述

1.1 三种部署场景

code

前端项目部署场景分类：
│
├── 场景一：纯静态资源部署（SPA）
│   ├── 技术栈：React、Vue（无 SSR）
│   ├── 构建产物：HTML、JS、CSS 静态文件
│   ├── 部署方式：Web 服务器（Nginx、Apache）
│   ├── 环境要求：无需 Node.js 环境
│   └── 复杂度：（最简单）
│
├── 场景二：SSG 静态站点生成（Static Site Generation）
│   ├── 技术栈：Next.js SSG、Nuxt.js SSG
│   ├── 构建产物：静态 HTML、JS、CSS 文件
│   ├── 部署方式：与场景一相同（Web 服务器）
│   ├── 环境要求：无需 Node.js 环境
│   └── 复杂度：（最简单）
│
└── 场景三：SSR 服务端渲染（Server Side Rendering）
    ├── 技术栈：Next.js SSR、Nuxt.js SSR、NestJS
    ├── 构建产物：服务端代码 + 客户端代码
    ├── 部署方式：Node.js 环境 + 进程管理（PM2）
    ├── 环境要求：需要 Node.js 环境
    └── 复杂度：（较复杂）

1.2 部署场景对比

场景	构建产物	部署方式	环境要求	进程管理
SPA	静态文件	Web 服务器	无	无
SSG	静态文件	Web 服务器	无	无
SSR	服务端代码 + 客户端代码	Node.js + PM2	Node.js	PM2

1.3 部署核心要点

code

前端项目部署核心要点：
│
├── 1. 构建产物理解
│   ├── SPA/SSG：dist 目录（静态文件）
│   ├── SSR：服务端代码 + 客户端代码
│   └── 入口文件：index.html 或 server.js
│
├── 2. Web 服务器选择
│   ├── Nginx（推荐）
│   ├── Apache
│   └── Caddy
│
├── 3. 域名与 DNS
│   ├── 域名购买
│   ├── DNS 解析配置
│   └── 本地 hosts 测试
│
├── 4. 文件上传方式
│   ├── FTP 工具（Transmit、FileZilla）
│   ├── SCP 命令
│   ├── rsync 命令
│   └── CI/CD 自动化部署
│
└── 5. 进程管理（SSR 场景）
    ├── PM2（推荐）
    ├── systemd
    └── Docker

二、场景一：纯静态资源部署（SPA）

2.1 部署流程

code

SPA 项目部署流程：
│
├── 第一步：构建项目
│   ├── 命令：npm run build
│   ├── 产物：dist 目录
│   └── 内容：HTML、JS、CSS、静态资源
│
├── 第二步：准备服务器
│   ├── 安装 Nginx
│   ├── 配置 Nginx
│   └── 启动 Nginx 服务
│
├── 第三步：配置域名（可选）
│   ├── 购买域名
│   ├── 配置 DNS 解析
│   └── 或配置本地 hosts 测试
│
├── 第四步：上传文件
│   ├── 使用 FTP 工具上传 dist 目录
│   ├── 上传到 Nginx 配置的根目录
│   └── 确保文件权限正确
│
└── 第五步：测试访问
    ├── 浏览器访问域名或 IP
    ├── 检查页面是否正常
    └── 检查静态资源是否加载

2.2 构建项目

Vue3 项目构建：

bash

#  进入项目目录
cd vue3-project

#  安装依赖
npm install

#  构建项目
npm run build

#  构建产物
# dist/
# ├── index.html          # 入口文件
# ├── assets/
# │   ├── index.js        # JavaScript 文件
# │   ├── index.css       # CSS 文件
# │   └── logo.png        # 静态资源
# └── favicon.ico

React 项目构建：

bash

#  进入项目目录
cd react-project

#  安装依赖
npm install

#  构建项目
npm run build

#  构建产物
# build/
# ├── index.html
# ├── static/
# │   ├── js/
# │   ├── css/
# │   └── media/
# └── favicon.ico

2.3 Nginx 安装与配置

Ubuntu/Debian 安装 Nginx：

bash

#  更新软件源
sudo apt update

#  安装 Nginx
sudo apt install nginx -y

#  查看 Nginx 状态
sudo systemctl status nginx

#  启动 Nginx
sudo systemctl start nginx

#  停止 Nginx
sudo systemctl stop nginx

#  重启 Nginx
sudo systemctl restart nginx

#  重新加载配置
sudo systemctl reload nginx

#  设置开机自启
sudo systemctl enable nginx

CentOS/RHEL 安装 Nginx：

bash

#  更新软件源
sudo yum update

#  安装 Nginx
sudo yum install nginx -y

#  查看 Nginx 状态
sudo systemctl status nginx

#  启动 Nginx
sudo systemctl start nginx

#  设置开机自启
sudo systemctl enable nginx

Nginx 配置文件位置：

bash

#  查找 Nginx 配置文件
sudo find / -name nginx.conf

# 常见位置：
# /etc/nginx/nginx.conf           # 主配置文件
# /etc/nginx/conf.d/              # 额外配置目录
# /etc/nginx/sites-available/     # 可用站点配置
# /etc/nginx/sites-enabled/       # 启用站点配置

2.4 Nginx 配置详解

基础 Nginx 配置：

nginx

# /etc/nginx/conf.d/site1.conf

server {
    listen 80;                                    # 监听端口
    server_name site1.com;                        # 域名
    
    root /home/website/project-front-vue3;        # 网站根目录
    index index.html;                             # 入口文件
    
    #  访问日志
    access_log /var/log/nginx/site1.access.log;
    
    #  错误日志
    error_log /var/log/nginx/site1.error.log;
    
    #  主要 location 配置
    location / {
        try_files $uri $uri/ /index.html;         # SPA 路由支持
    }
    
    #  静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;                               # 缓存 1 年
        add_header Cache-Control "public, immutable";
    }
    
    #  禁止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

使用 AI 工具生成 Nginx 配置：

code

Prompt 示例：

请帮我生成一份 Nginx 配置文件，要求：
1. 域名：site1.com
2. 监听端口：80
3. 网站根目录：/home/website/project-front-vue3
4. 入口文件：index.html
5. 支持 SPA 路由（Vue Router history 模式）
6. 配置静态资源缓存

Nginx 配置说明：

code

Nginx 配置文件详解：
│
├── server 块
│   ├── listen：监听端口（默认 80）
│   ├── server_name：域名或 IP
│   ├── root：网站根目录
│   └── index：默认入口文件
│
├── location 块
│   ├── location /：匹配所有请求
│   ├── try_files：尝试查找文件，找不到则返回 index.html
│   └── 支持 SPA 路由（Vue Router history 模式）
│
├── 日志配置
│   ├── access_log：访问日志路径
│   └── error_log：错误日志路径
│
└── 静态资源缓存
    ├── expires：缓存时间
    └── Cache-Control：缓存策略

2.5 域名配置

本地测试：修改 hosts 文件：

bash

#  Mac/Linux
sudo vi /etc/hosts

#  Windows
# 路径：C:\Windows\System32\drivers\etc\hosts
# 需要管理员权限编辑

#  添加域名映射
192.168.31.77 site1.com

#  测试域名解析
ping site1.com
# 如果返回 192.168.31.77，说明配置成功

线上环境：配置 DNS 解析：

code

DNS 解析配置步骤：
│
├── 第一步：购买域名
│   └── 阿里云、腾讯云、GoDaddy 等
│
├── 第二步：进入域名解析控制台
│   └── 找到域名管理 -> 解析设置
│
├── 第三步：添加解析记录
│   ├── 记录类型：A 记录
│   ├── 主机记录：www 或 @
│   ├── 记录值：服务器 IP 地址
│   └── TTL：默认或自定义
│
└── 第四步：等待 DNS 生效
    ├── 通常 10 分钟 - 2 小时
    └── 使用 nslookup 或 dig 命令验证

DNS 解析类型：

类型	说明	示例
A 记录	域名指向 IPv4 地址	site1.com → 192.168.31.77
AAAA 记录	域名指向 IPv6 地址	site1.com → 2001:db8::1
CNAME 记录	域名指向另一个域名	www.site1.com → site1.com
MX 记录	邮件交换记录	邮箱服务使用

2.6 文件上传

方式一：使用 FTP 工具（推荐）：

code

常用 FTP 工具：
│
├── Mac
│   ├── Transmit（推荐）
│   ├── FileZilla
│   └── Cyberduck
│
├── Windows
│   ├── FileZilla（推荐）
│   ├── WinSCP
│   └── FlashFXP
│
└── Linux
    ├── FileZilla
    └── 命令行工具

上传步骤：

code

FTP 上传步骤：
│
├── 第一步：连接服务器
│   ├── 主机：服务器 IP
│   ├── 端口：22（SFTP）或 21（FTP）
│   ├── 用户名：服务器用户名
│   └── 密码：服务器密码
│
├── 第二步：上传文件
│   ├── 本地：选择 dist 目录
│   ├── 远程：/home/website/project-front-vue3
│   └── 拖拽上传或右键上传
│
└── 第三步：验证文件
    ├── 检查文件是否完整
    ├── 检查文件权限
    └── 检查文件大小

方式二：使用 SCP 命令：

bash

#  上传整个目录
scp -r dist/* user@server:/home/website/project-front-vue3/

#  参数说明
# -r：递归上传目录
# dist/*：本地 dist 目录下的所有文件
# user：服务器用户名
# server：服务器 IP 或域名
# /home/website/project-front-vue3/：服务器目标路径

方式三：使用 rsync 命令：

bash

#  同步文件（增量传输）
rsync -avz dist/ user@server:/home/website/project-front-vue3/

#  参数说明
# -a：归档模式（保留权限、时间戳等）
# -v：显示详细信息
# -z：压缩传输

2.7 测试访问

验证步骤：

bash

#  第一步：检查 Nginx 配置
sudo nginx -t
# 输出：
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

#  第二步：重新加载 Nginx 配置
sudo systemctl reload nginx

#  第三步：检查 Nginx 状态
sudo systemctl status nginx

#  第四步：检查端口监听
sudo netstat -tulpn | grep :80

#  第五步：浏览器访问
# http://site1.com 或 http://192.168.31.77

常见问题排查：

code

常见问题与解决方案：
│
├── 问题一：无法访问
│   ├── 检查 Nginx 是否启动
│   ├── 检查防火墙是否开放端口
│   └── 检查域名解析是否正确
│
├── 问题二：404 Not Found
│   ├── 检查 root 路径是否正确
│   ├── 检查 index.html 是否存在
│   └── 检查文件权限
│
├── 问题三：403 Forbidden
│   ├── 检查文件权限（chmod 755）
│   ├── 检查 SELinux 配置
│   └── 检查 Nginx 用户权限
│
└── 问题四：静态资源 404
    ├── 检查资源路径是否正确
    ├── 检查 publicPath 配置
    └── 检查 Nginx location 配置

三、场景二：SSG 静态站点生成

3.1 SSG 与 SPA 的区别

code

SSG vs SPA 对比：
│
├── 构建产物
│   ├── SPA：单页应用，HTML 为空壳
│   └── SSG：多页应用，每个页面预渲染为 HTML
│
├── SEO 优化
│   ├── SPA：SEO 不友好（需要额外配置）
│   └── SSG：SEO 友好（内容已渲染）
│
├── 首屏加载
│   ├── SPA：需要加载 JS 后渲染
│   └── SSG：直接显示 HTML 内容
│
└── 部署方式
    ├── SPA：静态文件部署
    └── SSG：静态文件部署（相同）

3.2 SSG 部署流程

code

SSG 项目部署流程：
│
├── 第一步：构建项目
│   ├── Next.js：npm run build + npm run export
│   ├── Nuxt.js：npm run generate
│   └── 产物：out 或 dist 目录
│
├── 第二步：准备服务器
│   ├── 安装 Nginx
│   ├── 配置 Nginx
│   └── 启动 Nginx 服务
│
├── 第三步：配置域名（可选）
│   ├── 购买域名
│   ├── 配置 DNS 解析
│   └── 或配置本地 hosts 测试
│
├── 第四步：上传文件
│   ├── 使用 FTP 工具上传
│   ├── 上传到 Nginx 配置的根目录
│   └── 确保文件权限正确
│
└── 第五步：测试访问
    ├── 浏览器访问域名或 IP
    ├── 检查页面是否正常
    └── 检查 SEO 是否生效

Next.js SSG 构建：

bash

#  next.config.js 配置
module.exports = {
  output: 'export',
}

#  构建项目
npm run build

#  构建产物
# out/
# ├── index.html
# ├── about/
# │   └── index.html
# ├── _next/
# │   ├── static/
# │   └── ...
# └── ...

Nuxt.js SSG 构建：

bash

#  nuxt.config.ts 配置
export default defineNuxtConfig({
  ssr: true,
  generate: {
    routes: ['/'], // 预渲染的路由
  },
})

#  构建项目
npm run generate

#  构建产物
# dist/
# ├── index.html
# ├── about/
# │   └── index.html
# ├── _nuxt/
# │   └── ...
# └── ...

四、场景三：SSR 服务端渲染

4.1 SSR 部署特点

code

SSR 部署特点：
│
├── 环境要求
│   ├── 需要 Node.js 环境
│   ├── 需要进程管理工具（PM2）
│   └── 需要反向代理（Nginx）
│
├── 构建产物
│   ├── 服务端代码（.nuxt 或 .next）
│   ├── 客户端代码
│   ├── 入口文件（server.js）
│   └── package.json（依赖）
│
├── 进程管理
│   ├── PM2（推荐）
│   ├── systemd
│   └── Docker
│
└── 架构设计
    ├── Nginx 反向代理
    ├── PM2 集群模式
    ├── 负载均衡
    └── 高可用架构

4.2 Node.js 环境安装

Ubuntu/Debian 安装 Node.js：

bash

#  方式一：使用 NodeSource 仓库（推荐）
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

#  方式二：使用 nvm（Node Version Manager）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18

#  验证安装
node -v    # v18.x.x
npm -v     # 9.x.x

CentOS/RHEL 安装 Node.js：

bash

#  使用 NodeSource 仓库
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

#  验证安装
node -v
npm -v

4.3 PM2 进程管理

什么是 PM2：

code

PM2 是 Node.js 应用的进程管理器：
│
├── 核心功能
│   ├── 进程守护（自动重启）
│   ├── 负载均衡（集群模式）
│   ├── 日志管理
│   ├── 监控面板
│   └── 开机自启
│
├── 安装 PM2
│   └── npm install -g pm2
│
└── 常用命令
    ├── pm2 start：启动应用
    ├── pm2 stop：停止应用
    ├── pm2 restart：重启应用
    ├── pm2 delete：删除应用
    ├── pm2 logs：查看日志
    ├── pm2 monit：监控面板
    └── pm2 list：查看所有应用

安装 PM2：

bash

#  全局安装 PM2
npm install -g pm2

#  验证安装
pm2 -v

#  设置开机自启
pm2 startup
pm2 save

PM2 基础使用：

bash

#  启动应用
pm2 start server.js --name my-app

#  启动应用（带参数）
pm2 start server.js --name my-app -- -p 3000

#  停止应用
pm2 stop my-app

#  重启应用
pm2 restart my-app

#  删除应用
pm2 delete my-app

#  查看所有应用
pm2 list

#  查看应用详情
pm2 show my-app

#  查看日志
pm2 logs my-app

#  监控面板
pm2 monit

PM2 集群模式：

bash

#  启动集群模式（自动负载均衡）
pm2 start server.js --name my-app -i max

#  参数说明
# -i max：启动最大 CPU 核心数个进程
# -i 4：启动 4 个进程

PM2 配置文件：

javascript

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'my-app',
      script: './server.js',
      instances: 'max',          // 启动最大 CPU 核心数个进程
      exec_mode: 'cluster',      // 集群模式
      watch: false,              // 是否监听文件变化
      max_memory_restart: '1G',  // 内存达到 1G 自动重启
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
      },
      error_file: './logs/err.log',    // 错误日志
      out_file: './logs/out.log',      // 输出日志
      log_date_format: 'YYYY-MM-DD HH:mm:ss',
    },
  ],
}

bash

#  使用配置文件启动
pm2 start ecosystem.config.js

4.4 SSR 项目部署流程

code

SSR 项目部署流程：
│
├── 第一步：构建项目
│   ├── npm run build
│   ├── 产物：.nuxt 或 .next 目录
│   └── 入口文件：server.js
│
├── 第二步：准备服务器
│   ├── 安装 Node.js
│   ├── 安装 PM2
│   └── 安装 Nginx
│
├── 第三步：上传文件
│   ├── 上传构建产物
│   ├── 上传 package.json
│   ├── 安装依赖：npm install --production
│   └── 配置环境变量
│
├── 第四步：启动应用
│   ├── pm2 start server.js --name my-app
│   ├── pm2 save
│   └── pm2 startup
│
├── 第五步：配置 Nginx 反向代理
│   ├── upstream 配置
│   ├── proxy_pass 配置
│   └── 重启 Nginx
│
└── 第六步：测试访问
    ├── 浏览器访问域名或 IP
    ├── 检查页面是否正常
    └── 检查 PM2 状态

Nginx 反向代理配置：

nginx

# /etc/nginx/conf.d/ssr-app.conf

upstream ssr_app {
    server 127.0.0.1:3000;
    keepalive 64;
}

server {
    listen 80;
    server_name site1.com;
    
    location / {
        proxy_pass http://ssr_app;
        proxy_http_version 1.1;
        
        #  请求头配置
        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;
        
        #  超时配置
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
}

五、完整部署实战示例

5.1 Vue3 项目部署完整流程

部署流程图：

code

Vue3 项目部署完整流程：
│
├── 本地环境
│   ├── 1. 编写代码
│   ├── 2. 本地测试
│   ├── 3. 构建项目：npm run build
│   └── 4. 生成 dist 目录
│
├── 服务器环境
│   ├── 1. 更新软件源：sudo apt update
│   ├── 2. 安装 Nginx：sudo apt install nginx -y
│   ├── 3. 查看 Nginx 状态：sudo systemctl status nginx
│   └── 4. 查找配置文件：sudo find / -name nginx.conf
│
├── 配置 Nginx
│   ├── 1. 创建配置文件：sudo vi /etc/nginx/conf.d/site1.conf
│   ├── 2. 编写配置内容
│   ├── 3. 测试配置：sudo nginx -t
│   └── 4. 重启 Nginx：sudo systemctl reload nginx
│
├── 配置域名（本地测试）
│   ├── 1. 编辑 hosts：sudo vi /etc/hosts
│   ├── 2. 添加映射：192.168.31.77 site1.com
│   ├── 3. 测试解析：ping site1.com
│   └── 4. 验证配置正确
│
├── 上传文件
│   ├── 1. 连接 FTP 服务器
│   ├── 2. 上传 dist 目录内容
│   ├── 3. 目标路径：/home/website/project-front-vue3
│   └── 4. 验证文件上传成功
│
└── 测试访问
    ├── 1. 浏览器访问：http://site1.com
    ├── 2. 检查页面显示
    ├── 3. 检查路由跳转
    └── 4. 检查静态资源加载

5.2 完整命令清单

本地操作命令：

bash

#  构建项目
cd vue3-project
npm run build

#  查看 dist 目录
ls dist/
# index.html  assets/  favicon.ico

#  测试 hosts 配置（Mac/Linux）
sudo vi /etc/hosts
# 添加：192.168.31.77 site1.com

#  测试域名解析
ping site1.com
# PING site1.com (192.168.31.77)

服务器操作命令：

bash

#  连接服务器
ssh user@192.168.31.77

#  更新软件源
sudo apt update

#  安装 Nginx
sudo apt install nginx -y

#  查看 Nginx 状态
sudo systemctl status nginx

#  查找 Nginx 配置文件
sudo find / -name nginx.conf
# /etc/nginx/nginx.conf

#  查看 Nginx 配置目录
ls /etc/nginx/conf.d/
# 创建配置文件

#  创建网站目录
sudo mkdir -p /home/website/project-front-vue3

#  创建 Nginx 配置文件
sudo vi /etc/nginx/conf.d/site1.conf
# 粘贴 Nginx 配置

#  测试 Nginx 配置
sudo nginx -t
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

#  重新加载 Nginx
sudo systemctl reload nginx

#  查看 Nginx 状态
sudo systemctl status nginx

5.3 Nginx 配置完整示例

nginx

# /etc/nginx/conf.d/site1.conf

#  HTTP 配置（端口 80）
server {
    listen 80;
    server_name site1.com;
    
    #  网站根目录
    root /home/website/project-front-vue3;
    index index.html;
    
    #  访问日志
    access_log /var/log/nginx/site1.access.log;
    
    #  错误日志
    error_log /var/log/nginx/site1.error.log;
    
    #  主要 location 配置
    location / {
        #  支持 Vue Router history 模式
        try_files $uri $uri/ /index.html;
    }
    
    #  静态资源缓存（1 年）
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    #  Gzip 压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
    
    #  禁止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

#  HTTPS 配置（可选，需要 SSL 证书）
# server {
#     listen 443 ssl http2;
#     server_name site1.com;
#
#     # SSL 证书
#     ssl_certificate /etc/letsencrypt/live/site1.com/fullchain.pem;
#     ssl_certificate_key /etc/letsencrypt/live/site1.com/privkey.pem;
#
#     # SSL 配置
#     ssl_protocols TLSv1.2 TLSv1.3;
#     ssl_ciphers HIGH:!aNULL:!MD5;
#     ssl_prefer_server_ciphers on;
#
#     # 其他配置同上
#     root /home/website/project-front-vue3;
#     index index.html;
#
#     location / {
#         try_files $uri $uri/ /index.html;
#     }
# }

六、常见问题与解决方案

6.1 Nginx 配置问题

问题一：Nginx 配置语法错误

bash

#  错误现象
sudo nginx -t
# nginx: [emerg] unexpected "}" in /etc/nginx/conf.d/site1.conf:20

#  解决方案
# 1. 检查配置文件语法
# 2. 检查是否缺少分号
# 3. 检查大括号是否匹配
# 4. 使用 nginx -t 测试配置

问题二：404 Not Found

bash

#  错误现象
# 浏览器访问返回 404

#  排查步骤
# 1. 检查 root 路径是否正确
ls /home/website/project-front-vue3/

# 2. 检查 index.html 是否存在
ls /home/website/project-front-vue3/index.html

# 3. 检查文件权限
sudo chmod 755 /home/website/project-front-vue3
sudo chmod 644 /home/website/project-front-vue3/index.html

# 4. 检查 Nginx 用户
ps aux | grep nginx
# 确保工作进程用户有权限访问文件

问题三：403 Forbidden

bash

#  错误现象
# 浏览器访问返回 403

#  排查步骤
# 1. 检查文件权限
ls -la /home/website/project-front-vue3/

# 2. 修改文件权限
sudo chmod -R 755 /home/website/project-front-vue3/

# 3. 检查 SELinux（CentOS）
getenforce
# Enforcing

# 临时关闭 SELinux
sudo setenforce 0

# 永久关闭 SELinux
sudo vi /etc/selinux/config
# SELINUX=disabled

6.2 域名解析问题

问题一：域名无法解析

bash

#  错误现象
ping site1.com
# ping: cannot resolve site1.com: Unknown host

#  解决方案
# 1. 检查 hosts 文件
cat /etc/hosts

# 2. 检查 DNS 配置
cat /etc/resolv.conf

# 3. 使用公共 DNS
sudo vi /etc/resolv.conf
# nameserver 8.8.8.8
# nameserver 8.8.4.4

问题二：DNS 解析慢

bash

#  解决方案
# 1. 使用更快的 DNS 服务器
# 2. 清除 DNS 缓存
sudo systemctl restart systemd-resolved  # Ubuntu 18.04+
sudo systemctl restart nscd              # CentOS

# 3. 使用 dig 测试解析速度
dig site1.com

6.3 文件上传问题

问题一：文件上传失败

bash

#  错误现象
# FTP 上传失败或超时

#  解决方案
# 1. 检查服务器 SSH 服务
sudo systemctl status ssh

# 2. 检查防火墙
sudo ufw status
sudo ufw allow 22

# 3. 检查磁盘空间
df -h

# 4. 检查目录权限
ls -la /home/website/
sudo chmod 755 /home/website/

问题二：文件权限问题

bash

#  解决方案
# 1. 修改目录所有者
sudo chown -R www-data:www-data /home/website/project-front-vue3/

# 2. 修改目录权限
sudo chmod -R 755 /home/website/project-front-vue3/

# 3. 修改文件权限
sudo find /home/website/project-front-vue3/ -type f -exec chmod 644 {} \;

七、最佳实践总结

7.1 部署最佳实践

code

前端项目部署最佳实践：
│
├── 1. 构建优化
│   ├── 开启 Gzip 压缩
│   ├── 开启代码分割
│   ├── 使用 CDN 加速静态资源
│   └── 使用缓存策略
│
├── 2. Nginx 配置优化
│   ├── 开启 Gzip 压缩
│   ├── 配置静态资源缓存
│   ├── 配置 HTTP/2
│   └── 配置 SSL/HTTPS
│
├── 3. 安全性
│   ├── 使用 HTTPS
│   ├── 配置 CSP（内容安全策略）
│   ├── 禁止访问隐藏文件
│   └── 配置防火墙
│
├── 4. 监控与日志
│   ├── 配置访问日志
│   ├── 配置错误日志
│   ├── 使用 PM2 监控（SSR）
│   └── 使用日志分析工具
│
└── 5. 自动化部署
    ├── 使用 CI/CD（GitHub Actions、GitLab CI）
    ├── 使用自动化脚本
    ├── 使用 Docker 容器化
    └── 使用 Kubernetes 编排

7.2 Nginx 配置最佳实践

code

Nginx 配置最佳实践：
│
├── 1. 性能优化
│   ├── 开启 Gzip 压缩
│   ├── 配置静态资源缓存
│   ├── 开启 HTTP/2
│   └── 使用 CDN
│
├── 2. 安全配置
│   ├── 隐藏 Nginx 版本号
│   ├── 配置 SSL/HTTPS
│   ├── 禁止访问隐藏文件
│   └── 配置安全响应头
│
├── 3. 日志管理
│   ├── 配置访问日志
│   ├── 配置错误日志
│   ├── 日志轮转
│   └── 日志分析
│
└── 4. 负载均衡
    ├── 配置 upstream
    ├── 配置健康检查
    ├── 配置负载均衡策略
    └── 配置会话保持

7.3 PM2 最佳实践

code

PM2 最佳实践：
│
├── 1. 进程管理
│   ├── 使用配置文件管理
│   ├── 配置集群模式
│   ├── 配置自动重启
│   └── 配置开机自启
│
├── 2. 日志管理
│   ├── 配置日志文件路径
│   ├── 配置日志格式
│   ├── 配置日志轮转
│   └── 使用日志分析工具
│
├── 3. 监控
│   ├── 使用 PM2 monit 监控
│   ├── 使用 PM2 Plus（付费）
│   ├── 配置告警
│   └── 性能监控
│
└── 4. 高可用
    ├── 多进程集群
    ├── 负载均衡
    ├── 自动重启
    └── 异常恢复

八、命令速查表

8.1 Nginx 命令速查

命令	说明
安装与启动
`sudo apt install nginx`	安装 Nginx
`sudo systemctl start nginx`	启动 Nginx
`sudo systemctl stop nginx`	停止 Nginx
`sudo systemctl restart nginx`	重启 Nginx
`sudo systemctl reload nginx`	重新加载配置
`sudo systemctl status nginx`	查看 Nginx 状态
`sudo systemctl enable nginx`	设置开机自启
配置与测试
`sudo nginx -t`	测试配置文件语法
`sudo find / -name nginx.conf`	查找配置文件
`sudo vi /etc/nginx/nginx.conf`	编辑配置文件
日志查看
`sudo tail -f /var/log/nginx/access.log`	查看访问日志
`sudo tail -f /var/log/nginx/error.log`	查看错误日志

8.2 PM2 命令速查

命令	说明
安装与启动
`npm install -g pm2`	安装 PM2
`pm2 start server.js`	启动应用
`pm2 start server.js --name my-app`	启动应用并命名
`pm2 start ecosystem.config.js`	使用配置文件启动
`pm2 start server.js -i max`	集群模式启动
管理应用
`pm2 stop my-app`	停止应用
`pm2 restart my-app`	重启应用
`pm2 delete my-app`	删除应用
`pm2 reload my-app`	重载应用（零停机）
查看与监控
`pm2 list`	查看所有应用
`pm2 show my-app`	查看应用详情
`pm2 logs my-app`	查看应用日志
`pm2 monit`	监控面板
`pm2 describe my-app`	查看应用详细信息
开机自启
`pm2 startup`	生成开机自启命令
`pm2 save`	保存当前应用列表

8.3 文件操作命令速查

命令	说明
文件上传
`scp -r dist/* user@server:/path/`	使用 SCP 上传
`rsync -avz dist/ user@server:/path/`	使用 rsync 同步
文件权限
`chmod 755 directory`	修改目录权限
`chmod 644 file`	修改文件权限
`chown -R user:group directory`	修改文件所有者
文件查找
`find / -name nginx.conf`	查找文件
`ls -la directory`	查看文件详情
`du -sh directory`	查看目录大小

九、学习要点总结

9.1 核心知识点

code

前端项目打包与部署核心要点：
│
├── 1. 部署场景理解 
│   ├── SPA：静态文件部署
│   ├── SSG：静态文件部署
│   ├── SSR：Node.js + PM2 部署
│   └── 区分不同场景的部署方式
│
├── 2. Nginx 配置 
│   ├── 安装 Nginx
│   ├── 配置虚拟主机
│   ├── 配置域名
│   ├── 配置反向代理
│   └── 测试与重启
│
├── 3. 域名配置 
│   ├── 本地 hosts 配置
│   ├── DNS 解析配置
│   └── 域名购买与管理
│
├── 4. 文件上传 
│   ├── FTP 工具使用
│   ├── SCP 命令使用
│   └── rsync 命令使用
│
├── 5. PM2 进程管理 
│   ├── PM2 安装
│   ├── PM2 启动应用
│   ├── PM2 集群模式
│   └── PM2 开机自启
│
└── 6. 部署流程 
    ├── 构建、上传、配置、测试
    └── 完整部署流程掌握

9.2 重要程度标注

知识点	重要程度	说明
部署场景区分		必须掌握，理解不同场景
Nginx 配置		必须掌握，核心技能
域名配置		重要，生产环境必备
文件上传		重要，部署基础操作
PM2 进程管理		必须掌握，SSR 部署核心
部署流程		必须掌握，完整流程

9.3 学习路径规划

code

学习路径规划：
│
├── 第一阶段：理解概念（1 天）
│   ├── 理解三种部署场景
│   ├── 理解 Nginx 的作用
│   ├── 理解域名解析原理
│   └── 理解 PM2 的作用
│
├── 第二阶段：实践操作（2-3 天）
│   ├── 搭建服务器环境
│   ├── 配置 Nginx
│   ├── 部署 SPA 项目
│   └── 部署 SSR 项目
│
└── 第三阶段：深入应用（持续）
    ├── CI/CD 自动化部署
    ├── Docker 容器化部署
    ├── Kubernetes 编排
    └── 高可用架构设计

十、完整代码清单

10.1 Nginx 配置完整代码

nginx

# /etc/nginx/conf.d/site1.conf

server {
    listen 80;
    server_name site1.com;
    
    root /home/website/project-front-vue3;
    index index.html;
    
    access_log /var/log/nginx/site1.access.log;
    error_log /var/log/nginx/site1.error.log;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
    
    location ~ /\. {
        deny all;
    }
}

10.2 PM2 配置完整代码

javascript

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'my-app',
      script: './server.js',
      instances: 'max',
      exec_mode: 'cluster',
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
      },
      error_file: './logs/err.log',
      out_file: './logs/out.log',
      log_date_format: 'YYYY-MM-DD HH:mm:ss',
    },
  ],
}

10.3 部署脚本完整代码

bash

#!/bin/bash

#  部署脚本

# 配置变量
SERVER_USER="user"
SERVER_IP="192.168.31.77"
SERVER_PATH="/home/website/project-front-vue3"
LOCAL_PATH="dist"

#  构建项目
echo "Building project..."
npm run build

#  上传文件
echo "Uploading files..."
rsync -avz --delete $LOCAL_PATH/ $SERVER_USER@$SERVER_IP:$SERVER_PATH/

#  重新加载 Nginx
echo "Reloading Nginx..."
ssh $SERVER_USER@$SERVER_IP "sudo systemctl reload nginx"

echo "Deployment completed!"

十一、扩展阅读

11.1 CI/CD 自动化部署

使用 GitHub Actions 自动化部署：

yaml

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build project
        run: npm run build
      
      - name: Deploy to server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "dist/*"
          target: "/home/website/project-front-vue3"

11.2 Docker 容器化部署

Dockerfile 示例：

dockerfile

#  构建阶段
FROM node:18-alpine as builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

#  运行阶段
FROM nginx:alpine

COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml 示例：

yaml

version: '3.8'

services:
  web:
    build: .
    ports:
      - "80:80"
    restart: always

重要提示：前端项目部署是全栈开发的核心技能，掌握三种部署场景、Nginx 配置、域名配置、文件上传、PM2 进程管理，对实际项目部署非常重要！推荐使用 CI/CD 自动化部署和 Docker 容器化部署，提高部署效率和可靠性！

下节预告：SSR 项目部署实战，深入学习 Next.js/Nuxt.js SSR 部署、PM2 集群模式、Nginx 反向代理、负载均衡配置等高级应用！

笔记已按照您的格式规范整理完成，可直接用于学习复习！