Как создать веб-приложение с помощью Flask и развернуть его в облаке

1656550715 kak sozdat veb prilozhenie s pomoshhyu flask i razvernut ego v

автор Сальвадор Виллалон

Введение

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

Что такое HTTP и какое отношение он имеет к Flask?

HTTP – это протокол для веб-сайтов. Интернет использует его для взаимодействия с компьютерами и серверами. Позвольте привести вам пример того, как вы используете его каждый день.

Когда вы вводите имя веб-сайта в адресной строке браузера и нажмите клавишу Enter. Что происходит, так это то, что HTTP-запрос отправлен на сервер.

Например, когда я перехожу в адресную строку и ввожу google.com, а затем нажимаю Enter, на сервер Google посылается HTTP-запрос. Сервер Google получает запрос и должен понять, как интерпретировать этот запрос. Сервер Google отправляет ответ HTTP, содержащий информацию, которую получает мой браузер. Затем он отображает, что вы просили на странице в браузере.

Как участвует Flask?

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

Для этого мы воспользуемся Flask.

Что такое Flask?

1SnE5y1jhzqsSoFvgFyWc4mRLXX-iuG2DPtm
Flask (микрофреймворк Python)

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

Узнайте больше о микрофреймворках.

Как работает приложение Flask?

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

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
if __name__ == "__main__":
    app.run(debug=True)

Этот фрагмент кода хранится в нашем main.py.

Строка 1: Здесь мы импортируем модуль Flask и создаем веб-сервер Flask из модуля Flask.

Строка 3: __name__ означает этот текущий файл. В этом случае это будет main.py. Этот текущий файл будет представлять мою веб-приложение.

Мы создаем экземпляр класса Flask и называем его приложение. Здесь мы создаем новое веб-приложение.

Строка 5: Он представляет страницу по умолчанию. Например, если я перехожу на такой веб-сайт, как google.com/, после косого риска ничего нет. Тогда это будет страница Google по умолчанию.

rl8hovE8cNuaTMh6X8S8y4LLYoAVTJ5uvSMh
Вот что будет представлять @app.route(“/”).

Строка 6–7: Когда пользователь переходит на мой веб-сайт и переходит на страницу по умолчанию (после косого риска ничего), тогда будет активирована функция ниже.

строка 9: Когда вы запускаете сценарий Python, Python назначает имя «__main__» сценария во время выполнения.

Если мы импортируем другой сценарий, файл оператор if будет препятствовать запуску других сценариев. Когда мы запускаем main.py, он сменит свое название на __main__ и только тогда активируется оператор if.

Строка 10: Это запустит приложение. Имея debug=True позволяет возможным ошибкам Python отображаться на веб-странице. Это поможет нам отследить ошибки.

Давайте попробуем запустить main.py

В терминале или командной строке перейдите к папке, содержащей ваш main.py. Тогда сделайте py main.py или python main.py. В терминале или командной строке вы должны увидеть этот результат.

QynmMfSb7CoZkeuyC38ZLrTuA5eHtTkSxb6n

Важной частью является то, где это сказано Running on http://127.0.0.1:5000/.

127.0.0.1 означает этот локальный компьютер. Если вы не знаете этого (как я не знал, когда начинал — эта статья действительно полезна), главная идея заключается в том, что 127.0.0.1 и localhost ссылаются на этот локальный компьютер.

Перейдите по этому адресу и вы увидите следующее:

3TazBO699jNj7C88MyFbf-jlqseyWRPL5N4X
Поздравляю! Вы создали веб-сайт с помощью Flask!

Больше удовольствия с Flask

Раньше вы видели, что произошло, когда мы запустили main.py по одному маршруту – app.route(“/”).

Давайте добавим больше маршрутов, чтобы вы могли увидеть разницу.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)

в строки 9–11. мы добавили новый маршрут, на этот раз к /Сальвадор.

Теперь снова запустите main.py и перейдите к http://localhost:5000/salvador.

63Ib3PYx1He2Y0pRiH9As7OivEc-dBmsVdYE

Пока мы возвращали текст. Давайте сделаем наш веб-сайт лучше, добавив HTML и CSS.

HTML, CSS и виртуальные среды

HTML и шаблоны в Flask

Сначала создайте новый файл HTML. Я позвонил своим home.html.

