Блог

У меня есть следующая структура для использования одного домена для нескольких проектов:

1. Репозиторий, содержащий один файл vercel.json для настройки пути к другим проектам
2. Репозиторий, содержащий пример домашнего приложения
3. Репозиторий, содержащий пример приложения для проверки

Vercel.json отлично работает и развертывается в nizen.com.br , вот как это происходит:

 // vercel.json
{
  "rewrites": [
    {
      "source": "/checkout",
      "destination": "https://checkout.nizen.com.br/checkout"
    },
    {
      "source": "/",
      "destination": "https://home.nizen.com.br"
    }
  ]
}
 

Итак, если мы перейдем к nizen.com.br мы получаем пример домашнего приложения без стилей и кучу ошибок в консоли, пытающихся получить ресурсы home.nizen.com.br в nizen.com.br и то же самое происходит с приложением checkout.

Вот одна из подобных ошибок, которые появляются в консоли в приложении Home:

И вот приложение для проверки:

О приложении next.config.js файлы, только приложение Home остается нетронутым, а приложение Checkout имеет базовый путь, добавленный со значением «/ checkout» следующим образом:

 // Checkout app next.config.js
module.exports = {
  reactStrictMode: true,
  basePath: "/checkout",
};
 

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

 // example of rewrite that I did
module.exports = {
  async rewrites() {
    return [
      {
        source: "/",
        destination: "https://home.nizen.com.br",
      },
    ];
  },
};
 

Я попытался передать:path * и:path в источнике и пункте назначения, а также использовать запасной вариант и даже изменить пункт назначения на приложение для проверки, чтобы увидеть, изменилось ли что-то, и ничего из этого не сработало.

Если бы я добрался до https://home.nizen.com.br приложение работает идеально и одинаково подходит для оформления заказа. Что я делаю не так?

Я решил этот вопрос, изменив стратегию. Вместо того, чтобы использовать репозиторий с помощью vercel.json для маршрутизации микро-интерфейсов, я использую приложение home в качестве проекта, размещенного в nizen.com.br и это next.config.js файл — это тот, кто творит волшебство!

 //Home App next.config.js file
module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return {
      fallback: [
        {
          source: "/checkout",
          destination: "https://checkout.nizen.com.br/checkout",
        },
        {
          source: "/checkout/:path*",
          destination: "https://checkout.nizen.com.br/checkout/:path*",
        },
      ],
    };
  },
};
 

И источник, и назначение должны указывать на один и тот же подпуть ( /checkout ), и необходимы оба резервных блока. К моменту написания этой статьи я использую следующую версию 12.