Когда заканчиваешь работу над веб-приложением, будь то полноценный сайт или Telegram MiniApp, всегда есть желание сразу и без хлопот всё это захостить, показать друзьям, знакомым и сразу пустить в прод.

И встает вопрос: как вообще выложить это все в интернет, желательно по нормальной ссылке, с HTTPS и без тонны настроек VPS и nginx?

В этой статье я покажу способ, как публиковать сайты на PaaS-сервисах, просто привязав к ним Git-репозиторий и делая в него коммиты (или вообще просто перетягивая файлы в интерфейсе).

Сразу предупрежу - это не универсальный способ. Его можно использовать только в сервисах, поддерживающих запуск проектов через привязанный Git. Таких сервисов несколько на любой вкус. Если нужен универсальный способ - можно запустить на любом VPS, но будет сложнее, чем в статье. И примеры я приведу на основе нашего сервиса для простого запуска проектов Amvera. Надеюсь, вы с пониманием отнесетесь к небольшой рекламе в нашем блоге.

Перед тем как начать, важно понимать: сайты могут быть написаны на разных языках, с использованием разного стека технологий, поэтому невозможно написать универсальную инструкцию для совершенно всех окружений. Однако я постарался собрать самые массовые из вариантов:

1. Готовые статические файлы (это когда у вас есть готовый index.html, css, js и т.д.);

2. Браузерный фронтенд вроде React, Vue, Angular;

3. Python-приложение (Django, Flask, FastAPI);

4. или серверное Node.js приложение.

Для каждого из окружений будет собственный сценарий. Если вы из этого списка узнали свой - можете мотать к нужному, но я бы рекомендовал прочесть статью полностью, чтобы не выпасть из контекста.

И сразу подмечу довольно важный момент: формулировка “в 3 команды” здесь про деплой через git. То есть вы можете взять код, который у вас лежит локально и просто запушить его командой git push amvera master в репозиторий Amvera. Но, помимо этого, вас не лишают возможности загрузки файлов прямо перетягиванием в браузер - для кого-то это даже сильно удобнее. Git нужен для удобства в случае, если ваш проект довольно часто обновляется. И эти самые три команды выглядят примерно так:

git add .
git commit -m "Обновление проекта"
git push amvera master

После деплоя вам сразу будет доступен бесплатный домен от Amvera вида https://project.username.amvera.io. А для подключения собственного понадобится лишь прописать A и TXT записи в панели регистратора.

Под деплоем, развертыванием, публикацией и размещением сайта я буду подразумевать одно и то же.

Логично, что самым первым делом нужно зарегистрироваться на сервисе.

Сразу после регистрации вас перебросит на главную страницу - там уже нужно будет нажать кнопку “Создать проект” и выбрать тип сервиса “Приложение”, выбрать тариф и название.

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

Загрузка файлов в репозиторий

Здесь есть 3 способа:

1. Прямая загрузка “перетягиванием” или выбором файлов/папок в интерфейсе сайта. Это самый простой, но зачастую неудобный способ, если планируется постоянная поддержка приложения (обновления, хотфиксы и т.д.) + есть ограничение на общий объем - 200 МБайт.

2. Ручная загрузка через git - тоже довольно простой способ и удобный для обновлений.

3. Автоматическое подтягивание файлов с удаленного Git-сервиса (GitHub, GitLab или Bitbucket).

Прямая загрузка

Все происходит очень просто: открываете проект, выбираете вкладку “Репозиторий” и перетягиваете нужный файл или файлы в зону загрузки.

Ручная загрузка через git

Здесь можно воспользоваться готовыми инструкциями из документации:

• Использование Amvera как основной репозиторий;

• Подключение к существующему репозиторию;

• Основные концепции.

Если кратко, то можно просто выполнить следующие команды в терминале директории проекта:

# Подключение репозитория:
git init
git remote add amvera https://git.msk0.amvera.ru/<USERNAME>/<PROJECT-NAME> # Команда доступна во вкладке "Репозиторий"

# Отправка (пуш) всех файлов. Будьте аккуратны: не захватите секретные ключи
git add .
git commit -m "Initial commit"
git push amvera master

Подключение GitHub, GitLab, Bitbucket

Здесь уже полностью направлю в документацию - там все описано достаточно подробно.

Создание внешнего доменного имени

Для того, чтобы не дублировать одно и то же в каждом из сценариев, расскажу как это сделать заранее.

Это все делается буквально в четыре действия:

1. Открываем вкладку “Домены”;

2. Жмём кнопку “Добавить доменное имя”;

3. Выбираем тип подключения HTTPS и тип домена: бесплатный от нас или собственный;

4. В случае с бесплатным жмём “Применить”, ожидаем буквально минуту и радуемся!

Сценарий 1: деплой статики (HTML/CSS/JS)

Вообще, как раз для этого сценария у нас уже была статья, в которой довольно подробно описан способ деплоя через создание Flask веб-сервера. Казалось бы, что и заново писать одно и то же не нужно, но с тех пор прошло много времени: изменился интерфейс сервиса, плюсом хочется рассказать о способе, который даже не требует создания веб-сервера на Flask и редактирования файлов.

