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

Question

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

示例:www.test.com如果找到移动用户代理将加载移动站点，否则将加载移动站点

如果我有一个子域，例如移动版本的“m.test.com”和桌面版本的“test.com”(为此我添加了next.config.js 中基于 User-Agent 的重定向逻辑)。

我不知道在哪里编写逻辑来在同一域上呈现基于 User-Agent 的特定构建。

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;
    }
  }
}