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

Question

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

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

我可以加载网站的相应版本如果我有一个子域，例如移动版本的“m.test.com”和桌面版本的“test.com”（对于我在 next.config.js 中添加了基于 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;
    }
  }
}

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

How to deploy adaptive Next Js website on a single domain?

javascript

reactjs

amazon-ec2

next.js