Фронтенд и статика
Как выложить сайт на Nuxt в интернет
Коротко
Выложить сайт на Nuxt можно двумя способами. Первый: собрать страницы заранее командой nuxt generate — получится обычная статика, которой во время работы ничего не нужно. Второй: оставить серверный режим, и тогда Nuxt работает как Node-приложение, которое слушает порт из переменной окружения PORT по адресу 0.0.0.0. В Netrun работают оба варианта: вы загружаете код, платформа ставит зависимости, собирает проект и выдаёт публичную ссылку с HTTPS, поэтому свой сервер, nginx и ручной сертификат не нужны, а Vercel не обязателен.
Обычно, чтобы выложить сайт на Nuxt в интернет, приходится выбирать из двух не самых приятных вариантов. Либо арендовать сервер, поставить туда Node.js, собрать проект, запустить его постоянным процессом, повесить рядом nginx и получить сертификат. Либо отдать сайт платформе вроде Vercel — это удобно, но подходит не всем: кому-то важно платить российской картой, кому-то нужно, чтобы рядом с сайтом жила ещё и база данных.
В Netrun вы просто загружаете папку с кодом, а сборку, запуск, перезапуск при сбое и адрес с HTTPS берём на себя. Nuxt мы узнаём по вашему package.json и собираем так, как задумано в проекте. Главное решение, которое остаётся за вами, — в каком режиме публиковать сайт: как набор готовых страниц или как приложение с серверной частью. Ниже разберём оба.
Решите, нужен ли сайту сервер#
Nuxt умеет жить в двух режимах, и от выбора зависит всё остальное. Если сайт только показывает содержимое — лендинг, блог, портфолио, документация — его можно заранее превратить в набор готовых страниц командой nuxt generate: это обычная статика, которая открывается мгновенно и не требует ничего запущенного. Если же в проекте есть серверные роуты (папка server/api), запросы к базе, приём форм или контент, который считается на лету под каждого посетителя, нужен серверный режим: тогда Nuxt работает как постоянно запущенное Node-приложение.
Соберите готовые страницы, если сервер не нужен#
Для статического варианта выполните на своей машине npm run generate — Nuxt разложит готовые страницы в папку .output/public. Именно её содержимое и есть ваш сайт: загрузите эти файлы в Netrun архивом, и платформа отдаст их по публичной ссылке с HTTPS. Собирать проект у себя нужно только в этом случае: если вы оставляете серверный режим, сборку делаем мы, а вы загружаете исходный код. Статический сайт ничего не слушает и не может упасть, а чтобы обновить его, соберите страницы заново и загрузите новую версию — ссылка останется прежней.
Оставьте порт и адрес платформе#
В серверном режиме сайт открывается только если приложение слушает там, где его ждут: порт берётся из переменной окружения PORT, а адрес должен быть 0.0.0.0, а не localhost. По умолчанию Nuxt так и делает, поэтому от вас требуется обратное действие — убрать свои настройки, если вы их когда-то добавили. Проверьте nuxt.config и файл .env на строки вроде порта 3000 или host localhost: захардкоженный порт — причина номер один, почему после публикации ссылка не открывается.
Добавьте команду запуска в package.json#
После сборки Nuxt кладёт готовое приложение в папку .output, и запускается оно файлом .output/server/index.mjs. Чтобы у платформы не оставалось вопросов, чем поднимать проект, добавьте в раздел scripts вашего package.json команду start со значением node .output/server/index.mjs. Команда build там обычно уже есть — её мы выполним сами при публикации, собирать проект на своей машине не нужно.
Разделите настройки на серверные и публичные#
В Nuxt значения из runtimeConfig делятся на две части, и это важно для безопасности. Всё, что лежит внутри public, попадает в браузер вместе со страницей и видно любому посетителю — туда кладут только безобидное, например адрес внешнего API. Ключи, токены и строку подключения к базе оставляйте вне public: они остаются на сервере. Сами значения не пишите в код — Netrun спросит их при настройке проекта, подставит в переменные окружения и будет хранить зашифрованными.
Загрузите код и заберите ссылку#
Принести проект можно ZIP-архивом или импортом репозитория с GitHub, в том числе приватного. Если вы выкладываете исходный код, не кладите в архив node_modules, .nuxt и .output — зависимости поставим и сборку соберём мы, архив от этого остаётся лёгким. Дальше Netrun соберёт проект, запустит его и выдаст публичную ссылку с HTTPS, а логи и статус публикации видны в кабинете в реальном времени, поэтому ошибку сборки вы увидите сразу, а не по пустой странице.
Готово: сайт на Nuxt открывается по обычной ссылке с HTTPS, без аренды сервера и настройки nginx. На бесплатном тарифе доступен один проект, и сайт на нём засыпает при простое, а просыпается сам, когда кто-то открывает ссылку — медленнее обычного будет только первый заход после паузы. Если сайт должен отвечать без задержек в любой момент и к нему нужен свой домен, подойдёт тариф Pro. Попробовать Netrun.
Частые вопросы
Чем nuxt generate отличается от обычной сборки?
Команда nuxt generate заранее просчитывает страницы и складывает их готовыми файлами: получается статический сайт, которому во время работы ничего не нужно. Обычная сборка оставляет серверную часть, и сайт становится Node-приложением, которое слушает порт и отвечает на каждый запрос. Серверные роуты, работа с базой и содержимое, которое считается под конкретного посетителя, есть только во втором варианте.
Можно ли выложить сайт на Nuxt без Vercel?
Да. Nuxt не привязан к одной платформе: в серверном режиме это обычное Node-приложение, а после nuxt generate — обычная папка с готовыми страницами. Netrun принимает оба варианта: вы загружаете код архивом или из GitHub и получаете публичную ссылку с HTTPS.
Почему сайт собрался, но не открывается по ссылке?
Чаще всего дело в порте или адресе, прописанных вручную: приложение слушает 3000 или localhost, а платформа ждёт его на своём порту и на 0.0.0.0. Уберите эти значения из nuxt.config и из .env. Вторая частая причина — проект вообще не запустился: об этом прямо скажут логи в кабинете, их видно в реальном времени.
Куда девать файл .env от Nuxt?
Сам файл в архив класть не нужно, и в репозитории ему тоже не место. Значения вы указываете при настройке проекта в Netrun — они подставятся в переменные окружения и будут храниться зашифрованными. Nuxt подхватит их в runtimeConfig по своим правилам именования: серверное значение apiSecret читается из переменной NUXT_API_SECRET, а публичное apiBase — из NUXT_PUBLIC_API_BASE.
Попадут ли ключи из runtimeConfig в браузер?
Всё, что лежит в разделе public, уезжает в браузер вместе со страницей, и посмотреть эти значения может любой посетитель. Остальное из runtimeConfig остаётся на сервере и наружу не отдаётся. В статическом режиме сервера нет вовсе, поэтому любое значение, попавшее в собранные страницы, становится публичным — секретные ключи в такой сайт встраивать нельзя.
Будут ли работать серверные роуты из папки server/api?
Да, в серверном режиме они работают как обычно: Nuxt поднимается как Node-приложение и отвечает на запросы к своим роутам. В статическом варианте после nuxt generate серверной части не остаётся, поэтому такие роуты работать не будут — если они вам нужны, публикуйте сайт в серверном режиме.
Нужен ли свой сервер или VPS?
Нет. Netrun разворачивает проект на своих серверах. Не нужно арендовать VPS, настраивать systemd и nginx или продлевать сертификаты — всё это работает за вас.
А React, Vue, Next.js, Nuxt, Svelte или Astro?
Да, все они работают. Загрузите исходный код с package.json — собирать проект у себя и класть готовую сборку в архив не нужно, сборка идёт у нас. Если фреймворк умеет и в готовые страницы, и в серверный режим, подойдут оба варианта: в серверном приложение должно слушать порт из переменной окружения. Одна важная деталь: значения, которые попадают в собранный фронтенд, видны любому посетителю — настоящие ключи держите на стороне сервера.
Как обновить код уже опубликованного проекта?
Откройте проект и загрузите новую версию или обновите его из GitHub. Ссылка останется прежней, а данные сохранятся, если лежат в постоянном хранилище — папке /data или томе вашего compose-файла.
Почему мой сайт иногда засыпает?
На бесплатном тарифе сайты засыпают после простоя и просыпаются за пару секунд при первом запросе. На тарифе Pro проект работает без сна.