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

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

Итак, давайте перейдем к деплою!

Подготовка сайта к деплою

Так как мы будем использовать Flask, простое подключение js, изображений и стилей придется заменить чуть более устрашающим скриптом с использованием url_for(). Делается это просто и шаблонно. Вот пример:

Подключение скрипта js/jquery-3.3.1.min.js изначально выглядит так:

<script src="static/js/jquery-3.3.1.min.js"></script>

Теперь, чтобы с Flask подключался скрипт, немного изменяем строку:

<script src="{{ url_for('static',filename='js/jquery-3.3.1.min.js') }}"></script>

Что мы тут добавили? В двойных фигурных скобках находится вызов функции url_for(), с помощью которого мы и даем Flask понять, что нам нужно подключить. Первым аргументом (‘static’) будет папка, где хранятся статические файлы. Статические файлы - это те самые стили, скрипты и прочие файлы, которые мы подключаем к странице. Вторым аргументом будет путь относительно папки static. В нашем случае - ‘js/jquery-3.3.1.min.js’.

С подключением стилей и изображений буквально также.

Код

Теперь, когда сайт подготовлен, можно приступать к написанию кода. Как и сказано в названии статьи, он будет очень небольшим.

Создадим файл main.py, в котором и будет написан весь код.

Вот так выглядит содержимое main.py:

from flask import Flask, render_template  
  
app = Flask(__name__, template_folder='.')  
  
@app.route("/")  
def web():  
return render_template('index.html')  
  
if __name__ == "__main__":  
app.run(debug=True, host="0.0.0.0", port='80')  

Из Flask импортируем класс Flask и функцию render_template, с помощью которой мы и будем рендерить страницу.

После импортов идет объявление app - в класс передается name и обязательно папка, в которой находится сам template (index.html). В нашем случае template лежит в одной папке со скриптом, поэтому вписываем точку.

Декоратор app.route используется для того, чтоб привязать функцию к url. “/” означает главную домашнюю страницу сайта. В функции внутри декоратора возвращается рендер страницы.

Внутри конструкции if name == "main" находится запуск сервера app.run(). Сюда мы передаем debug=True, что позволяет в случае ошибки видеть ее прямо на странице, host=“0.0.0.0” и port=“80”. Эти два аргумента нужны для правильной работы приложения на сервере.

Создание файла зависимостей

Не забываем про файл зависимостей - requirements.txt. Он нужен для установки библиотек Python на сервер.

Делается он просто - в него прописываются все названия библиотек и их версии, например:

библиотека==версия  
библиотека2==версия2 

Прописываем Flask, который используется в коде:

Flask==3.0.3 

Регистрация и деплой на сервер

Развертывать проект мы будем в облаке Amvera.

Почему я выбрал именно Amvera:

1. При регистрации на сервисе вы получаете бесплатный промо баланс 111 руб.

2. Обновления через git (или загрузкой через интерфейс). Даже без знаний git вы сможете быстро доставлять обновленный код в репозиторий через командную строку или терминал в IDE.

3. Деньги не сгорают, если не пользоваться сервисом.

4. И да, я там работаю ...

Когда весь код готов к деплою, мы, наконец, можем зарегистрироваться на сервисе и перейти к созданию проекта.

После ввода всех данных понадобится подтвердить номер телефона. Именно это даст вам бесплатные 111 рублей на баланс :)

Зарегистрировались? Теперь можно приступать к последнему этапу - созданию проекта. На странице проектов нажимаем кнопку “Создать”. В окне вводим название проекта, выбираем тип “Приложение” и любой понравившийся тариф. Нажимаем далее.

В окне загрузки данных вы можете либо выбрать метод загрузки через git или интерфейс сайта. Я выберу и покажу метод через git, но даже после этого выбора вы сможете использовать оба способа.

Конфигурация - здесь нам нужно выбрать определенные настройки. А именно:

• Окружение - Python

• Инструмент Pip

Когда появились дополнительные секции, в версии ставим 3.12 или любую другую, поддерживающую Flask 3.0.3, в секции run и параметре scriptName прописываем main.py (или другое, выбранное вами название главного скрипта). Нажимаем “Завершить”. Теперь последний шаг - загрузка данных.

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

Можно использовать интерфейс сайта и грузить файлы во вкладке “Репозиторий”, используя кнопку “Загрузить данные”. Но для наглядности я покажу, как работать с Git.

Естественно, если вы никогда не пользовались гитом - его нужно установить.

Когда гит установлен, можно начать с инициализации гит: открываем терминал в папке с проектом и прописываем команду git init. Если создался файл .git - значит, все прошло успешно.

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

1. Подключим remote: git remote add amvera https://git.amvera.ru/имя-пользователя/название-проекта-транслитом. Эта команда вместе с url указана во вкладке “Репозиторий” под надписью “Или подключить к существующему репозиторию”. После этой команды откроется окно с вводом имени пользователя и пароля пользователя Amvera.

2. Добавим все файлы в локальном репозитории: git add .

3. Сделаем первый коммит: git commit -m "Первый коммит"

4. Выполним пуш в удаленный репозиторий (обязательно в ветку master): git push amvera master

Возможно, если вы ранее добавляли какой-нибудь файл через интерфейс, возникнет ошибка “failed to push some refs to …”. В таком случае нужно выполнить команду git pull amvera master

После пуша сборка проекта автоматически начнется. Нам остается только активировать дефолтное доменное имя во вкладке “Настройки”, поставив переключатель, который находится под текстом “Действия” в списке доменных имен в положение “включено”. Вы также можете добавить свое доменное имя.

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

Итог

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