前端部署方案详解 🚀

一、认识 Nginx - 网站部署的守门员 🛡️

1. Nginx 是什么？

Nginx 就像是一个智能管家 🫅：

📝 负责接待用户的访问请求
🗂️ 管理不同请求对应的文件位置
🚦 处理大量并发访问
🔒 提供安全防护
⚡ 优化网站性能

2. Nginx 的核心功能

反向代理: 转发请求到后端服务器
负载均衡: 分配流量到多个服务器
静态资源服务: 高效处理静态文件
缓存: 提升访问速度
SSL/TLS: 支持 HTTPS 加密

3. 服务器目录结构

bash

/
├── etc/                # 配置文件目录
│   ├── nginx/         # Nginx 配置目录
│   │   ├── nginx.conf             # Nginx 主配置文件
│   │   ├── sites-available/       # 网站配置文件存放目录
│   │   │   └── your-domain.conf   # 你的网站配置(重点)
│   │   └── sites-enabled/         # 已启用的配置文件（软链接）
│   
├── var/
│   ├── www/           # 网站文件目录
│   │   ├── your-domain/          # 你的网站目录(重点)
│   │   │   ├── index.html
│   │   │   ├── css/
│   │   │   └── js/
│   ├── log/
│   │   └── nginx/    # Nginx 日志目录
│   ├── lib/          
│   │   ├── mysql/    # MySQL 数据库目录
│   │   └── mongodb/   # MongoDB 数据库目录 
│   
└── usr/
    └── share/
        └── nginx/     # Nginx 默认文件目录

4. 实际案例 Nginx 配置

1. 单页应用(SPA)配置

nginx

server {
    listen 80;
    server_name spa.example.com;
    
    root /var/www/spa;
    
    # 支持 history 路由
    location / {
        try_files $uri $uri/ /index.html;   # 文件查找顺序
        # 开启 gzip
        gzip on;
        gzip_types text/plain application/javascript text/css;
    }
    
    # 静态资源缓存
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

2. 多应用部署配置

nginx

# 主应用
server {
    listen 80;
    server_name example.com;
    
    location / {
        root /var/www/main;
        index index.html;
    }
    
    # 后端API配置
    location /api {                   # 匹配所有 /api 开头的请求
        proxy_pass http://localhost:3000;  # 转发到本地3000端口
        proxy_http_version 1.1;           # 使用HTTP 1.1协议
        proxy_set_header Upgrade $http_upgrade;        # WebSocket支持
        proxy_set_header Connection 'upgrade';         # WebSocket支持
        proxy_set_header Host $host;                  # 传递原始主机名
    }
}

# 子应用
server {
    listen 80;
    server_name blog.example.com;
    
    location / {
        root /var/www/blog;
        index index.html;
    }
}

二、部署方案分类 📦

1. 手动部署

适合小型项目或个人网站。

WinSCP 可视化部署 🖥️

对于前端工程师，如果没有 linux 的学习经验，对于命令行的使用，可能不太熟悉。所以这里首先介绍一个可视化的工具 WinSCP。

安装配置 WinSCP新建站点

下载 WinSCP
选择 SFTP 协议（更安全）

配置服务器信息：

主机：服务器IP
端口：22
用户名：root/其他用户
密码：对应密码

使用技巧
- 拖拽上传文件
- 右键编辑文件
- 保存多个站点配置
- 支持文件同步
nginx
- 配置对应的 domain 映射（domain.conf）
- 重启nginx

2. 自动化部署 🤖

适合团队协作的中大型项目。

Jenkins 部署

bash

# Jenkinsfile 示例
pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
                sh 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                sh 'rsync -avz dist/ user@server:/var/www/site/'
            }
        }
    }
}

GitHub Actions 部署

yaml

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Deploy to liuhuakawaii.icu
        uses: easingthemes/ssh-deploy@main    # 使用的是一个现成的GitHub Action，用于SSH部署
        env:
          # SSH私钥，用于免密登录服务器
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          
          # rsync命令的参数
          # -a: 归档模式，保持文件属性
          # -v: 显示详细信息
          # -z: 压缩传输
          # -r: 递归复制目录
          # --delete: 删除目标目录中有而源目录中没有的文件
          ARGS: "-avzr --delete"
          
          # 源目录：你要部署的文件所在目录
          SOURCE: "docs/.vitepress/dist"
          
          # 服务器IP地址或域名
          REMOTE_HOST: ${{ secrets.SSH_HOST }}
          
          # 服务器登录用户名
          REMOTE_USER: ${{ secrets.SSH_USERNAME }}
          
          # 服务器上的目标部署目录
          TARGET: ${{ secrets.REMOTE_DIR }}
          
          # 排除不需要传输的文件/目录
          EXCLUDE: "/dist/, /node_modules/"

