Рубрики
Без рубрики

Обслуживание статических файлов с помощью Flask

Автор оригинала: Tendai Mutunhire.

Настройка Колбы

Flask – отличный выбор для создания веб-приложений модульным способом с использованием Python. В отличие от Django и других аналогов, таких как Ruby on Rails, Flask-это микро-фреймворк. Это означает, что он включает в себя только то, что необходимо для основной веб-разработки, оставляя большую часть выбора за пределами этого минимального подмножества для вас.

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

Убедитесь, что у вас установлен Python 3. Для этого вы можете использовать pyenv , который поможет вам выбрать версии Python. Следуйте этому руководству для настройки Python 3 с помощью pyenv . Если вы предпочитаете virtualenv вместо этого, обязательно ознакомьтесь с документацией, но просто убедитесь, что у вас активна среда Python 3.

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

$ pip install flask

Теперь мы создадим базовое приложение Flask, которое обслуживает целевую страницу, на которой будет отображаться классический текст “Hello World”.

$ mkdir serving_static

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

# serve.py

from flask import Flask
from flask import render_template

# creates a Flask application, named app
app = Flask(__name__)

# a route where we will display a welcome message via an HTML template
@app.route("/")
def hello():
    message = "Hello, World"
    return render_template('index.html', message=message)

# run the application
if __name__ == "__main__":
    app.run(debug=True)

Теперь давайте создадим шаблон для отображения нашего сообщения. Создайте HTML-файл в этом месте “serving_static/templates/index.html” со следующим HTML-кодом. Обратите внимание на переменную message Python, переданную из serve.py файл выше.



  
    Flask Shop
  
  
    

{{message}}

Теперь мы готовы запустить приложение. Вернувшись в корневой каталог “serving_static”, запустите приложение с помощью команды:

$ python serve.py

Если сервер запустился правильно, вы получите сообщение о том, что он запустился, и URL-адрес для просмотра приложения. Откройте этот URL-адрес в своем браузере, и теперь вы должны увидеть наше сообщение “Hello, World”, отображаемое в браузере.

Привет Мир

Flask создает маршруты приложений с помощью декораторов, таких как тот, что показан в serve.py выше. Декоратор, такой как @app.route("/") создает новый маршрут по указанному пути. Определение функции ниже содержит логику приложения, которая будет выполняться при получении запроса по этому URL-адресу.

Обслуживание статических файлов С помощью статического каталога

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

Статические файлы в Колбе имеют специальный маршрут. Все URL-адреса приложений, начинающиеся с “/static”, по соглашению, обслуживаются из папки, расположенной в “/static” внутри корневой папки вашего приложения.

Это означает, что если мы создадим папку “/static” внутри нашей основной папки “serving_static”, мы сможем обслуживать статические файлы, такие как CSS, JS, изображения и другие ресурсы, просто поместив их в эту папку “/static”.

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

Во-первых, мы хотим, чтобы шаблон индексной страницы показывал посетителю название магазина, а также список книг, которые продаются. Обновите свой HTML – шаблон по адресу “serving_static_/templates/index.html” с этими изменениями выглядеть следует следующим образом.



  
    Flask Shop
    
  
  
    

{{message}}

On sale this week alone:

  1. Flask By Example
  2. Uncluttered Flask
  3. Flask From First Principles

Вы заметите, что название страницы теперь “Магазин колб”, и мы включили список флэш-книг для продажи. Посетитель должен иметь возможность увидеть на странице этот список книг, когда он посещает домашнюю страницу нашего приложения магазина.

Еще раз взгляните на головной раздел HTML-шаблона. Вы заметите, что теперь мы ссылаемся на новый файл, а именно на таблицу стилей CSS под названием “style.css”. Путь “/static/style.css” показывает, что этот файл находится в нашей папке “/static”.

Помните, что Flask автоматически обслуживает файлы, помещенные в “/static”, как статические файлы, вместо того чтобы пытаться запустить эти файлы как исходные файлы Python.

Давайте теперь создадим статическую папку в “serving_static/static”, чтобы содержать все наши статические файлы.

Внутри этой статической папки давайте создадим новый файл “style.css” и добавим следующие правила CSS, чтобы добавить некоторый стиль в наше приложение shop front.

/* static/style.css */

h1 {
    color: navajowhite;
    font-variant-caps: all-small-caps;
    font-size: 46px;
}

h3 {
  color: white;
  font-size: 36px;
}

li {
  color: red;
  font-size: 50px;
}

body {
    background: firebrick;
}

С помощью этих правил стиля наше приложение сбросит простой белый фон, который мы видели в нашем примере “Hello, World”, на более красочный красный фон “firebrick”. Мы также определяем отличительный белый стиль для текста на странице.

Теперь давайте действительно обновим сообщение, которое мы показываем на странице. Возвращайся в “serving_static/serve.py” и обновите переменную message , чтобы она была названием магазина. Найдите функцию hello() и обновите переменную message следующим образом:

# serve.py

...

# a route where we will display a welcome message via an HTML template
@app.route("/")
def hello():
    message = "The Flask Shop"
    return render_template('index.html', message=message)

...    

Теперь перезагрузите сервер и запустите python serve.py опять. Затем посетите URL-адрес приложения по адресу localhost:5000 , и вы должны увидеть наш список книг Flask.

Магазин Колб

Обратите внимание, что стиль приложения теперь берется из нашего CSS-файла, который обслуживается нашим приложением Flask из каталога “/static”.

