Блог

Я попытаюсь объяснить свою проблему как можно более ясно, не стесняйтесь спрашивать меня более точно, если вы не поняли, что я имел в виду, и простите мои ошибки, английский не является моим родным языком.

Моя цель

У меня есть веб-сайт,www.mywebsite.com , который я хочу использовать для нескольких клиентов (брендов).
Для каждого бренда я хочу динамически загружать разные изображения / название бренда / цветовые схемы и т.д.
Каждый веб-сайт будет находиться на другом поддомене, напримерwww.brand1.mywebsite.com, www.brand2.mywebsite.com и т.д.
Я хочу хранить свой код только в одном месте, и все vhost для каждого поддомена использовать одну и ту же базу кода, но динамически загружать все, что я хочу, в зависимости от текущего поддомена, на котором находится пользователь.

То, что вы должны знать

1. Это мой первый проект на JavaScript, я разработчик PHP
2. Я использую NextJS (фреймворк ReactJS) с material-ui (это то, что я использовал в качестве основы), из-за material-ui веб-сайт использует рендеринг на стороне сервера (с этого момента SSR)
3. Сейчас я работаю с файлом конфигурации json для каждого бренда (который я пытаюсь динамически загружать), но в будущем я хотел бы найти способ сохранить эту информацию в базе данных

Что я пробовал до сих пор

Чтобы достичь этой цели, я перепробовал кучу вещей. Я не собираюсь говорить обо всех из них, потому что ни один из них до сих пор не работал.

Текущее положение вещей таково :

• Файл конфигурации для каждого бренда, экспортирующий переменные, которые я буду использовать позже в коде

   export const ConfigBrand1 = {
      theme: {
          palette: {
              primary:{
                  light: '#314ce3',
                  main: '#fd0000'
              }
          } 
      }
  }
    

• A «loader.js » файл, который я хотел бы включить во все файлы, которые должны будут использовать переменные из файла конфигурации, подобные этому :
  import { Config } from './config/loader.js';
  и затем я использую переменную, подобную этой : Config.theme.palette.primary.light

• The load.js файл выглядит так :

   import { brand1 } from './brand1.js';
  import { brand2 } from './brand2.js';
  
  function getConf(){
      return brand1;
  }
  
  export const Config = getConf();
    

И это работает должным образом для 1 бренда. Моя проблема в том, что я не могу найти способ переключаться между брендами в соответствии с поддоменом, на котором я нахожусь.

window.location не работает, потому что window не определено, поскольку мы используем SSR, поэтому я не могу получить текущий поддомен таким образом.

Я пытался использовать его в _app.js файл также безуспешно.
Я также пытался использовать ReactJS router, но не могу найти рабочий синтаксис для его использования, я не думаю, что смогу.

Мои вопросы просты :

• Правильно ли я мыслю? (пытаюсь использовать поддомены для динамической загрузки файлов конфигурации)
• Есть ли способ получить поддомен из SSR-файла?
• Если нет, то как мне поступить, чтобы сделать то, что я хочу сделать?

Если вам нужна дополнительная точность, не стесняйтесь спрашивать!

Как сказал Лоуренс в комментарии выше — вам нужно получить заголовки запроса — добавьте это через getServerSideProps на используемой вами странице.

 export async function getServerSideProps(context) 
 const hostDomain = context.req.headers.host;
  return {
    props: {}, // will be passed to the page component as props
  }
}