一个 Next.js 路由中的两个不同子域

Question

我想使用Next.js（React.js和React-router）构建一个新平台。会有两个空格。一个前端用于用户，另一个用于所有者，允许他们管理所有用户。我想将两个区域分成两个子域，如下所示：

front.domain.com panel.domain.com

React-router 不支持子域路由，所以我尝试寻找另一种方法。我发现了类似的东西，但我不确定这是我想要的。请指教。

<BrowserRouter>
  <Route path="/" render={props => {
    const [subdomain] = window.location.hostname.split('.');
    if (subdomain === 'panel') return <PanelLayout {...props}/>;
    return <FrontLayout {...props}/>;
  }}/>
</BrowserRouter>

Answer 1

我设法使用自定义快递服务器创建子域。这是一个没有资产的空白应用程序，我还没有在带有资产（CSS、图像等）的真实应用程序上尝试过这个

\n

我有以下页面文件夹结构：

\n

pages/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 admin/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 sample-page.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 member/\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 accounts/\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 dashboard.js\n

\n

当您使用时，next dev这是默认的。这将产生以下路线：

\n

\n
• http://lvh.me:3000/admin
\n
• http://lvh.me:3000/admin/sample-page
\n
• http://lvh.me:3000/member
\n
• http://lvh.me:3000/member/accounts/dashboard
\n

\n

但是使用自定义server.js文件并使用它运行我们的开发服务器node server.js将产生以下路由：

\n

\n
• http://admin.lvh.me:3000
\n
• http://admin.lvh.me:3000/sample-page
\n
• http://lvh.me:3000
\n
• http://lvh.me:3000/accounts/dashboard
\n

\n

我们的文件内容server.js：

\n

const express = require(\'express\')\nconst next = require(\'next\')\nconst vhost = require(\'vhost\')\n\nconst port = process.env.PORT || 3000\nconst dev = process.env.NODE_ENV !== \'production\'\nconst app = next({ dev })\nconst handle = app.getRequestHandler()\n\napp.prepare().then(() => {\n  const mainServer = express()\n  const adminServer = express()\n  const memberServer = express()\n\n  adminServer.get(\'/\', (req, res) => {\n    return app.render(req, res, \'/admin\', req.query)\n  })\n\n  adminServer.get(\'/*\', (req, res) => {\n    return app.render(req, res, `/admin${req.path}`, req.query)\n  })\n\n  adminServer.all(\'*\', (req, res) => {\n    return handle(req, res)\n  })\n\n  memberServer.get(\'/\', (req, res) => {\n    return app.render(req, res, \'/member\', req.query)\n  })\n\n  memberServer.get(\'/*\', (req, res) => {\n    return app.render(req, res, `/member${req.path}`, req.query)\n  })\n\n  memberServer.all(\'*\', (req, res) => {\n    return handle(req, res)\n  })\n\n  mainServer.use(vhost(\'admin.lvh.me\', adminServer))\n  mainServer.use(vhost(\'lvh.me\', memberServer))\n  mainServer.use(vhost(\'www.lvh.me\', memberServer))\n  mainServer.listen(port, (err) => {\n    if (err) throw err\n\n    console.log(`> Ready on http://lvh.me:${port}`)\n  })\n})\n

\n

请参阅存储库以查看其实际效果。

\n

仓库： https: //github.com/dcangulo/nextjs-subdomain-example

\n

Answer 2

这里\xe2\x80\x99是使用Next.js\xe2\x80\x99 i18n系统在同一个Next.js站点上托管多个域的示例（同时维护多种语言和静态站点生成/SSG）：

\n

https://github.com/tomsoderlund/nextjs-multi-domain-locale

\n

Vercel 现在支持通配符域(*.mysite.com)，这很酷！

\n

Answer 3

出于多种原因，您不能在子域之间拆分 1 个 Next.js 应用程序。根据经验，我有一个类似的要求（3 个领域），我从一个应用程序开始，将其拆分为 3 个（使用子路径）

1. 资产（css、js 库）在“区域”之间泄漏。
2. 一个包含 3 个区域的大应用意味着，每次更改都需要重新部署所有区域（一个大的可部署区域）
3. 建造时间，建造3个区域会更长。
4. 每个区域可能会引入不同的需求，例如管理区域的 UI 组件，但“前端”区域的自定义 ui 组件、身份验证、翻译等等

最终得到 3 个独立的 Next.js 应用程序，这些应用程序在纱线工作区内部进行管理并由特定区域部署。

在我解释了我的经验之后，您可以使用反向代理（例如nginx）实现设置，以将子域映射到下一个应用程序中的子路径。

假设您有 3 个区域，前台、管理员、用户。

www.domain.com/some-page=> 应该映射到localhost:3000/front/some-page. users.domain.com/some-page=> 应该映射到localhost:3000/users/some-page. admin.domain.com/some-page=> 应该映射到localhost:3000/admin/some-page.

// www.domain.com.conf 

server {
    listen       80;
    server_name  www.domain.com;
    access_log   /var/log/nginx/access.log  main;
    root         html;
 
    location / {
      proxy_pass   http://127.0.0.1:3000/front/; // <-- the last slash is important
    }

  }

// users.domain.com.conf

server {
    listen       80;
    server_name  users.domain.com;
    access_log   /var/log/nginx/access.log  main;
    root         html;
 
    location / {
      proxy_pass   http://127.0.0.1:3000/users/; // <-- the last slash is important
    }

  }

请注意

1. 您还需要重写静态资产。