Если вы еще раз посмотрите на наши “serving_static/templates/index.html” шаблон, перед закрывающим тегом мы вставляем тег JavaScript script.

URL-адрес этого скрипта – “/static/scripts.js”. Это еще один статический файл, который будет обслуживаться Flask из нашей папки “/static”.

Давайте теперь создадим этот файл JavaScript по адресу “serving_static/static/scripts.js”. Содержимое будет представлять собой некоторый JavaScript-код для динамического изменения цвета фона нашего приложения магазина каждую секунду. Это создает драматический эффект, чтобы привлечь внимание к ограниченной по времени распродаже в нашем вымышленном магазине колб.

// scripts.js

// a couple of different backgrounds to style the shop
var background1 = 'black';
var background2 = 'firebrick';

// this lets us toggle the background state
var color = true;

// every 1 second, switch the background color, alternating between the two styles
setInterval(function () {
  document.body.style.backgroundColor = (color ? background1 : background2)
  color = !color;
}, 1000);

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

Красный фон

к оттенку черного, как этот:

Черный фон

Функция setInterval в нашем JavaScript – коде меняет фон каждую секунду в непрерывном временном цикле.

Теперь мы обслуживаем файлы JavaScript и CSS из вашей папки “/static” для стилизации и улучшения поведения нашего приложения.

Если у вас есть дополнительные файлы CSS или JavaScript, вы можете добавить их в папку “/static” таким же образом и ссылаться на них, как мы сделали это выше.

Обслуживание файлов JavaScript

Еще одним распространенным случаем использования статических файлов в веб-приложениях является обслуживание сторонних библиотек, таких как Backbone.js, Vue.js, Bootstrap или React.

Любая библиотека, которую вы хотите включить, может обслуживаться почти так же, как мы видели выше из нашего каталога “/static”.

В качестве примера давайте посмотрим, как включить Backbone.js Библиотека JavaScript в нашем приложении.

Хорошей идеей при обслуживании сторонних библиотек является размещение их в специальном каталоге lib или vendor внутри папки “/static”. Вы можете назвать эту стороннюю папку как угодно.

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

Имея это в виду, создайте новую папку в разделе “serving_static/static/lib”. Так как мы включаем Backbone.js , скачать однофайловую версию Backbone.js здесь , а затем поместите его в новую папку lib внутри нашей папки “/static”.

Backbone.js имеет жесткую зависимость от Underscore.js , еще одна библиотека JavaScript, которая предоставляет множество необходимых утилит. Так что скачивайте последнюю версию Underscore.js здесь и поместите его рядом с Backbone.js в вашей папке “/static/lib”.

Теперь мы можем использовать Backbone.js включив его в шаблон страницы и вызвав его функции.

Вернись в свой шаблон, в файл “serving_static/templates/index.html”, найдите закрывающий тег . После этого на новой линии создадим новый нагревательный элемент, которым будем манипулировать Backbone.js.

Кроме того, добавьте новые теги скрипта перед закрывающим тегом . В эти теги мы включаем Underscore.js и Backbone.js, а также написать некоторый код для обновления DOM с помощью магистрального кода.

Обновленная часть index.html шаблон должен выглядеть следующим образом.



...
  1. Flask By Example
  2. Uncluttered Flask
  3. Flask From First Principles

Backbone

...

Наш последний

Магистральная версия

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

Обслуживание изображений и других типов файлов

Другие типы файлов, такие как изображения и даже файлы .txt и .pdf , могут обслуживаться аналогично файлам JS и CSS, которые мы показывали ранее. Просто поместите их в “/static” и свяжите с ними.

Давайте рассмотрим пример кода обслуживания изображений. Есть два изображения связанных книг: book1 и book2 . Загрузите их и поместите в новую папку в разделе “serving_static/static/images”.

Теперь мы можем добавить раздел “Связанные” книги в ваш шаблон индекса, где мы будем отображать изображения этих книг.

Обновите свой index.html шаблон со следующим:



...

Backbone

Related

Related Book 1 Related Book 2 ...

Теперь, когда вы перезагрузите сервер и зайдете в приложение в браузере, вы увидите изображения соответствующих книг.

связанные книги

Подготовка статических файлов с помощью системы сборки

Одна из самых больших вещей, отсутствующих в вашей настройке прямо сейчас, – это минимизация статических ресурсов, конкатенация JavaScript, CSS, а также другие оптимизации, чтобы сделать приложение быстрее. Кроме того, использование препроцессоров и компиляторов, таких как Sass, Coffeescript и Babel, должно обрабатываться вручную в нашей текущей настройке.

Использование системы сборки, такой как Webpack , Gulp , Brunch или Browserify , помогает автоматизировать этот процесс.

Если вы заинтересованы в изучении этого вопроса, вот руководство Brunch guide , чтобы добавить Brunch в качестве системы сборки для вашего проекта.

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

Обслуживание статических файлов в производстве

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

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

Кроме того, вы захотите использовать веб-сервер Python производственного класса, а не встроенный сервер Flask. Некоторые хорошие варианты – Gunicorn , Gevent и Apache с mod_wsgi .

Вывод

В этой статье мы увидели, как вы можете легко обслуживать статические активы с помощью Flask. Вы можете обслуживать JavaScript, CSS, изображения, а также другие статические файлы. Это можно сделать различными способами, самым простым из которых является использование каталога “/static”, который Flask будет использовать для обслуживания файлов клиенту.