DEPLOYMENT.md 4.3 KB

Anycall 部署指南

URL 格式说明

✅ 推荐使用独立页面URL

FAQ和Contact现在都是独立页面,推荐使用以下格式:

推荐格式:

  • https://www.anycall.online/faq - FAQ页面
  • https://www.anycall.online/contact - Contact页面
  • https://www.anycall.online/about - About页面
  • https://www.anycall.online/blog - Blog页面
  • https://www.anycall.online/careers - Careers页面
  • https://www.anycall.online/privacy - Privacy Policy
  • https://www.anycall.online/terms - Terms of Service

传统Hash锚点格式(仅用于首页内部导航)

在首页内部导航时,可以使用hash锚点:

正确格式:

  • https://www.anycall.online/#features - 首页Features部分

不再推荐:

  • https://www.anycall.online/#contact - 请改用 /contact
  • https://www.anycall.online/#faq - 请改用 /faq

为什么需要 /

在URL中,hash片段(#后面的部分)必须在路径之后。标准的URL结构是:

protocol://domain/path#hash

如果路径为根路径,也必须包含 /

protocol://domain/#hash

部署配置

Vercel 部署

项目包含 vercel.json 配置文件,它会:

  1. 将所有请求重写到 index.html(支持SPA路由)
  2. 添加安全header

Netlify 部署

项目包含 _redirectspublic/_redirects 配置文件,它会:

  1. 将所有请求重定向到 index.html with 200 status(支持SPA路由)

自定义服务器

如果使用自定义服务器(如Nginx或Apache),需要配置:

Nginx 配置示例:

server {
    listen 80;
    server_name anycall.online www.anycall.online;

    root /var/www/anycall;
    index index.html;

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

    # 确保hash片段被正确处理
    location ~ ^/[^/]*#.* {
        rewrite ^(.*)$ / permanent;
    }
}

Apache .htaccess 配置示例:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    
    # 处理所有请求到 index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Hash 锚点实现

项目使用以下机制确保hash锚点正常工作:

  1. RouterContext.tsx: 多层hash处理逻辑

    • 初始加载时检测hash
    • 页面变化时保持hash
    • 重试机制(最多10次,每次间隔100ms)
  2. App.tsx: 额外的页面加载后处理

    • 监听window.load事件
    • 确保所有资源加载完成后滚动
  3. globals.css: scroll-margin-top配置

    • 移动端:7rem (112px)
    • 平板端:7.5rem (120px)
    • 桌面端:8rem (128px)

测试URL

部署后,请测试以下URL:

  1. 首页

  2. 独立页面(推荐)

  3. 首页内部导航(Hash锚点)

故障排查

页面导航不工作?

  1. 检查URL格式

    • 使用完整路径:/faq 而不是 /#faq
    • 独立页面无需hash符号
  2. 检查浏览器控制台

    • 打开开发者工具查看console.log
    • RouterContext会输出调试信息
  3. 清除浏览器缓存

    • 按 Ctrl+Shift+R (Windows) 或 Cmd+Shift+R (Mac)
    • 或使用无痕模式测试
  4. 清除浏览器缓存

    • 按 Ctrl+Shift+R (Windows) 或 Cmd+Shift+R (Mac)

URL重定向问题?

  1. 检查服务器配置

    • 确保服务器正确配置了SPA重写规则
  2. 检查DNS设置

    • 确保 anycall.onlinewww.anycall.online 都正确解析
  3. 检查HTTPS重定向

    • 确保HTTP自动重定向到HTTPS

性能优化

  1. 启用Gzip压缩
  2. 启用浏览器缓存
  3. 使用CDN
  4. 图片优化

安全配置

项目已包含以下安全header(在vercel.json中):

  • X-Content-Type-Options: nosniff
  • X-Frame-Options: DENY
  • X-XSS-Protection: 1; mode=block

建议添加:

  • HTTPS强制(HSTS header)
  • Content-Security-Policy