Flask на примерах — Настройка проекта

Уроки по Flask

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

  • Часть 1: Установка локальной среды разработки, запуск приложения на Heroku (данная статья);
  • Часть 2: Установка базы данных PostgreSQL вместе с SQLAlchemy и Alembic для обработки миграций;
  • Часть 3: Добавление логики бэкенда для парсинга и последующий процесс подсчета слов с веб-страницы через использование модуля Requests, BeautifulSoup и библиотеки Natural Language Toolkit NLTK;
  • Часть 4: Имплементация очереди задач в Redis для обработки текста;
  • Часть 5: Использование Angular на фронтенде для постоянного взаимодействия с бэкендом, чтобы посмотреть статус запроса;
  • Часть 6: Тестирование приложения на Heroku — установка Redis и описание запуска двух процессов (web и worker) на единственном контейнере (Dyno);
  • Часть 7: Обновление фронтенда, чтобы сделать его более удобным для пользователей;
  • Часть 8: Создание настраиваемой Angular директивы для отображения диаграммы с частотой словесных пар используя JavaScript и D3.

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

Содержание статьи

Настройка проекта на Flask

Начнем с создания базового веб-приложения «Hello World» на Heroku с двумя средами:

  • staging (стейджинг) — предназначенной для разработки и тестирования;
  • production (продакшнен) — предназначенной для релиза протестированных версий нашего веб-приложения.

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

  • Virtualenv;
  • Flask;
  • git/Github;
  • Heroku (основы).

Сперва настроим рабочую директорию:

Инициализиуем новый git репозиторий внутри нашей рабочей директории:

Устанавливаем среду окружения для использования в нашем веб-приложении:

Теперь вы можете увидеть (env) с левой стороны терминала, это указывает на то, что сейчас вы работаете в виртуальной среде.

Чтобы покинуть виртуальную среду просто выполните в терминале команду deactivate и когда захотите продолжить работу над проектом, запустите source env/bin/activate.

Затем нам нужно будет создать базовую структуру для нашего приложения. Создадим следующие файлы в папку "flask-by-example":

В итоге, будет создана следующая структура из файлов:

Не забудьте обновить файл .gitignore из репозитория.

На всякий случай, стоит обновить pip через команду:

Устанавливаем Flask через pip:

Добавляем установленные библиотеки в наш файл requirements.txt:

Открываем файл app.py в текстовом редакторе и добавляем следующий код:

Запускаем приложение:

Вы должны увидеть стандартное приложение «Hello World» в действии на http://localhost:5000/. По завершению работы, веб-сервер нужно закрыть через комбинацию CTRL+C.

Затем нужно настроить Heroku для запуска веб-приложения на нем.

Установка Heroku для работы с Flask

Если вы этого еще не сделали, создайте аккаунт на Heroku, скачайте и установите Heroku Toolbelt и затем в терминале запустите команду для входа на Heroku:

Форма для входа на Heroku

После удачного входа на Heroku, нужно создать файл Procfile в вашей корневой директории проекта:

Добавляем следующую строку в новый созданный файл Procfile:

Не забудьте добавить модуль gunicorn в файл зависимостей requirments.txt:

Нам также нужно указать версию Python, чтобы Heroku использовал верный Python Runtime для запуска нашего веб-приложения.

Просто создаем файл под названием runtime.txt со следующим содержимым:

Загрузим наши изменения через git (также можно разместить на Github), затем создаем две новые веб-приложения на Heroku.

Первое веб-приложение для продакшена:

Второе веб-приложение для стейджинга:

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

Я предлагаю использовать такой шаблон названия приложения:

  • DD — текущий день;
  • MM — месяц;
  • YYYY — год.

В моем случае это:

  • wordcount-pro-22-08-2020;
  • wordcount-stage-22-08-2020.

В моем случае был получен вот такой результат в терминале:

Добавим новые приложения в git remote. Не забудьте назвать один remote pro (для продакшена), а другой stage (для стейджинга):

Подготавливаем все файлы для комита:

Теперь можно загрузить оба приложения для работы в режиме реального времени на Heroku:

  • Для стейджинга: git push stage master
  • Для продакшена: git push pro master

Вот так выглядит результат в терминале у меня:

После загрузки файлов на Heroku, можно открыть URL веб-приложения в браузере и, если все прошло хорошо, вы увидите «Hello World!».

Рабочий поток создания веб-приложения

Сделаем изменение в нашем веб-приложении и загрузим их только на стейджинге (тестовой версии нашего веб-приложения):

Запустите веб-приложение локально и убедитесь, что все работает:

Попробуйте добавить в какое либо имя после / в URL, то есть http://localhost:5000/mike.

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

Убедитесь, что ваши изменения зафиксированы в git:

Затем, загружаем все изменения на стейджинг (приложение для предварительного тестирования):

У меня получился вот такой вывод:

Теперь при переходу в среду стейджинга вы сможете использовать новый URL, то есть /mike и увидите Привет, mike! в зависимости от того, какое имя вы поместили в URL.

В моем случае это:

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

Если все хорошо, давайте загрузим изменения и для продакшена:

Теперь та же функциональность доступна на продакшен сайте.

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

Создаем файл конфигурации веб-приложения

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

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

Добавим файл config.py в корень проекта:

В файле конфигурации мы собираемся позаимствовать кое-что из того, как настраивается конфигурация в Django. У нас будет базовый класс Config, от которого наследуются другие классы конфигурации. Затем при необходимости мы импортируем соответствующий класс.

Добавьте следующей код в созданный файл config.py:

Мы импортировали модуль os и затем создали переменную basedir значение которой является полным путем к файлу config.py. Затем мы создаем базовый класс Config с некоторыми основными настройками, которые будут наследовать другие классы.

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

  • локальной на нашем компьютере;
  • стейджингом (приложение только для тестирования);
  • продакшеном (рабочее приложение для пользователей).

Flask: Настройка локальной среды

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

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

Сначала выходим из виртуальной среды в терминале, устанавливаем глобально модуль autoenv и создаем файл .env:

В файле .env добавим следующее содержимое:

Выполняем следующие команды в терминале для изменения и обновления файла ~/.bashrc:

Теперь при переходе в данную папку, виртуальная среда автоматически запустится и объявится переменная APP_SETTINGS.

Настройки Heroku для Flask

Аналогичным образом мы настроим переменные на Heroku.

Для стейджинга запустим следующую команду:

Полученный ответ:

Для продакшена:

Полученный ответ:

Не забудьте проверить, правильно ли работают наши изменения. Обновите содержимое файла app.py:

Мы импортировали модуль os и использовали метод os.environ для импорта соответствующей переменной APP_SETTINGS, в зависимости от нашей среды. Затем мы настраиваем конфигурацию в нашем приложении с помощью метода app.config.from_object.

Нам остается только зафиксировать изменения и загрузить их на стейджинг и продакшен (и Github, если он у вас настроен).

Затем загружаем изменения:

Если вы хотите проверить переменную среды, чтобы убедиться, что она определяет правильную среду, добавьте такой вывод в app.py:

Теперь при запуске приложения, будет показаны текущие настройки конфигурации:

Локально:

Стейджинг:

Продакшен:

Не забудьте удалить print(os.environ['APP_SETTINGS']) по завершению тестирования.

Заключение

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

Удачи!