确保在 GitHub 仓库的设置中，将 secrets.SSH_HOST、secrets.SSH_USERNAME 和 secrets.REMOTE_DIR 添加为 secrets。

注意事项 路径一定要注意

# 组合1
SOURCE: "docs/.vitepress/dist"  # 无斜杠
TARGET: "/var/www/enlightencode/dist"
# 结果: /var/www/enlightencode/dist/dist/[文件]

# 组合2
SOURCE: "docs/.vitepress/dist/"  # 有斜杠
TARGET: "/var/www/enlightencode/dist"
# 结果: /var/www/enlightencode/dist/[文件]

# 组合3
SOURCE: "docs/.vitepress/dist"  # 无斜杠
TARGET: "/var/www/enlightencode"
# 结果: /var/www/enlightencode/dist/[文件]

# 组合4
SOURCE: "docs/.vitepress/dist/"  # 有斜杠
TARGET: "/var/www/enlightencode"
# 结果: /var/www/enlightencode/[文件]

VitePress 博客部署注意事项 📝

1. Nginx 路由配置

VitePress 本质上是生成多个 HTML 文件来存储博客内容。如果你的链接没有 .html 后缀，需要特别注意 Nginx 的 try_files 配置。

基础配置示例

nginx

location / {
    try_files $uri $uri.html $uri/ /index.html;
}

配置解析

查找顺序：

$uri - 精确匹配请求的 URI
$uri.html - 添加 .html 后缀尝试匹配
$uri/ - 作为目录路径查找
/index.html - 以上都不存在时返回首页

2. 使用场景 🎯

静态博客部署

访问方式：/posts/hello → /posts/hello.html
优势：更友好的 URL，无需显示 .html 后缀

混合应用部署

静态页面：/blog/post-1 → blog/post-1.html
SPA 路由：/app/* → 由前端路由处理

3. 配置选择指南 ⚡

需要 `$uri.html` 的情况：

使用 VitePress/VuePress 等静态站点生成器
混合部署静态页面和 SPA
需要访问独立的 .html 文件

纯 SPA 应用配置：

nginx

location / {
    try_files $uri $uri/ /index.html;
}

4. 常见问题排查 🔍

404 错误：检查文件是否存在于正确路径
路由不匹配：确认 Nginx 配置中的查找顺序
静态资源加载失败：检查资源路径和权限设置

前端部署方案详解 🚀 ​

一、认识 Nginx - 网站部署的守门员 🛡️ ​

1. Nginx 是什么？ ​

2. Nginx 的核心功能 ​

3. 服务器目录结构 ​

4. 实际案例 Nginx 配置 ​

1. 单页应用(SPA)配置 ​

2. 多应用部署配置 ​

二、部署方案分类 📦 ​

1. 手动部署 ​

WinSCP 可视化部署 🖥️ ​

2. 自动化部署 🤖 ​

Jenkins 部署 ​

GitHub Actions 部署 ​

VitePress 博客部署注意事项 📝 ​

1. Nginx 路由配置 ​

基础配置示例 ​

配置解析 ​

2. 使用场景 🎯 ​

静态博客部署 ​

混合应用部署 ​

3. 配置选择指南 ⚡ ​

需要 $uri.html 的情况： ​

纯 SPA 应用配置： ​

4. 常见问题排查 🔍 ​

前端部署方案详解 🚀

一、认识 Nginx - 网站部署的守门员 🛡️

1. Nginx 是什么？

2. Nginx 的核心功能

3. 服务器目录结构

4. 实际案例 Nginx 配置

1. 单页应用(SPA)配置

2. 多应用部署配置

二、部署方案分类 📦

1. 手动部署

WinSCP 可视化部署 🖥️

2. 自动化部署 🤖

Jenkins 部署

GitHub Actions 部署

VitePress 博客部署注意事项 📝

1. Nginx 路由配置

基础配置示例

配置解析

2. 使用场景 🎯

静态博客部署

混合应用部署

3. 配置选择指南 ⚡

需要 `$uri.html` 的情况：

纯 SPA 应用配置：

4. 常见问题排查 🔍