如何在单个域上部署自适应 Next Js 网站？

Question

我用 Next js 构建了一个自适应网站；它有两个版本，一个用于移动设备，另一个用于桌面设备。两个版本都是部署在两个不同环境中的独立 Nextjs 项目。我想将两者部署在同一域上并根据用户代理加载各自的版本。

示例： www.test.com 如果找到移动用户代理，将加载移动网站，否则桌面网站

我可以加载网站的相应版本如果我有一个子域，例如移动版本的“m.test.com”和桌面版本的“test.com”（为此，我在 next.config 中添加了重定向逻辑。基于 User-Agent 的 Node.js）。

我不知道在哪里编写逻辑来渲染基于同一域上的用户代理的特定构建。

Answer 1

如果您有两个不同的节点应用程序正在运行，并且想要基于用户代理进行重定向，您可以使用 nginx 的 $http_user_agent 之类的东西来重写到您的应用程序可以侦听的不同端口：

http {
  map $http_user_agent $ua_port {
    default '3000';             # port 3000 for your desktop App
    ~(iPhone|Android) '4000';   # port 4000 for mobile App
  }

  server {
    location / {
        proxy_pass http://localhost:$ua_port;   # proxy_pass to port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
  }
}