Вот некоторый код, чтобы начать.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Tutorial</title>
  </head>
  <body>
    <h1> My First Try Using Flask </h1>
    <p> Flask is Fun </p>
  </body>
</html>

Важно помнить

Flask Framework ищет HTML файлы в папке с названием шаблоны. ты необходимо создать шаблоны папку и поместите туда все ваши HTML-файлы.

Ggzs2MzQiYmno0hkvLCbdj2-rWl4gzqkjZil
Не забывайте всегда сохранять main.py вне папки шаблонов

Теперь нам нужно изменить наш main.py, чтобы мы могли просматривать созданный HTML-файл.

from flask import Flask, render_template      

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)
  We made two new changes

Строка 1: Мы импортировали render_template() метод из каркаса колбы. render_template() ищет шаблон (файл HTML) в папке шаблонов. Затем он отобразит шаблон, о котором вы спрашиваете. Узнайте больше о функции render_templates().

Строка 7: Мы меняем возвращение так, чтобы теперь оно возвращалось render_template(“home.html”). Это позволит нам просмотреть наш HTML файл.

Теперь посетите свой локальный хост и посмотрите изменения: http://localhost:5000/.

YmVgj3pCcduDB6T5UBabraK-glrVPNGhc4R9

Давайте добавим больше страниц

Давайте создадим about.html внутри шаблоны папки.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>About Flask</title>
  </head>
  <body>
    <h1> About Flask </h1>
    <p> Flask is a micro web framework written in Python.</p>
    <p> Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.</p>
  </body>
</html>

Давайте внесем изменения, подобные тому, что мы делали раньше, к нашему main.py.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/about)
def about():
    return render_template("about.html")
    
if __name__ == "__main__":
    app.run(debug=True)

Мы внесли три новых изменения:

строка 9: Измените маршрут на"/about".

Строка 10: Измените функцию так, как она сейчас def about():

Строка 11: Измените возврат так, чтобы оно возвращалось. render_template("about.html").

Теперь просмотрите изменения: http://localhost:5000/about.

O1Oo1GXYO2LHnXRiz8-VmKuvpywABTV7MuVn

Давайте соединим обе страницы с помощью навигации

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

Сначала создадим a template.html. Это template.html будет служить родительским шаблоном. Наши два дочерних шаблона унаследуют код от него.

 <!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>Flask Parent Template</title>
   <link rel="stylesheet" href=" url_for("static',     filename="css/template.css") }}">
 </head>
 <body>
    <header>
      <div class="container">
        <h1 class="logo">First Web App</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href=" url_for("home') }}">Home</a></li>
            <li><a href=" url_for("about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    
    {% block content %}
    {% endblock %}
    
 </body>
</html>

Строка 13–14: Мы используем функцию, которая называется url_for(). Он воспринимает заглавие функции как аргумент. Теперь мы дали ему название функции. Больше информации о Функция url_for()..

Две строчки с фигурными скобками будут заменено содержимым home.html и about.html. Это будет зависят от URL-адреса, по которому просматривает пользователь.

Эти изменения позволяют дочерним страницам (home.html и about.html) подключаться к родительским страницам (template.html). Это позволяет нам этого не делать скопируйте код для меню навигации в about.html и home.html.

Содержимое about.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>About Flask</title>
  </head>
  <body>
    {% extends "template.html" %}
    {% block content %}
    
    <h1> About Flask </h1>
    <p> Flask is a micro web framework written in Python.</p>
    <p> Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.</p>
      
    {% endblock %}
  </body>
</html>

Содержимое home.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Tutorial</title>
  </head>
  <body>
    {% extends "template.html" %}
    {% block content %}
    
    <h1> My First Try Using Flask </h1>
    <p> Flask is Fun </p>
    
    {% endblock %}
  </body>
</html>

Давайте попробуем добавить немного CSS.

Добавление CSS на наш веб-сайт

Важное примечание

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

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

ui4uCQ2KhjEaJ1JQ71XgXwNIs5TkzPuaGU8W

Связывание нашего CSS с нашим HTML-файлом

Наш шаблон.html – это тот, который связывает все страницы. Мы можем вставить код сюда, и он применим ко всем дочерним страницам.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Flask Parent Template</title>
    
    <link rel="stylesheet" href=" url_for("static',    filename="css/template.css") }}">
    