Деплой с помощью веб-сервера Flask

Если вы выбрали запуск через Flask, я рекомендую следовать инструкциям из прошлой статьи по ссылке: https://habr.com/ru/companies/amvera/articles/833482/. Единственные отличия там - это интерфейс самого сервиса Amvera. В остальном, алгоритм развертывания остается тем же.

Это рабочий способ, но можно обойтись и без редактирования каждого пути к статическому файлу, используя следующий путь.

Быстрый деплой без редактирования кода

Когда сайт уже готов, очень не хочется переписывать все пути до картинок, css, js-файлов и т.д. В этом-то и главный минус Flask веб-сервера.

Для этого воспользуемся деплоем через Dockerfile с использованием образа nginx:alpine. И нет, вам не нужно будет настраивать конфиг nginx. Для обычного статического сайта отдельный конфиг, как правило, не нужен.

Всё, что нужно будет - создать файл Dockerfile (именно такой, без расширения) со следующим содержанием:

FROM nginx:alpine
COPY . /usr/share/nginx/html

И загрузить его вместе с остальной статикой в репозиторий Amvera.

Для самого простого проекта-одностраничника, репозиторий будет выглядеть так:

Но и для более сложных проектов тоже подойдет.

После загрузки файлов переходим во вкладку “Конфигурация” и нажимаем кнопку “Собрать”. После некоторого ожидания сайт уже станет доступным.

Важно! Nginx здесь просто отдает все статические файлы, поэтому, пожалуйста, убедитесь, что не тянете вместе со своими файлами секретные файлы, ключи или пароли.

Сценарий 2: Браузерный фронтенд - React, Vue, Angular и прочее

Если вы написали собственный фронтенд на любой из перечисленных технологий, то для вас, вероятно, деплой совсем не составит труда.

Поэтому если говорить кратко, то вам нужно:

1. Создать проект по инструкции выше (если еще не создали);

2. Перейти во вкладку “Конфигурация” и настроить ее (или вручную amvera.yml) так:

React

Vue

Angular

Я думаю, вы заметили, что главное отличие каждой из конфигураций - это значение параметра artifacts.key.

Этот параметр подсказывает системе, откуда брать после сборки собранные статические файлы, которые собирает сам фреймворк. То есть определить значение этого параметра вы можете самостоятельно, если просто запустите сборку локально и внимательно посмотрите, куда фреймворк положил статические файлы.

По умолчанию в Amvera значение этого параметра равно build/*, что актуально для React, но для других фреймворков это значение может меняться.

Если для корректной сборки проекта необходима дополнительная команда, то ее можно прописать в значение параметра additionalCommands (перечислять через &&). Изначально (без additionalCommands) во время сборки выполняется npm install && npm run build. Если же указать значение, то будет npm install && ${build.additionalCommands}.

После применения конфигурации и загрузки файлов жмите “Собрать” и создайте домен.

Сценарий 3: Python-приложение (Django, Flask, FastAPI)

Здесь все сильно разнится от используемой библиотеки, но обычно более чем достаточно наличия файлов requirements.txt (он может сгенерироваться сам, если вы загрузите все файлы вручную через интерфейс - там будет кнопка, но инструкция по созданию есть здесь) и amvera.yml. Второй файл также можно сгенерировать во вкладке “Конфигурация”.

Вам нужно понимать то, как вы запускаете сайт или API локально. Если это команда uvicorn, gunicorn или python manage.py runserver для Django, то вам нужно использовать параметр command в конфигурации. Если же вы просто запускаете какой-то скрипт без параметров запуска (python main.py, например), то будет достаточно пути к файлу в параметре scriptName.

Например:

С использованием uvicorn

Запуск скрипта .py

Также есть множество статей с разработкой и запуском веб-приложений на Python, которые можно посмотреть в нашем блоге.

Сценарий 4: Node.js приложение

Подходит для сайтов на Next.js (и не только) c серверными функциями.

Это уже сценарий, где у вас есть либо статические файлы, для раздачи которых поднимаете веб-сервер, либо используете специальную библиотеку.

Здесь тоже все просто: для серверных node.js приложений есть отдельное окружение.

Конфигурация для node.js практически универсальная. Единственное: часто нужно задавать дополнительные команды, которые будут выполняться при сборке с помощью параметра additionalCommands.

Выбор параметра scriptName или command также зависит от запуска локально. Если запускаете какой-то конкретный файл командой node file.js, то достаточно использовать scriptName. Параметры взаимоисключаемые - использовать можно только один из них.

То есть:

• команда для запуска на своем ПК -> значение параметра в конфигурации Amvera

• node app.js -> scriptName: app.js

• npm run start ->command: npm run start

Итог

Мы рассмотрели, как опубликовать сайт на хостинге без настройки сервера и обновлять его через git push. Сайты могут быть написаны по-разному. Мы запустили на сервере как статические сайты на React, Angular, Vue и просто HTML, так и сайты использующие серверные функции на Node.js, в т.ч. на Next.js. Надеюсь, статья поможет вам максимально просто и быстро опубликовать ваш сайт в интернете.