跨服务器多语言网站部署指南

🌐 架构概述

本项目支持中英文版本部署在不同服务器上，通过智能映射系统实现无缝的语言切换体验。

📋 推荐部署架构

中文站点: ls-ai.cn
├── 服务器: 国内服务器 (更快的中文用户访问)
├── 内容: 中文版本 (/)
└── 备案: 中国ICP备案

英文站点: flareseek.com  
├── 服务器: 海外服务器 (更快的国际用户访问)
├── 内容: 英文版本 (/en/)
└── 备案: 无需中国备案

🔧 配置步骤

1. 域名配置

不同主域名配置

bash

# 中文站点
ls-ai.cn → 国内服务器IP
www.ls-ai.cn → 国内服务器IP

# 英文站点  
flareseek.com → 海外服务器IP
www.flareseek.com → 海外服务器IP

2. 服务器配置

中文服务器 (国内)

nginx

# /etc/nginx/sites-available/ls-ai.cn
server {
    listen 80;
    listen 443 ssl http2;
    server_name ls-ai.cn www.ls-ai.cn;
    
    # SSL配置
    ssl_certificate /path/to/ls-ai.cn.crt;
    ssl_certificate_key /path/to/ls-ai.cn.key;
    
    # 网站根目录
    root /var/www/ls-ai.cn;
    index index.html;
    
    # 静态文件缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # 处理SPA路由
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 跨域头配置 (用于语言切换)
    add_header Access-Control-Allow-Origin "https://flareseek.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
}

英文服务器 (海外)

nginx

# /etc/nginx/sites-available/flareseek.com
server {
    listen 80;
    listen 443 ssl http2;
    server_name flareseek.com www.flareseek.com;
    
    # SSL配置
    ssl_certificate /path/to/flareseek.com.crt;
    ssl_certificate_key /path/to/flareseek.com.key;
    
    # 网站根目录
    root /var/www/flareseek.com;
    index index.html;
    
    # 静态文件缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # 处理SPA路由
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 跨域头配置 (用于语言切换)
    add_header Access-Control-Allow-Origin "https://ls-ai.cn";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
}

3. 构建配置

中文版构建 (部署到国内服务器)

bash

# package.json - 中文版构建脚本
{
  "scripts": {
    "build:cn": "vitepress build --base=/ --outDir=dist-cn",
    "deploy:cn": "npm run build:cn && rsync -avz dist-cn/ user@cn-server:/var/www/ls-ai.cn/"
  }
}

英文版构建 (部署到海外服务器)

bash

# package.json - 英文版构建脚本
{
  "scripts": {
    "build:en": "vitepress build --base=/ --outDir=dist-en",
    "deploy:en": "npm run build:en && rsync -avz dist-en/ user@en-server:/var/www/flareseek.com/"
  }
}

4. VitePress配置更新

typescript

// .vitepress/config.mts
export default defineConfig({
  // 基础配置
  base: '/',
  
  // 多语言配置
  locales: {
    root: {
      label: '简体中文',
      lang: 'zh-CN',
      title: "类视搜图",
      // 中文版配置...
    },
    // 注意: 英文版在独立服务器上，这里的 /en/ 配置主要用于开发
    en: {
      label: 'English', 
      lang: 'en-US',
      title: "FlareSeek",
      // 英文版配置...
    }
  },
  
  // 构建配置
  vite: {
    define: {
      // 运行时域名配置
      __CHINESE_DOMAIN__: JSON.stringify('ls-ai.cn'),
      __ENGLISH_DOMAIN__: JSON.stringify('flareseek.com')
    }
  }
})

5. 跨域映射脚本部署

将 crossDomainMapping.js 复制到两个服务器的 /scripts/ 目录：

bash

# 中文服务器
cp .vitepress/scripts/crossDomainMapping.js /var/www/ls-ai.cn/scripts/

# 英文服务器  
cp .vitepress/scripts/crossDomainMapping.js /var/www/flareseek.com/scripts/

🚀 部署流程

自动化部署脚本

bash

#!/bin/bash
# deploy.sh - 自动化部署脚本

echo "🚀 开始部署多语言网站..."

# 1. 构建中文版
echo "📦 构建中文版..."
npm run build:cn

# 2. 构建英文版 (移除中文内容)
echo "📦 构建英文版..."
# 临时移除中文路由，只保留英文内容
npm run build:en

# 3. 部署到中文服务器
echo "🇨🇳 部署到中文服务器..."
rsync -avz --delete dist-cn/ user@ls-ai.cn:/var/www/ls-ai.cn/
ssh user@ls-ai.cn "sudo systemctl reload nginx"

# 4. 部署到英文服务器
echo "🇺🇸 部署到英文服务器..."
rsync -avz --delete dist-en/ user@flareseek.com:/var/www/flareseek.com/
ssh user@flareseek.com "sudo systemctl reload nginx"

echo "✅ 部署完成!"
echo "🔗 中文站点: https://ls-ai.cn"
echo "🔗 英文站点: https://flareseek.com"

GitHub Actions 自动部署

yaml

# .github/workflows/deploy.yml
name: Deploy Multi-Language Sites

on:
  push:
    branches: [ main ]

