同一域名下双版本网站部署：Strangler Pattern与Nginx方案咨询

一、你的方案完全可行，且是Strangler Pattern的典型实践 #

首先要给你的思路点个赞——选择Strangler Pattern来渐进式重写静态网站，刚好踩中了这种模式的核心优势：低风险、平滑过渡、用户无感知。旧系统继续承接未迁移的功能，新系统逐步接管已重构的页面，同一域名下的路径拆分完全能实现你想要的效果。

用Nginx做反向代理做路径路由的方案非常适配你的场景：

• Nginx天生擅长基于URL路径、域名等规则做请求转发，配置灵活且性能拉满；
• 不管是旧Apache部署的静态站，还是新React/Gatsby生成的静态文件，都能通过Nginx的root或proxy_pass轻松对接；
• 你可以按页面、功能模块逐步切换，甚至在迁移过程中随时回滚到旧系统，完全不用担心一次性全量发布的风险。

二、是否有更优方案？ #

你的当前方案已经是静态网站渐进式迁移的最优选择之一，不过可以根据后续需求做一些补充优化：

• 静态资源逐步合并：对于旧系统中的通用静态资源（比如公共CSS、图片），可以逐步迁移到Gatsby项目中，统一由Nginx指向新的资源目录，减少重复维护成本；
• 小流量灰度测试：对于关键页面的迁移，可以用Nginx的split_clients指令让小部分用户先访问新页面，验证没问题后再全量切换，进一步降低风险；
• CDN辅助路由：如果你的网站有大量全球用户，可以在Nginx前面加CDN，利用CDN的路径规则做第一层路由，既减轻Nginx负载，又能加速静态资源分发；
• 动态扩展预留：如果未来新功能需要动态接口，可以在Nginx配置中提前预留API路径的转发规则，指向后端服务，后续扩展会更顺畅。

三、Nginx反向代理系统的实现步骤 #

下面给你一个具体的Nginx配置示例，假设：

• 旧Apache服务运行在localhost:8080（避免和Nginx的80/443端口冲突）；
• 新Gatsby构建的静态文件存放在/var/www/gatsby-app目录；
• 已迁移的路径包括/profilePage、/dashboard，未迁移的路径如/productPage.html、/old-docs等。

核心配置代码 #

server {
    listen 80;
    server_name app.com;
    # 强制跳转到HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name app.com;

    # SSL证书配置，替换成你的证书路径
    ssl_certificate /etc/nginx/ssl/app.com.crt;
    ssl_certificate_key /etc/nginx/ssl/app.com.key;

    # 配置SSL安全参数
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # 1. 处理已迁移的新功能路径（React/Gatsby单页应用）
    location ^~ /profilePage {
        root /var/www/gatsby-app;
        # 单页应用需要处理前端路由，找不到文件时返回index.html
        try_files $uri $uri/ /profilePage/index.html;
    }

    location ^~ /dashboard {
        root /var/www/gatsby-app;
        try_files $uri $uri/ /dashboard/index.html;
    }

    # 2. 处理新系统的静态资源（独立存放时）
    location ^~ /static {
        root /var/www/gatsby-app;
        expires 30d; # 设置缓存过期时间，提升性能
        add_header Cache-Control "public, immutable";
    }

    # 3. 处理未迁移的旧系统路径
    location / {
        # 反向代理到旧Apache服务
        proxy_pass http://localhost:8080;
        # 传递必要的请求头，确保旧系统能正确处理
        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;
    }

    # 可选：单独指定某个旧页面的路由（更精细的控制）
    location = /productPage.html {
        proxy_pass http://localhost:8080/productPage.html;
        proxy_set_header Host $host;
    }
}

关键配置说明 #

• ^~ 前缀表示优先匹配该路径，避免Nginx按正则匹配的规则干扰；
• Gatsby单页应用的try_files指令是核心，确保前端路由能正常工作；
• 旧系统的反向代理要传递Host等头信息，否则Apache可能无法正确识别请求；
• 静态资源设置缓存头能大幅提升用户访问速度。

四、相关学习资源 #

• Nginx官方文档：重点看反向代理、location匹配规则、SSL配置的章节，这些是你配置的核心依据；
• Martin Fowler的Strangler Pattern原文：深入理解渐进式迁移的设计思想，帮助你规划整个迁移流程；
• Gatsby部署指南：学习如何优化Gatsby静态文件的部署，包括缓存、路由处理等；
• Nginx实战教程：找一些专注于反向代理和负载均衡的实战内容，快速掌握配置技巧。

内容的提问来源于stack exchange，提问作者daydreamer