Фронтенд и статика
Как выложить сайт на Astro в интернет
Коротко
Сайт на Astro по умолчанию собирается в набор готовых страниц, поэтому выложить его проще всего как обычную статику: загрузите исходный код в Netrun, платформа выполнит сборку и выдаст публичную ссылку с HTTPS. Если в проекте включён серверный режим (в настройках указано output: server, в некоторых версиях — hybrid), понадобится адаптер для Node.js в режиме standalone, а порт и адрес приложение должно читать из переменных окружения PORT и HOST. Собирать сайт у себя и загружать папку dist не нужно: контент-коллекции и картинки Astro обрабатывает во время сборки, а сборка идёт на нашей стороне.
Блог или лендинг на Astro собирается за вечер, а вот дальше начинается обычная история: чтобы выложить сайт на Astro в интернет, нужно найти хостинг, поставить туда Node.js, выполнить сборку, разложить готовые файлы, настроить веб-сервер и получить сертификат. Если у сайта есть серверная часть, добавляется ещё одна забота — держать процесс живым и поднимать его после перезагрузки. Для личного блога или портфолио это несоразмерно много ручной работы.
В Netrun вы загружаете исходный код, а сборку, запуск, перезапуск при сбое и HTTPS берём на себя. Ниже разберём оба случая: обычный Astro, который превращается в набор готовых страниц, и серверный режим, где сайту нужен настоящий запущенный процесс.
Определите, статический у вас сайт или серверный#
По умолчанию Astro собирает проект в набор готовых страниц — это самый простой случай, обычная статика: никакого постоянно работающего приложения не нужно, платформа просто раздаёт собранные файлы. Серверный режим включают отдельно: в файле настроек astro.config стоит output: server (в некоторых версиях был ещё вариант hybrid), и тогда часть страниц собирается прямо во время запроса. Загляните в этот файл до публикации — от ответа зависят два следующих шага.
Загрузите исходники, а не собранную папку dist#
Сборку мы выполняем у себя по вашему package.json, поэтому папки dist и node_modules в архив класть не нужно — они только утяжеляют загрузку и устаревают при первой же правке. Контент-коллекции (записи блога в Markdown или MDX) и картинки Astro тоже обрабатывает во время сборки, так что достаточно исходных файлов: готовые страницы и оптимизированные изображения получатся на нашей стороне. Проверьте только, что команда сборки в package.json на месте — обычно это astro build.
Подключите адаптер Node для серверного режима#
Если у сайта есть серверная часть — обработка форм, свои эндпоинты или страницы, которые собираются на лету, — Astro нужен адаптер. Поставьте официальный адаптер для Node.js и включите режим standalone: после сборки получается самостоятельный сервер, который можно просто запустить. Второй режим адаптера, middleware, рассчитан на то, что вы встроите Astro в собственный сервер, — для публикации у нас он не подходит, запускать будет нечего.
Читайте порт и адрес из переменных окружения#
Порт, на котором слушать, задаёт платформа через переменную окружения PORT. Число, прописанное в коде намертво, — причина номер один, почему ссылка не открывается. Сервер из адаптера Node сам читает PORT и HOST, поэтому чаще всего делать ничего не нужно: главное не переопределить их своими значениями в конфиге или в команде запуска. Слушать нужно 0.0.0.0, а не localhost: адрес localhost виден только внутри контейнера, снаружи по нему никто не достучится. У статического сайта этого шага нет — там порта просто не существует.
Вынесите ключи и токены в секреты#
Если сайт ходит в headless-CMS, сервис форм или платный API, ключи не должны лежать в коде и в папке с проектом. Netrun спросит их при настройке и подставит в переменные окружения в зашифрованном виде — в архиве и репозитории они не окажутся. Держите в голове правило Astro: в браузер попадают только переменные с префиксом PUBLIC_, поэтому так называть секретный ключ нельзя — он окажется в исходном коде страницы. И учтите, что при статической сборке значения подставляются один раз, в момент сборки: поменяли ключ — опубликуйте сайт заново.
Загрузите код и заберите ссылку#
Принесите проект ZIP-архивом или импортом из GitHub-репозитория, в том числе приватного, — git и терминал для этого не нужны. Netrun поставит зависимости, выполнит сборку и выдаст публичный адрес с HTTPS. Логи и статус публикации видны в кабинете в реальном времени, поэтому упавшую сборку вы увидите сразу, а не по пустой странице. Добавили запись в блог или поправили текст — загрузите новую версию, ссылка останется прежней.
Готово: сайт на Astro открывается по обычной ссылке с HTTPS, без аренды сервера и настройки веб-сервера. На бесплатном тарифе доступен один проект, сайт засыпает при простое и просыпается сам, когда кто-то открывает ссылку, — заметно медленнее бывает только первый заход после паузы. Если блог должен отвечать без пауз и вы хотите привязать свой домен, подойдёт тариф Pro. Попробовать Netrun.
Частые вопросы
Нужно ли собирать сайт у себя и загружать папку dist?
Нет, загружайте исходный код. Netrun поставит зависимости и выполнит сборку сам, а результат отдаст по ссылке. Локальная папка dist только утяжелит архив и устареет при первой же правке кода.
Как понять, статический у меня Astro-сайт или серверный?
Посмотрите файл настроек astro.config: если поля output там нет или указано static, сайт статический — это вариант по умолчанию. Значение server (в некоторых версиях hybrid) означает, что часть страниц собирается во время запроса, и такому проекту нужен адаптер для Node.js. Косвенный признак серверного режима — свои эндпоинты или обработка форм прямо внутри сайта.
Почему серверный Astro-сайт собрался, но ссылка не открывается?
Чаще всего дело в порте: приложение слушает свой порт вместо того, который задан переменной окружения PORT, либо слушает localhost вместо 0.0.0.0. Вторая частая причина — сборка без адаптера для Node.js или адаптер в режиме middleware: в этом случае запускать просто нечего. Что именно произошло, видно в логах в кабинете.
Работают ли контент-коллекции и оптимизация картинок?
Да. И записи блога из Markdown или MDX, и обработка изображений выполняются во время сборки, а сборка идёт у нас — отдельно ничего включать не нужно. Достаточно, чтобы исходные файлы и картинки лежали в проекте, а не были собраны заранее.
Можно ли использовать островки на React, Vue или Svelte?
Да, для нас это обычная часть проекта: нужные пакеты перечислены в package.json, и мы установим их при сборке вместе с остальными зависимостями. Отдельной настройки для островков не требуется.
Обновится ли сайт сам после коммита в GitHub?
Нет, публикация запускается из кабинета. Загрузите новую версию архивом или нажмите обновление из GitHub — код подтянется из репозитория, сайт пересоберётся и останется по тому же адресу. Автоматической публикации по каждому коммиту у нас нет.
А React, Vue, Next.js, Nuxt, Svelte или Astro?
Да, все они работают. Загрузите исходный код с package.json — собирать проект у себя и класть готовую сборку в архив не нужно, сборка идёт у нас. Если фреймворк умеет и в готовые страницы, и в серверный режим, подойдут оба варианта: в серверном приложение должно слушать порт из переменной окружения. Одна важная деталь: значения, которые попадают в собранный фронтенд, видны любому посетителю — настоящие ключи держите на стороне сервера.
Нужен ли свой сервер или VPS?
Нет. Netrun разворачивает проект на своих серверах. Не нужно арендовать VPS, настраивать systemd и nginx или продлевать сертификаты — всё это работает за вас.
Почему мой сайт иногда засыпает?
На бесплатном тарифе сайты засыпают после простоя и просыпаются за пару секунд при первом запросе. На тарифе Pro проект работает без сна.
Можно ли подключить свой домен?
Да, на тарифе Pro, и не один: к сайту можно подключить столько своих доменов, сколько вам нужно. Откройте вкладку «Домены» на странице проекта, укажите домен, который вы купили у регистратора, и добавьте DNS-запись по подсказке — так же добавляется каждый следующий. Когда домены готовы, нажмите «Проверить»: Netrun проверит их все разом и выпустит на каждый свой HTTPS-сертификат, поэтому заминка с одним доменом не мешает остальным. Сайт открывается по любому из ваших адресов, а ссылка Netrun остаётся запасной. Если вы подключаете домен целиком (например myshop.com), можно добавить ещё одну запись, и сайт откроется и с www. Доступно для сайтов — боту и фоновому скрипту домен не нужен.