jobs:
  deploy-chinese:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build Chinese site
        run: npm run build:cn
        
      - name: Deploy to Chinese server
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.CN_SERVER_HOST }}
          username: ${{ secrets.CN_SERVER_USER }}
          key: ${{ secrets.CN_SERVER_KEY }}
          script: |
            cd /var/www/ls-ai.cn
            git pull origin main
            npm ci
            npm run build:cn
            sudo systemctl reload nginx

  deploy-english:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build English site
        run: npm run build:en
        
      - name: Deploy to English server
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.EN_SERVER_HOST }}
          username: ${{ secrets.EN_SERVER_USER }}
          key: ${{ secrets.EN_SERVER_KEY }}
          script: |
            cd /var/www/flareseek.com
            git pull origin main
            npm ci
            npm run build:en
            sudo systemctl reload nginx

🔍 测试验证

1. 功能测试清单

[ ] 中文站点 (ls-ai.cn) 正常访问
[ ] 英文站点 (flareseek.com) 正常访问
[ ] 语言切换链接正确跳转
[ ] 自动语言检测工作正常
[ ] 跨域脚本加载成功
[ ] SEO标签正确设置
[ ] SSL证书配置正确
[ ] 页面加载速度正常

2. 测试脚本

javascript

// test-cross-domain.js - 跨域功能测试
async function testCrossDomainMapping() {
  const tests = [
    {
      name: '中文站点访问测试',
      url: 'https://ls-ai.cn',
      expectedLang: 'zh-CN'
    },
    {
      name: '英文站点访问测试', 
      url: 'https://flareseek.com',
      expectedLang: 'en-US'
    },
    {
      name: '语言切换链接测试',
      url: 'https://ls-ai.cn/docs/installation',
      expectedTarget: 'https://flareseek.com/docs/installation'
    }
  ]
  
  for (const test of tests) {
    console.log(`🧪 ${test.name}...`)
    try {
      const response = await fetch(test.url)
      console.log(`✅ ${test.name} - 状态: ${response.status}`)
    } catch (error) {
      console.log(`❌ ${test.name} - 错误: ${error.message}`)
    }
  }
}

testCrossDomainMapping()

📊 监控和维护

1. 性能监控

javascript

// 添加到两个站点的监控脚本
function trackCrossDomainPerformance() {
  // 监控语言切换性能
  const switchStart = performance.now()
  
  window.addEventListener('beforeunload', () => {
    const switchTime = performance.now() - switchStart
    
    // 发送性能数据到分析服务
    navigator.sendBeacon('/api/analytics', JSON.stringify({
      type: 'language_switch_performance',
      duration: switchTime,
      from: window.location.hostname,
      timestamp: Date.now()
    }))
  })
}

2. 错误监控

javascript

// 跨域错误监控
window.addEventListener('error', (event) => {
  if (event.filename && event.filename.includes('crossDomainMapping')) {
    console.error('Cross-domain mapping error:', event.error)
    
    // 发送错误报告
    fetch('/api/error-report', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        type: 'cross_domain_error',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        userAgent: navigator.userAgent,
        url: window.location.href,
        timestamp: Date.now()
      })
    })
  }
})

🎯 最佳实践

1. SEO优化

每个域名都有独立的sitemap.xml
使用hreflang标签指向对应语言版本
避免重复内容问题

2. 用户体验

保持语言偏好设置
提供明显的语言切换入口
确保跨域跳转的流畅性

3. 性能优化

使用CDN加速静态资源
启用Gzip压缩
优化图片和字体加载

4. 安全考虑

配置正确的CORS策略
使用HTTPS加密传输
定期更新SSL证书

通过以上配置，您就可以实现中英文网站在不同服务器上的完美映射和切换！

跨服务器多语言网站部署指南 ​

🌐 架构概述 ​

📋 推荐部署架构 ​

🔧 配置步骤 ​

1. 域名配置 ​

不同主域名配置 ​

2. 服务器配置 ​

中文服务器 (国内) ​

英文服务器 (海外) ​

3. 构建配置 ​

中文版构建 (部署到国内服务器) ​

英文版构建 (部署到海外服务器) ​

4. VitePress配置更新 ​

5. 跨域映射脚本部署 ​

🚀 部署流程 ​

自动化部署脚本 ​

GitHub Actions 自动部署 ​

🔍 测试验证 ​

1. 功能测试清单 ​

2. 测试脚本 ​

📊 监控和维护 ​

1. 性能监控 ​

2. 错误监控 ​

🎯 最佳实践 ​

1. SEO优化 ​

2. 用户体验 ​

3. 性能优化 ​

4. 安全考虑 ​

跨服务器多语言网站部署指南

🌐 架构概述

📋 推荐部署架构

🔧 配置步骤

1. 域名配置

不同主域名配置

2. 服务器配置

中文服务器 (国内)

英文服务器 (海外)

3. 构建配置

中文版构建 (部署到国内服务器)

英文版构建 (部署到海外服务器)

4. VitePress配置更新

5. 跨域映射脚本部署

🚀 部署流程

自动化部署脚本

GitHub Actions 自动部署

🔍 测试验证

1. 功能测试清单

2. 测试脚本

📊 监控和维护

1. 性能监控

2. 错误监控

🎯 最佳实践

1. SEO优化

2. 用户体验

3. 性能优化

4. 安全考虑