Как я превратил свой CLI-скрипт в веб-сайт с помощью Flask

Фотография на обложке Marc-Olivier Jodoin на Unsplash.

Контекст

Итак, я создавал свое стартовое портфолио. Я хотел показать свои начинающие навыки работы с Python, но у меня был только бот для Twitter и несколько CLI-скриптов.
В своем портфолио я показывал исходные коды, но мне хотелось иметь живой предварительный просмотр. Что-то, что кто-то мог бы увидеть вживую.

Как мне показать живой предварительный просмотр моих CLI-скриптов?

Ответ: сделать из них сайт!

И вот начало моего путешествия во Flask и Heroku.

Сценарий CLI

Когда-то существовал скрипт, который выводил скорость вашего интернет-соединения. (В тон Веллерману ахах!).

Итак, у меня был скрипт, и я хотел сделать его живым. Я поискал в уме и подумал о Flask, да!

Начало путешествия по Flask

Что такое Flask?

Во-первых, что такое Flask? Ну, как и Django (возможно, вы знаете это лучше), это веб-фреймворк, написанный на Python. Но он меньше своего собрата и также предназначен для небольших проектов. Хотя … 🧐

Установка Flask

Установить Flask довольно просто, достаточно выполнить команду pip. Вот она:

pip install flask
Войти в полноэкранный режим Выйти из полноэкранного режима

Виртуальное окружение

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

$ mkdir speedtest-webapp
$ cd speedtest-webapp
$ virtualenv -p python3 venv
Вход в полноэкранный режим Выход из полноэкранного режима

Активируйте среду

После того как среда создана, вам нужно активировать ее («войти в нее», если хотите). Это делается следующим образом (при условии, что вы находитесь в каталоге speedtest-webapp):

source venv/bin/activate
Войти в полноэкранный режим Выйти из полноэкранного режима

Сценарий CLI для приложения Flask

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

from flask import Flask, render_template, request
# To import Flask itself, to make it beautiful and 
# to interact with forms


app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
# To interact with forms and their methods

def home():
    return "<p>Hello, World!</p>"


if __name__ == '__main__':
    app.run()
Войти в полноэкранный режим Выход из полноэкранного режима

Я предположил, что мой CLI-скрипт будет находиться в функции home, и я оказался прав. Я узнал больше о шаблоне рендеринга, и мой return оператор выглядит так:

return render_template('index.html', ip=ip, city=city, country=country, download=download, upload=upload, fai=fai)
Войти в полноэкранный режим Выход из полноэкранного режима

Я использовал метод POST и GET, чтобы разделить использование моей формы.

Окончательный код

Вы можете найти мой окончательный файл app.py здесь: github.com

Начало путешествия по Heroku

Мой код отлично работал на моем локальном компьютере. И я искал, как разместить его в интернете. Google (мой друг) показал мне Heroku.

Предварительные условия

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

Во-вторых, создайте бесплатный аккаунт на сайте heroku.com.

Создайте свое приложение heroku

Во-первых, нажмите на кнопку New и выберите Create a new app.

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

На следующем экране выберите GitHub (Connect to GitHub) (вам придется авторизовать доступ к вашей учетной записи GitHub для Heroku) и выберите ранее созданный репозиторий.

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

Перед развертыванием приложения мне нужно разместить свой API-ключ. Я делаю это на вкладке Settings, в заголовке Reveal Config Vars.

Я ввожу переменную KEY с моим API KEY, который я нахожу на ipgeolocation.abstractapi.com.

В моем приложении Flask я получаю свой API-ключ с помощью :

import os


key = os.environ['KEY']
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Procfile на /:

web: gunicorn app:app
Войти в полноэкранный режим Выйти из полноэкранного режима

С помощью этого файла я говорю Heroku использовать веб-сервер Dynos с gunicor. Мой основной файл называется app.py, поэтому я упоминаю его в своем Procfile.

Развертывание на Heroku

Вот архитектура моего проекта:

webapp/
|_ .git/
|_ gitignore
|_ templates
    |_ index.html
|_ app.py
|_ Procfile
|_ requirements.txt
Вход в полноэкранный режим Выход из полноэкранного режима

Требования.txt получены с помощью:

pip freeze > requirements.txt
Войти в полноэкранный режим Выйти из полноэкранного режима

С моим проектом и его переменной окружения мне остается только развернуть его на Heroku с помощью вкладки Deploy и выбора кнопки Deploy.

Вот результат

И вот результат:

Оцените статью
devanswers.ru
Добавить комментарий