13g10n
Напишите мне
На главную

Публикация нескольких сайтов из одного Nuxt проекта

Я давно думал о переносе документации aiogram-forms на отдельный домен, но перспективы копирования части кодовой базы блога для документации или вынос общих частей в отдельный пакет... Безумие!

Прежде чем начать, я должен упомянуть, что в Nuxt 3 есть Layers, которые вроде как призваны решать подобного рода проблемы, однако в масштабах блога с десятком записей и документации на 8 страниц применение описанных методов выглядит как стрельба из минигана по колибри.

Ещё раз: для проектов, выходящих за рамки прототипов и не имеющих приставки pet-, используйте Nuxt 3 Layers!

Что ж, с формальностями закончили, а это значит, что можем приступить к мультипликации нашего Nuxt сайта. Рецепт простой: одно изменение структуры папок, одна переменная окружения и одна настройка!

Первым делом, необходимо создать в pages нужное нам количество папок, которые будут отражать наши будущие сайты. Также сразу переносим всё нужное нам содержимое (в моём случае текущий контент ушёл в main):

├── pages
│   ├── main
│   │   ├── index.vue
│   │   └── [...slug].vue
│   ├── docs
│   └── admin

После этого необходимо настроить переменные окружения, которые и будут управлять поведением Nuxt. Для целей разработки можно просто создать .env файл, в который добавляем какую-нибудь переменную, указывающую на интересующий нас под-сайт:

.env
SITE='main'

Далее, идём в мир чудес под названием nuxt.config.ts и добавляем в конфиг секцию dir с конфигом pages:

nuxt.config.ts
export default defineNuxtConfig({
  // ...
  dir: {
    pages: `pages/${process.env.SITE}`
  },
  // ...
})

Можете не верить, но самое сложное мы сделали. Теперь при смене переменной SITE на "docs", Nuxt будет ориентироваться на содержимое папки pages/docs, используя описанные там страницы как если бы они были в руте.

Остаётся только добавить переменные окружения вашему облачному сборщику и радоваться простоте данного метода. Вся кодовая база доступна для каждого из под-сайтов без выноса в отдельный репозиторий или даже папку, как этого требуют Layers.

В заключение накину вам ещё одну идею, которая сможет вас удивить, если вы пропустили возможность добавлять в sources git репозитории:

Данный пример использует @nuxt/content модуль для Nuxt 3.

nuxt.config.ts
let additionalSources = {}

if (process.env.SITE == 'aiogram-forms') {
  additionalSources = {
    aiogram_forms: {
      driver: 'github',
      repo: '13g10n/aiogram-forms',
      branch: 'master',
      dir: 'docs',
    },
  }
}

export default defineNuxtConfig({
  // ...
  content: {
    sources: {
      ...additionalSources
    }
  },
  // ...
})

Эти несколько строк кода позволили мне перенести markdown файлы документации в папку docs репозитория aiogram-forms (ага, как и положено), при этом не меняя толком ничего для сборки и деплоя как основного блога, так и документации.

Nuxt
SSG