前端项目打包与部署实战

前端项目部署场景分类：
│
├── 场景一：纯静态资源部署（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 环境
    └── 复杂度：较复杂

SPA 项目部署流程：
│
├── 第一步：构建项目（npm run build → dist 目录）
│   ├── Vue3：dist/
│   └── React：build/
│
├── 第二步：准备服务器（安装 Nginx、配置 Nginx、启动 Nginx）
├── 第三步：配置域名（可选，购买域名、DNS 解析、或本地 hosts）
├── 第四步：上传文件（FTP 工具上传 dist 到 Nginx 根目录）
└── 第五步：测试访问（浏览器访问域名或 IP）

cd vue3-project
npm install
npm run build

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

cd react-project
npm install
npm run build

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

sudo apt update
sudo apt install 11-Nginx基础概述 -y
sudo systemctl status 11-Nginx基础概述
sudo systemctl start 11-Nginx基础概述
sudo systemctl stop 11-Nginx基础概述
sudo systemctl restart 11-Nginx基础概述
sudo systemctl reload 11-Nginx基础概述
sudo systemctl enable 11-Nginx基础概述    # 设置开机自启

sudo yum update
sudo yum install 11-Nginx基础概述 -y
sudo systemctl status 11-Nginx基础概述
sudo systemctl enable 11-Nginx基础概述

sudo find / -name 11-Nginx基础概述.conf
# /etc/11-Nginx基础概述/11-Nginx基础概述.conf           # 主配置文件
# /etc/11-Nginx基础概述/conf.d/              # 额外配置目录
# /etc/11-Nginx基础概述/sites-available/     # 可用站点配置
# /etc/11-Nginx基础概述/sites-enabled/       # 启用站点配置

# /etc/11-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/11-Nginx基础概述/site1.access.log;

    # 错误日志
    error_log /var/log/11-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;
    }
}

# Mac/Linux
sudo vi /etc/hosts

# Windows
# 路径：C:\Windows\System32\drivers\etc\hosts

# 添加域名映射
192.168.31.77 site1.com

# 测试域名解析
ping site1.com

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

# 同步文件（增量传输）
rsync -avz dist/ user@server:/home/website/project-front-vue3/
# -a：归档模式（保留权限、时间戳等）
# -v：显示详细信息
# -z：压缩传输

# 第一步：检查 Nginx 配置
sudo 11-Nginx基础概述 -t

# 第二步：重新加载 Nginx 配置
sudo systemctl reload 11-Nginx基础概述

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

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

# 构建项目
npm run build

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

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

# 构建项目
npm run generate

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

SSR 项目部署流程：
│
├── 第一步：构建项目（npm run build → .nuxt 或 .next，入口 server.js）
├── 第二步：准备服务器（安装 Node.js、PM2、Nginx）
├── 第三步：上传文件（构建产物、package.json、npm install --omit=dev、配置环境变量）
├── 第四步：启动应用（pm2 start、pm2 save、pm2 startup）
├── 第五步：配置 Nginx 反向代理（upstream、proxy_pass、重启 Nginx）
└── 第六步：测试访问

# /etc/11-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;
    }
}

Vue3 项目部署完整流程：
├── 本地环境：编写代码 → 本地测试 → npm run build → 生成 dist
├── 服务器环境：apt update → 安装 Nginx → 查看状态 → 查找配置
├── 配置 Nginx：创建 site1.conf → 编写配置 → 11-Nginx基础概述 -t → reload
├── 配置域名（本地测试）：编辑 hosts → 添加映射 → ping 测试
├── 上传文件：连接 FTP → 上传 dist 到 /home/website/project-front-vue3
└── 测试访问：浏览器访问 → 检查页面/路由/静态资源

ssh user@192.168.31.77

sudo apt update
sudo apt install 11-Nginx基础概述 -y
sudo systemctl status 11-Nginx基础概述
sudo find / -name 11-Nginx基础概述.conf

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

# 创建 Nginx 配置文件并粘贴配置
sudo vi /etc/11-Nginx基础概述/conf.d/site1.conf

# 测试配置并重新加载
sudo 11-Nginx基础概述 -t
sudo systemctl reload 11-Nginx基础概述

# /etc/11-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/11-Nginx基础概述/site1.access.log;
    error_log /var/log/11-Nginx基础概述/site1.error.log;

    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_certificate /etc/letsencrypt/live/site1.com/fullchain.pem;
#     ssl_certificate_key /etc/letsencrypt/live/site1.com/privkey.pem;
#     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;
#     }
# }

#!/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 11-Nginx基础概述"

echo "Deployment completed!"

# 修改目录所有者与权限
sudo chown -R www-data:www-data /home/website/project-front-vue3/
sudo chmod -R 755 /home/website/project-front-vue3/
sudo find /home/website/project-front-vue3/ -type f -exec chmod 644 {} \;

# .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"

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段
FROM 11-Nginx基础概述:alpine
COPY --from=builder /app/dist /usr/share/11-Nginx基础概述/html
COPY 11-Nginx基础概述.conf /etc/11-Nginx基础概述/conf.d/default.conf
EXPOSE 80
CMD ["11-Nginx基础概述", "-g", "daemon off;"]

# docker-compose.yml
services:
  web:
    build: .
    ports:
      - "80:80"
    restart: always