tyc-webview-v2/DEPLOYMENT_GUIDE.md

# 天远查 SEO 静态页面部署指南

本文档提供完整的 SEO 静态页面生成和部署方案。

## 📋 目录

- [快速开始](#快速开始)
- [文件结构](#文件结构)
- [生成静态页面](#生成静态页面)
- [部署到生产环境](#部署到生产环境)
- [验证SEO效果](#验证seo效果)
- [维护和更新](#维护和更新)

---

## 🚀 快速开始

### 1. 生成静态页面

```bash
# 进入项目目录
cd C:\Users\a1726\Desktop\tyc\tyc-webview-v2

# 运行生成器
node scripts\seo-static-generator\run.js
```

生成成功后，会在 `scripts\seo-static-generator\static-pages\` 目录生成：

- ✅ 10 个静态HTML页面
- ✅ sitemap.xml
- ✅ robots.txt

### 2. 生成服务器配置

```bash
# 生成 Nginx 和 Apache 配置
node scripts\seo-static-generator\generateNginxConfig.js
```

生成成功后，会创建：

- ✅ nginx.conf (Nginx配置)
- ✅ .htaccess (Apache配置)

---

## 📁 文件结构

```
tyc-webview-v2/
├── scripts/
│   └── seo-static-generator/
│       ├── run.js                    # 主生成脚本（推荐使用）
│       ├── generateStaticPages.js    # 完整生成脚本
│       ├── pageTemplates.js          # 页面模板
│       ├── crawlerMiddleware.js      # 爬虫检测中间件
│       ├── generateNginxConfig.js    # 配置生成脚本
│       ├── package.json              # 项目配置
│       ├── README.md                 # 详细文档
│       ├── index.html                # 示例页面
│       ├── nginx.conf               # Nginx配置（生成）
│       ├── .htaccess                 # Apache配置（生成）
│       └── static-pages/             # 生成的静态页面
│           ├── index.html
│           ├── inquire-category-lawsuit.html
│           ├── inquire-marriage.html
│           ├── inquire-category-vehicle.html
│           ├── inquire-category-marriageStatus.html
│           ├── agent.html
│           ├── help.html
│           ├── example.html
│           ├── service.html
│           ├── inquire.html
│           ├── sitemap.xml
│           └── robots.txt
├── SEO_INTEGRATION.md                 # 集成指南
└── DEPLOYMENT_GUIDE.md               # 本文档
```

---

## 🔨 生成静态页面

### 方式一：使用简化脚本（推荐）

```bash
node scripts\seo-static-generator\run.js
```

**优点：**
- 兼容性更好
- 输出更清晰
- 错误处理更完善

### 方式二：使用完整脚本

```bash
node scripts\seo-static-generator\generateStaticPages.js
```

**包含功能：**
- 生成所有路由页面
- 生成额外的路由页面
- 生成sitemap.xml
- 生成robots.txt

---

## 🌐 部署到生产环境

### 方式一：Nginx 部署（推荐）

#### 步骤 1：准备文件

```bash
# 1. 生成静态页面
node scripts\seo-static-generator\run.js

# 2. 生成 Nginx 配置
node scripts\seo-static-generator\generateNginxConfig.js
```

#### 步骤 2：修改 Nginx 配置

编辑 `scripts\seo-static-generator\nginx.conf`，修改以下路径：

```nginx
server_name www.tianyuancha.cn;           # 修改为你的域名
spaRoot /var/www/tyc-webview-v2/dist;   # 修改为SPA静态文件目录
staticRoot /var/www/tyc-webview-v2/static-pages; # 修改为SEO页面目录
```

#### 步骤 3：上传文件到服务器

```bash
# 上传 SPA 构建文件
scp -r dist/* user@server:/var/www/tyc-webview-v2/dist/

# 上传 SEO 静态页面
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/

# 上传 Nginx 配置
scp scripts/seo-static-generator/nginx.conf user@server:/etc/nginx/sites-available/tyc-webview
```

#### 步骤 4：配置 Nginx

```bash
# SSH 登录到服务器
ssh user@server

# 创建软链接
sudo ln -s /etc/nginx/sites-available/tyc-webview /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 如果测试通过，重载 Nginx
sudo nginx -s reload
```

#### 步骤 5：验证部署

```bash
# 模拟百度爬虫
curl -A "Baiduspider" http://www.tianyuancha.cn/

# 模拟 Google 爬虫
curl -A "Googlebot" http://www.tianyuancha.cn/

# 正常浏览器访问
curl -A "Mozilla/5.0" http://www.tianyuancha.cn/
```

### 方式二：Apache 部署

#### 步骤 1：准备文件

```bash
# 1. 生成静态页面
node scripts\seo-static-generator\run.js

# 2. 生成 Apache 配置
node scripts\seo-static-generator\generateNginxConfig.js
```

#### 步骤 2：上传文件到服务器

```bash
# 上传 SPA 构建文件
scp -r dist/* user@server:/var/www/tyc-webview-v2/

# 上传 SEO 静态页面
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/

# 上传 .htaccess
scp scripts/seo-static-generator/.htaccess user@server:/var/www/tyc-webview-v2/
```

#### 步骤 3：启用 mod_rewrite

```bash
# SSH 登录到服务器
ssh user@server

# 启用 mod_rewrite
sudo a2enmod rewrite

# 重启 Apache
sudo systemctl restart apache2
```

#### 步骤 4：验证部署

```bash
# 模拟百度爬虫
curl -A "Baiduspider" http://www.tianyuancha.cn/

# 模拟 Google 爬虫
curl -A "Googlebot" http://www.tianyuancha.cn/

# 正常浏览器访问
curl -A "Mozilla/5.0" http://www.tianyuancha.cn/
```

---

## ✅ 验证 SEO 效果

### 1. 测试爬虫检测

在本地或服务器上运行以下命令：

```bash
# 测试百度爬虫
curl -A "Baiduspider" http://www.tianyuancha.cn/ | head -20

# 测试 Google 爬虫
curl -A "Googlebot" http://www.tianyuancha.cn/ | head -20

# 测试 360 爬虫
curl -A "360spider" http://www.tianyuancha.cn/ | head -20

# 测试搜狗爬虫
curl -A "sogou spider" http://www.tianyuancha.cn/ | head -20

# 测试正常用户
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" http://www.tianyuancha.cn/ | head -20
```

**预期结果：**
- 爬虫访问应该返回静态HTML页面（包含完整的TDK）
- 正常用户访问应该返回SPA应用

### 2. 验证 TDK 标签

检查生成的静态页面是否包含完整的SEO标签：

```bash
# 查看生成的首页
cat scripts/seo-static-generator/static-pages/index.html | grep -E "<title>|<meta name=\"description\"|<meta name=\"keywords\""
```

**预期输出：**
```html
<title>天远查官网_企业与婚姻关联风险核验_综合履约背景核验</title>
<meta name="description" content="天远查官网...">
<meta name="keywords" content="天远查,婚姻状态风险...">
```

### 3. 使用在线工具验证

#### Google Rich Results Test
访问：https://search.google.com/test/rich-results
输入你的网站URL，测试结构化数据。

#### 百度移动适配测试
访问：http://ziyuan.baidu.com/
测试移动端适配和SEO。

#### Schema Markup Validator
访问：https://validator.schema.org/
验证结构化数据格式。

---

## 🔄 维护和更新

### 更新 SEO 配置

#### 步骤 1：修改配置

编辑 `scripts\seo-static-generator\run.js` 中的 `seoConfigs`：

```javascript
const seoConfigs = {
    '/': {
        title: '新的页面标题',
        description: '新的页面描述',
        keywords: '新的关键词'
    },
    // ... 其他路由
};
```

#### 步骤 2：重新生成静态页面

```bash
node scripts\seo-static-generator\run.js
```

#### 步骤 3：部署到服务器

```bash
# 上传更新的静态页面
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
```

### 添加新的路由页面

#### 步骤 1：添加路由配置

在 `scripts\seo-static-generator\run.js` 的 `seoConfigs` 中添加：

```javascript
const seoConfigs = {
    // ... 现有路由
    '/new-route': {
        title: '新页面标题',
        description: '新页面描述',
        keywords: '关键词1,关键词2'
    }
};
```

#### 步骤 2：添加页面内容（可选）

编辑 `scripts\seo-static-generator\pageTemplates.js`，添加内容生成函数：

```javascript
function generateNewRouteContent(seoConfig) {
    return `
        <h2>新页面标题</h2>
        <p>这里写页面的具体内容...</p>
    `;
}

// 添加到路由映射
export function generateContentByRoute(path, seoConfig) {
    const routeContentMap = {
        // ... 现有路由
        '/new-route': generateNewRouteContent(seoConfig),
    };
    return routeContentMap[path] || generateDefaultContent(seoConfig);
}
```

#### 步骤 3：重新生成和部署

```bash
# 重新生成
node scripts\seo-static-generator\run.js

# 部署到服务器
scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
```

---

## 🔧 集成到 CI/CD

在 CI/CD 流程中自动生成和部署静态页面。

### GitHub Actions 示例

创建 `.github/workflows/deploy.yml`：

```yaml
name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'

    - name: Install dependencies
      run: npm install

    - name: Build Vue project
      run: npm run build

    - name: Generate SEO pages
      run: node scripts/seo-static-generator/run.js

    - name: Deploy to server
      uses: easingthemes/ssh-deploy@v2.1.5
      env:
        SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
        REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
        REMOTE_USER: ${{ secrets.REMOTE_USER }}
        TARGET: /var/www/tyc-webview-v2/
      with:
        SOURCE: "dist/ scripts/seo-static-generator/static-pages/"
        ARGS: "-rlgoDzvc -i"
```

### Jenkins Pipeline 示例

创建 `Jenkinsfile`：

```groovy
pipeline {
    agent any

    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }

        stage('Install') {
            steps {
                sh 'npm install'
            }
        }

        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }

        stage('Generate SEO') {
            steps {
                sh 'node scripts/seo-static-generator/run.js'
            }
        }

        stage('Deploy') {
            steps {
                sh '''
                    scp -r dist/* user@server:/var/www/tyc-webview-v2/dist/
                    scp -r scripts/seo-static-generator/static-pages/* user@server:/var/www/tyc-webview-v2/static-pages/
                '''
            }
        }
    }
}
```

---

## 📊 监控和日志

### Nginx 日志

```bash
# 查看访问日志
sudo tail -f /var/log/nginx/tyc-webview-access.log

# 查看错误日志
sudo tail -f /var/log/nginx/tyc-webview-error.log

# 查看爬虫访问记录
grep -i "googlebot\|baiduspider" /var/log/nginx/tyc-webview-access.log
```

### Apache 日志

```bash
# 查看访问日志
sudo tail -f /var/log/apache2/access.log

# 查看错误日志
sudo tail -f /var/log/apache2/error.log

# 查看爬虫访问记录
grep -i "googlebot\|baiduspider" /var/log/apache2/access.log
```

---

## ❓ 常见问题

### Q1: 静态页面没有生成？

**A:** 检查以下几点：
1. 确保 Node.js 版本 >= 14
2. 检查是否有文件写入权限
3. 查看控制台错误信息
4. 尝试使用 `run.js` 脚本而不是 `generateStaticPages.js`

### Q2: Nginx 配置不生效？

**A:** 检查以下几点：
1. 确保 Nginx 已重启：`sudo nginx -s reload`
2. 检查配置文件语法：`sudo nginx -t`
3. 查看 Nginx 错误日志：`sudo tail -f /var/log/nginx/error.log`
4. 确保静态文件路径正确

### Q3: 爬虫仍然看到的是 SPA？

**A:** 检查以下几点：
1. 确认 User-Agent 匹配规则正确
2. 检查 Nginx/Apache 配置是否正确加载
3. 使用 curl 测试爬虫访问
4. 清除浏览器缓存后重试

### Q4: 如何处理动态内容？

**A:** 对于需要动态内容的页面，可以考虑：
1. 使用定时任务定期重新生成静态页面
2. 在静态页面中添加 JavaScript，让正常用户访问时加载动态内容
3. 考虑使用动态渲染服务（方案三）

### Q5: 如何测试 SEO 效果？

**A:** 使用以下工具：
1. Google Rich Results Test: https://search.google.com/test/rich-results
2. 百度移动适配测试: http://ziyuan.baidu.com/
3. Schema Markup Validator: https://validator.schema.org/

---

## 📚 相关文档

- [详细使用文档](scripts/seo-static-generator/README.md)
- [集成指南](SEO_INTEGRATION.md)
- [useSEO.js 源码](src/composables/useSEO.js)

---

## 🆘 技术支持

如有问题，请联系技术团队或提交 Issue。

---

## 📄 许可证

MIT