</head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">First Web App</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href=" url_for("home') }}">Home</a></li>
            <li><a href=" url_for("about') }}">About</a></li>
          </ul>
        </nav></strong>
      </div>
    </header>
    
{% block content %}
{% endblock %}

 </body>
</html>

Строка 7: Здесь мы указываем путь к местоположению template.css.

Теперь просмотрите изменения: http://localhost:5000/about.

kvI3GKRQwhuu2O2giyPZBvu2am63So7OLH32

Движение вперед с помощью Flask и virtualenv

Теперь, когда вы знакомы с использованием Flask, можете начать использовать его в своих будущих проектах. Всегда нужно использовать virtualenv.

Зачем использовать virtualenv?

Вы можете использовать Python для других проектов, кроме веб-разработки.

В ваших проектах могут быть установлены разные версии Python, разные зависимости и пакеты.

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

Начало работы с virtualenv

Сначала запустите эту команду в командной строке или терминале:

pip install virtualenv

Во-вторых, сделайте следующее:

virtualenv “name of virtual environment”

Здесь можно дать название окружающей среде. Обычно я даю ему название виртуальный. Это будет выглядеть так: virtualenv virtual.

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

nlsgTQVp9ZrBHudAD4yKWF7tywO5fsaiYvHq
Как выглядит каталог

Активация виртуальной среды

Теперь перейдите к терминалу или командной строке. Выделите каталог, в котором содержится файл, который называется активировать. Файл вызван активировать находится внутри папки с названием Скрипты для Windows и bin для OS X и Linux.

Для среды OS X и Linux:

$ name of virtual environmnet/bin/activate

Для среды Windows:

name of virtual environment\Scripts\activate

Поскольку я использую компьютер Windows, когда я активирую среду, она будет выглядеть так:

FnmOzwRngsHOTcuJr4gMBnvyB6VhYGhcdyI2
Вы должны увидеть это в начале строки командной строки

Следующим шагом является установка flask в вашей виртуальной среде, чтобы мы могли запускать программу внутри нашей среды. Выполните команду:

pip install flask

Запустите программу и перейдите на http://localhost:5000/

Наконец-то мы создали наше веб-приложение. Теперь мы хотим показать всему миру наш проект.

(Дополнительную информацию о virtualenv можно найти в следующих руководствах по virtualenv и официальной документации Flask)

Давайте отправим его в Облако

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

Разверните веб-приложение в облаке

Чтобы развернуть нашу веб-приложение в облаке, мы будем использовать Google App Engine (стандартная среда). Это пример а Платформа в качестве услуги (PaaS).

PaaS относится к доставка операционных систем и сопутствующих услуг через Интернет без загрузки и установки. Этот подход позволяет клиентам создавать и развертывать программы без необходимости инвестировать в базовую инфраструктуру (Подробнее о PaaS см. TechTarget).

Google App Engine – это платформа как сервисное предложение, позволяющее разработчикам и предприятиям создавать и запускать приложения с помощью передовой инфраструктуры Google – TechOpedia.

Прежде чем начать:

Вам понадобится аккаунт Google. После создания аккаунта перейдите на консоль Google Cloud Platform и создайте новый проект. Кроме того, необходимо установить Google Cloud SDK.

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

Nb7fiERQFkKC5chGteCvWkQCkShVq7a1auUe
Структура папки проекта

Нам нужно будет создать три новых файла: app.yaml, appengine_config.py и requirements.txt.

Содержимое app.yaml:

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /static
  static_dir: static
- url: /.*
  script: main.app
  
libraries:
  - name: ssl
    version: latest

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

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

Библиотека SSL позволяет создавать безопасные соединения между клиентом и сервером. Каждый раз, когда пользователь заходит на наш веб-сайт, ему нужно будет подключиться к серверу, которым управляет Google App Engine. Для этого нам необходимо создать безопасное соединение. (Я недавно узнал об этом, так что если у вас есть предложения по этому, дайте мне знать!)

Содержимое appengine_config.py:

from google.appengine.ext import vendor

# Add any libraries installed in the "lib" folder.
vendor.add('lib')

Содержание файла requirements.txt:

Flask
Werkzeug

Теперь внутри нашей виртуальной среды (убедитесь, что ваш virtualenv активирован), мы собираемся установить новые зависимости, которые у нас есть в requirements.txt. Выполните эту команду:

pip install -t lib -r requirements.txt

-t lib: Этот флажок копирует библиотеки в папку lib, которая загружается в App Engine при развертывании.

-r requirements.txt: Говорит pip установить все из requirements.txt.

Развертывание программы

Чтобы развернуть приложение в Google App Engine, воспользуйтесь этой командой.

gcloud app deploy

Обычно я включаю демонстрировать [ID of Project]

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

gcloud app deploy --project [ID of Project]

Приложение

Теперь проверьте URL вашего приложения. Приложение будет храниться следующим образом:

"your project id".appspot.com

Мое приложение находится здесь: http://sal-flask-tutorial.appspot.com

Вывод

Из этого учебника вы все узнали, как:

  • Используйте фреймворк под названием Flask, чтобы использовать Python в качестве языка на стороне сервера.
  • Узнайте, как использовать HTML, CSS и Flask для создания веб-сайта.
  • Узнали, как создавать виртуальные среды с помощью virtualenv.
  • Чтобы развернуть приложение в облаке, используйте стандартную среду Google App Engine.

Что я научился

По этому небольшому проекту я научился трем важным вещам.

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

Статические веб-сайты:

  • Сервер предоставляет клиенту файлы HTML, CSS и JavaScript. Содержание сайта не меняется, когда пользователь взаимодействует с ним.

Веб-приложения:

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

На стороне сервера и на стороне клиента:

  • Я узнал, что веб-приложение имеет две стороны. Сторона клиента и сторона сервера. Клиентская сторона – это то, с чем взаимодействует пользователь, а сторона сервера – это место, где обрабатывается вся информация, которую ввел пользователь.

Во-вторых, я узнал о Cloud Services

Большинство моих предыдущих проектов были статическими веб-сайтами, и для их развертывания я использовал страницы GitHub. GitHub Pages — это бесплатный статический хостинг сайтов, предназначенный для размещения проектов из репозитория GitHub.

При работе с веб-приложениями я не мог использовать страницы GitHub для их размещения. GitHub Pages предназначен только для статических веб-сайтов, а не для чего-то динамического, например веб-приложение, для которого нужны сервер и база данных. Мне пришлось использовать облачные службы, такие как Amazon Web Services или Heroku

В-третьих, я научился использовать Python как язык на стороне сервера

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

Следующие шаги:

С помощью Flask можно строить всевозможные вещи. Я понял, что Flask помогает сделать код сайта более легким для чтения. Я сделал следующие программы в течение этого лета 2018 и надеюсь сделать больше.

Персональные проекты

Во время моей стажировки

Вот список ресурсов, которые помогли мне создать это руководство:

  • «App Engine – создавайте масштабируемые веб- и мобильные серверы на любом языке | App Engine | Google Cloud». GoogleGoogle, cloud.google.com/appengine/.
  • «Создание веб-сайта с помощью Python Flask». PythonHowpythonhow.com/building-a-website-with-python-flask/.
  • «Flask — Лекция 2 — Веб-программирование CS50 с помощью Python и JavaScript». YouTube6 февраля 2018 г., youtu.be/j5wysXqaIV8.
  • «Начало работы с Flask в стандартной среде App Engine Стандартная среда App Engine для Python Google Cloud». GoogleGoogle, cloud.google.com/appengine/docs/standard/python/getting-started/python-standard-env.
  • «Установка». Добро пожаловать | Flask (микрофреймворк Python)flask.pocoo.org/docs/0.12/installation/.
  • «Python – бесплатное развертывание сайтов Static Flask на страницах Github». Redditwww.reddit.com/r/Python/comments/1iewqt/deploying_static_flask_sites_for_free_on_github/.
  • Настоящий Python. «Виртуальные среды Python: пример – настоящий Python». Настоящий PythonReal Python, 7 августа 2018 г., realpython.com/python-virtual-environments-a-primer/.
  • Что такое облачные услуги? — Определение из WhatIs.com». SearchITChannelsearchitchannel.techtarget.com/definition/cloud-services.
  • Что такое Google App Engine (GAE)? — Определение из Техопедии». Techopedia.comwww.techopedia.com/definition/31267/google-app-engine-gae.

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

Добавить комментарий

Ваш адрес email не будет опубликован.