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

Question

我想使用 Next.js 构建一个新平台( React.js 和 React-router )。会有两个空格。一个前端供用户使用，另一个前端供所有者使用，以便他们管理所有用户。我想将这两个区域分成两个子域，如下所示:

front.domain.companel.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

出于多种原因，您无法在子域之间拆分 1 个 Next.js 应用程序。根据一次经验，我有类似的要求(3 个区域)，我从一个应用程序分成 3 个(使用子路径)开始

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

最终得到了 3 个独立的 Next.js 应用程序，它们在 yarn 工作区中进行管理并由特定区域进行部署。

在我解释完我的经验之后，您可以使用反向代理来实现设置，例如 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. 您还需要重写静态资源。