Два разных субдомена в одной маршрутизации Next. js - PullRequest
Новая
       5

Два разных субдомена в одной маршрутизации Next. js

2 голосов
/ 16 апреля 2020

Я хочу построить новую платформу, используя Далее. 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>

1 Ответ

2 голосов
/ 17 апреля 2020

Вы не можете разделить приложение 1 Next. js между поддоменами по нескольким причинам. Исходя из опыта, у меня было похожее требование (3 области), которое я начал с одного приложения, разбитого на 3 (используя подпути)

  1. Активы (css, js libs) просачиваются между "областями" ".
  2. одно большое приложение с 3 областями означает, что каждое изменение потребует повторного развертывания всех областей (одна большая развертываемая)
  3. Время сборки для создания 3 областей будет намного больше
  4. Каждая область может вводить различные требования, такие как компоненты пользовательского интерфейса для администратора, но пользовательские компоненты пользовательского интерфейса для «передней» области, аутентификация, переводы и многое другое

Завершено тремя отдельными Далее. js приложения, которые управляются внутри рабочих областей пряжи и развертываются в указанной области c.

После того, как я объяснил свой опыт, вы можете выполнить настройку с обратным прокси-сервером, таким как nginx для сопоставления субдомена и подпути в вашем следующем приложении.

Допустим, у вас есть 3 области: front, admin, users.

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. вам нужно будет переписать stati c активы, а также.

...