Обслуживание статических файлов с помощью Flask в Python
Автор Flask – отличный выбор для создания модульных веб-приложений с использованием Python. В отличие от Django и других аналогов, таких как Ruby on Rails, Flask представляет собой микро-фреймворк. Это означает, что он включает в себя только то, что необходимо для базовой веб-разработки, оставляя вам большую часть выбора, помимо этого минимального подмножества.
Такой подход имеет огромное преимущество в упрощении вашего кода и рабочего процесса, особенно в небольших проектах. Здесь мы покажем вам, как обслуживать статические файлы, такие как JS, CSS и изображения, с помощью Flask.
Убедитесь, что у вас установлен Python 3. Для этого вы можете использовать pyenv, который поможет вам выбрать версии Python. Следуйте этому руководству, чтобы настроить программу с помощью pyenv. Если вы предпочитаете virtualenv, обязательно ознакомьтесь с документацией, но просто убедитесь, что у вас активна среда Python 3.
Прежде чем мы сможем начать обслуживать статические файлы с помощью Flask, нам нужно установить его и запустить простое приложение. Для этого установите Flask с помощью команды:
$ pip install flask
Теперь мы создадим базовое приложение Flask, которое обслуживает целевую страницу, на которой мы будем отображать классический текст «Hello World».
$ mkdir serving_static
В этом новом каталоге создайте новый файл, который создает приложение Flask и запускает его. В этом файле мы создаем маршрут 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-файл в папке «serv_static/templates/index.html» со следующим HTML-кодом. Обратите внимание на сообщение переменной Python, переданное из файла serve.py выше.
<!-- templates/index.html -->
<html>
<head>
<title>Flask Shop</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
Теперь мы готовы запустить приложение. Вернувшись в корневой каталог «serv_static», запустите приложение с помощью команды:
$ python serve.py
Если сервер запустился правильно, вы получите сообщение о том, что он запущен, и URL-адрес для просмотра приложения. Откройте этот URL-адрес в своем браузере, и теперь вы должны увидеть наше сообщение «Hello, World», отображаемое в браузере.
Flask создает маршруты приложений, используя декораторы, такие как тот, что показан в serve.py выше. Декоратор, такой как @ app.route («/»), создает новый маршрут по указанному пути. Определение функции ниже содержит логику приложения, которая будет запускаться при получении запроса по этому URL-адресу.
Обслуживание статических файлов
Наиболее распространенные статические файлы, которые вы хотите обслуживать в веб-приложении, – это файлы CSS вашего приложения для стилизации приложения, а также файлы JavaScript, которые добавляют динамическое поведение к странице. В этом разделе мы увидим, как обслуживать файлы CSS и JavaScript, добавляя их в простое приложение, которое мы создали выше.
Статические файлы во Flask имеют особый маршрут. Все URL-адреса приложений, начинающиеся с «/static», по соглашению обслуживаются из папки, расположенной внутри корневой папки вашего приложения.
Это означает, что если мы создадим папку «/static» внутри нашей основной папки «serve_static», мы сможем обслуживать статические файлы, такие как CSS, JS, изображения и другие ресурсы, просто поместив их в эту папку.
Теперь давайте изменим приветственное сообщение на индексной странице нашего приложения, чтобы представить «Магазин Flask», вымышленный магазин, где посетители могут покупать книги Flask.
Во-первых, мы хотим, чтобы шаблон страницы индекса показывал посетителю название магазина, а также список книг, которые продаются. Обновите свой HTML-шаблон в «serv_static_ /templates/index.html», добавив эти изменения, чтобы он выглядел следующим образом.
<!-- templates/index.html -->
<html>
<head>
<title>Flask Shop</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1>{{message}}</h1>
<h3>On sale this week alone:</h3>
<ol>
<li>Flask By Example</li>
<li>Uncluttered Flask</li>
<li>Flask From First Principles</li>
</ol>
<script src="/static/scripts.js" charset="utf-8"></script>
</body>
</html>
Вы заметите, что название страницы теперь «Магазин Flask», и мы включили список книг Flask для продажи. Посетитель должен иметь возможность увидеть на странице этот список книг при посещении домашней страницы нашего приложения магазина.
Взгляните еще раз на заголовок HTML-шаблона. Вы заметите, что теперь мы делаем ссылку на новый файл, а именно на таблицу стилей CSS с именем «style.css». Путь «/static/style.css» показывает, что этот файл находится в нашей папке «/static».
Помните, что Flask автоматически обрабатывает файлы, помещенные в «/static», как статические файлы, вместо того, чтобы пытаться запустить эти файлы, как исходные файлы Python.
Давайте теперь создадим статическую папку в «serv_static/static», чтобы содержать все наши статические файлы.
Внутри этой статической папки давайте создадим новый файл «style.css» и добавим следующие правила CSS, чтобы добавить стиль в наше приложение для витрины.
/* 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». Мы также определяем характерный белый стиль для текста на странице.
Теперь давайте обновим сообщение, которое мы отображаем на странице. Вернитесь в «serv_stati/serve.py» и обновите переменную сообщения, указав название магазина. Найдите функцию hello() и обновите переменную сообщения следующим образом:
# 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».
Если вы еще раз посмотрите на наш шаблон «serv_static/templates/index.html», перед закрывающим тегом </body> мы вставляем тег сценария JavaScript.
URL-адрес этого скрипта – «/static/scripts.js». Это еще один статический файл, который будет обслуживаться Flask из нашей папки «/static».
Давайте теперь создадим этот файл JavaScript в «serv_static/static/scripts.js». Содержимым будет некоторый код JavaScript для динамического изменения цвета фона нашего приложения магазина каждую секунду. Это создает драматический эффект, чтобы привлечь внимание к ограниченной по времени распродаже в нашем вымышленном магазине Flask.
// 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. Когда вы заходите в наше приложение в браузере, фон страницы должен мигать и меняться каждую секунду с оттенка красного, это:
К оттенку черного, вот так:
Функция setInterval в нашем коде JavaScript меняет фон каждую секунду в непрерывном временном цикле.
Теперь мы обслуживаем файлы JavaScript и CSS из нашей папки «/static» для стилизации и улучшения поведения нашего приложения.
Если у вас есть дополнительные файлы CSS или JavaScript, вы можете добавить их в папку «/static» таким же образом и ссылаться на них, как мы сделали выше.
Обслуживание файлов JavaScript
Другой распространенный вариант использования статических файлов в веб-приложениях – это обслуживание сторонних библиотек, таких как Backbone.js, Vue.js, Bootstrap или React.
Любая библиотека, которую вы хотите включить, может обслуживаться почти так же, как мы видели выше из нашего каталога «/static».
В качестве примера давайте посмотрим, как включить библиотеку JavaScript Backbone.js в наше приложение.
Хорошая идея при обслуживании сторонних библиотек – разместить их в специальной папке lib или vendor в папке «/static». Вы можете назвать эту стороннюю папку как хотите.
Ключевым моментом, однако, является размещение внешних библиотек в их собственной папке, где вы можете легко обновлять версии или выполнять другое управление отдельно от кода вашего собственного приложения.
Имея это в виду, создайте новую папку в «serv_static/static/lib». Поскольку мы включаем Backbone.js, загрузите однофайловую версию, а затем поместите ее в новую папку lib внутри нашей папки «/static».
Backbone.js сильно зависит от Underscore.js, другой библиотеки JavaScript, которая предоставляет множество важных утилит. Так что загрузите последнюю версию Underscore.js и поместите ее рядом с Backbone.js в папку «/static/lib».
Теперь мы можем использовать Backbone.js, включив его в наш шаблон страницы и вызвав его функции.
Вернувшись в свой шаблон, в файле «serv_static/templates/index.html» найдите закрывающий тег </ol>. После этого на новой строке создайте новый элемент заголовка, которым мы будем управлять с помощью Backbone.js.
Кроме того, добавьте новые теги сценария перед закрывающим тегом </body>. В эти теги мы включаем Underscore.js и Backbone.js, а также пишем код для обновления DOM с использованием кода Backbone.
Обновленная часть шаблона index.html должна выглядеть следующим образом.
<!-- templates/index.html -->
...
<ol>
<li>Flask By Example</li>
<li>Uncluttered Flask</li>
<li>Flask From First Principles</li>
</ol>
<h4 id="version" style="color:white;">Backbone</h4>
<script src="/static/scripts.js" charset="utf-8"></script>
<script src="/static/lib/underscore.js" charset="utf-8"></script>
<script src="/static/lib/backbone.js" charset="utf-8"></script>
<script type="text/javascript">
document.getElementById('version').innerHTML = "Proudly built with Backbone.js version " + Backbone.VERSION;
</script>
</body>
...
Наш последний тег <script> выше использует Backbone.js. Если вы перезапустите сервер сейчас, вы увидите, что текст на странице внизу показывает правильную версию Backbone.js, которую мы используем.
Если бы мы использовали Vue.js, React или любую другую библиотеку, мы могли бы добавить ее и обслуживать ее статические файлы таким же образом, делая ее доступной для нашего приложения.
Обслуживание изображений и других типов файлов
Другие типы файлов, такие как изображения и даже файлы .txt и .pdf, могут обслуживаться аналогично файлам JS и CSS, которые мы показали ранее. Просто поместите их в «/static» и сделайте ссылку на них.
Давайте посмотрим на пример кода обслуживания изображений. Вот два изображения связанных книг: book1 и book2. Загрузите их и поместите в новую папку в «serv_static/static/images».
Теперь мы можем добавить раздел «Связанные» книги в наш индексный шаблон, где мы будем отображать изображения этих книг.
Обновите свой шаблон index.html следующим образом:
<!-- templates/index.html --> ... <h4 id="version" style="color:white;">Backbone</h4> <h3>Related</h3> <img src="/static/images/book1.png" alt="Related Book 1" width="20%" height="auto"> <img src="/static/images/book2.jpg" alt="Related Book 2" width="20%" height="auto"> ...
Теперь, когда вы перезапустите сервер и зайдете в приложение в браузере, вы увидите изображения связанных книг.
Подготовка статических файлов с помощью системы сборки
Одна из самых больших вещей, которых сейчас не хватает в нашей настройке, – это минимизация статических ресурсов, конкатенация JavaScript, CSS, а также другие оптимизации для ускорения работы приложения. Кроме того, в нашей текущей настройке использование препроцессоров и компиляторов, таких как Sass, Coffeescript и Babel, необходимо обрабатывать вручную.
Использование системы сборки, такой как Webpack, Gulp, Brunch или Browserify, помогает автоматизировать этот процесс.
Если вы заинтересованы в изучении этого, вот руководство по бранчу, чтобы добавить бранч в качестве системы сборки для вашего проекта.
Или вы можете просмотреть документацию по предпочитаемой системе сборки, чтобы узнать, как ее настроить и интегрировать в свое приложение Flask.
Обслуживание статических файлов в производственной среде
Запуск вашего кода в производственной среде немного отличается от среды разработки. В производственной среде, в зависимости от вашего приложения, вы можете столкнуться с гораздо более высокими объемами трафика, что может сказаться на вашем сервере.
В производственной среде рекомендуется обслуживать статические файлы с таким сервером, как nginx, чтобы максимально снизить нагрузку на ваш веб-сервер Python. Если вы обслуживаете большое количество файлов, это ускорит ваше приложение.
Кроме того, вы захотите использовать веб-сервер Python производственного уровня, а не встроенный сервер Flask. Хорошими вариантами являются Gunicorn, Gevent и Apache с mod_wsgi.
Заключение
В этой статье мы увидели, как с помощью Flask можно легко обслуживать статические ресурсы. Вы можете использовать JavaScript, CSS, изображения, а также другие статические файлы. Это можно сделать разными способами, самым простым из которых является использование каталога «/static», который Flask будет использовать для обслуживания файлов клиенту.
