Как изменять файлы в static flask

#9 Работа со статическими файлами во Flask

Статические файлы — это файлы, которые не изменяются часто. Это, например, файлы CSS, JavaScript, шрифты и так далее. По умолчанию Flask ищет статические файлы в папке static , которая хранится в папке приложения. Это поведение можно поменять, передав аргументу-ключевому слову static_folder название новой папки при создании экземпляра приложения:

Это изменит расположение статических файлов по умолчанию на папку static_dir внутри папки приложения.

Пока что можно остановиться на папке по умолчанию, statiс . Сперва нужно создать папку static в папке flask_app . В static создаем CSS-файл style.css со следующим содержимым.

Стоит вспомнить, что в уроке «Основы Flask» речь шла о том, что Flask автоматически добавляет путь в формате /static/<filename> для обработки статических файлов. Поэтому все, что остается — создать URL с помощью функции url_for() :

Дальше необходимо открыть шаблон index.html и добавить тег <link> :

Если сервер не запущен, его нужно запустить и открыть https://localhost:5000/ . Там будет страница с красным текстом:

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

Шаг 3. Обработка статических файлов, добавление страниц и использование наследования шаблонов с помощью приложения Flask

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

На этом шаге вы научитесь делать следующее:

• с помощью шаблонов элементов Visual Studio быстро добавлять новые файлы различных типов с удобным стереотипным кодом (шаг 3.1);
• обрабатывать статические файлы из кода (шаг 3.2, дополнительный);
• добавлять дополнительные страницы в приложение (шаг 3–3);
• использовать наследование шаблона для создания заголовка и панели навигации, которая используется на разных страницах (шаг 3–4).

Шаг 3–1. Знакомство с шаблонами элементов

По мере разработки приложения Flask обычно добавляется гораздо больше дополнительных файлов Python, HTML, CSS и JavaScript. Для каждого типа файла (и других файлов, таких как web.config, которые могут понадобиться при развертывании) Visual Studio предоставляет удобные шаблоны элементов для начала работы.

Чтобы просмотреть доступные шаблоны, перейдите к обозревателю решений, щелкните правой кнопкой мыши папку, в которой необходимо создать элемент, выберите Добавить > Новый элемент:

Чтобы использовать шаблон, выберите нужный шаблон, укажите имя файла и нажмите кнопку ОК. При добавлении элемента таким образом автоматически добавляется файл в проект Visual Studio и отмечает изменения для системы управления версиями.

Вопрос. Как Visual Studio определяет, какой шаблон элемента предложить?

Ответ. Файл проекта Visual Studio (PYPROJ) содержит идентификатор типа проекта, который помечает его как проект Python. Visual Studio использует этот тип идентификатора для отображения шаблонов элементов, подходящих для типа проекта. Таким образом Visual Studio может предоставлять богатый набор шаблонов элементов для многих типов проектов, который не требуется отсортировывать каждый раз.

Шаг 3–2. Обработка статических файлов из приложения

В веб-приложении, созданном с помощью Python (с помощью любой платформы), файлы Python всегда выполняются на сервере веб-узла и никогда не передаются на компьютер пользователя. Другие файлы, такие как каскадные таблицы стилей и JavaScript, используются исключительно браузером, поэтому сервер узла просто доставляет их без изменений всякий раз, когда они запрашиваются. Такие файлы называются статическими файлами, Flask может доставлять их автоматически без необходимости написания кода. В HTML-файлах, например, можно ссылаться на статические файлы, используя относительный путь в проекте. Первый раздел в этом шаге служит для добавления файла CSS в существующий шаблон страницы.

Если статический файл требуется предоставлять из кода, например через реализацию конечной точки API, Flask предоставляет удобный метод, который позволяет ссылаться на файлы, используя относительные пути в папке с именем static (в корневом каталоге проекта). Во втором разделе этого шага демонстрируется работа этого метода с помощью простого статического файла данных.

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

Использование статического файла в шаблоне

В обозревателе решений в проекте Visual Studio щелкните папку HelloFlask правой кнопкой мыши, выберите Добавить > Новая папка и назовите папку static .

Щелкните папку static правой кнопкой мыши и выберите Добавить > Новый элемент. В открывшемся диалоговом окне выберите шаблон Таблица стилей, назовите файл site.css и нажмите кнопку ОК. Файл site.css появится в проекте и откроется в редакторе. Структура папки должна выглядеть похоже на структуру на следующем рисунке:

Замените все содержимое site.css следующим кодом и сохраните файл:

Замените содержимое файла templates/index.html приложения приведенным ниже кодом, который заменяет элемент <strong> , используемый в шаге 2, элементом <span> , ссылающимся на класс стиля message . Использование класса стиля таким образом дает большую гибкость в стилизации элемента.

Запустите проект для просмотра результатов. По завершении остановите приложение и при необходимости зафиксируйте изменения в системе управления версиями (как описано в шаге 2).

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

Flask предоставляет функцию с именем serve_static_file , которую можно вызвать из кода для ссылки на любой файл в папке static проекта. В рамках следующей процедуры создается простая конечная точка API, которая возвращает статический файл данных.

Создайте папку static, если это еще не сделано: в обозревателе решений в проекте Visual Studio щелкните папку HelloFlask правой кнопкой мыши, выберите Добавить > Новая папка и назовите папку static .

В папке static создайте статический файл данных JSON с именем data.json со следующим содержимым (бессмысленный пример данных):

Во views.py добавьте функцию с маршрутом /api/data, которая возвращает статический файл данных с помощью метода send_static_file :

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

Вопрос. Существуют ли соглашения для организации статических файлов?

Ответ. Вы можете добавить другие файлы CSS, JavaScript и HTML в свою папку static любым способом. Типичный способ организации статических файлов — это создание вложенных папок fonts, scripts и content (для таблиц стилей и других файлов).

Вопрос. Как обрабатывать переменные URL-адреса и параметры запроса в API?

Шаг 3–3. Добавление страницы в приложение

Добавление еще одной страницы в приложение означает:

• добавление функции Python, которая определяет представление;
• добавление шаблона для исправления страницы;
• добавление необходимой маршрутизации в файл urls.py проекта Flask.

Следующие действия добавляются на странице "Дополнительные сведения" проекта HelloFlask и связывают эту страницу с домашней страницей:

В обозревателе решений щелкните правой кнопкой мыши папку templates, выберите Добавить > Новый элемент, щелкните шаблон элемента HTML-страница, назовите файл about.html и нажмите кнопку ОК.

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

Замените содержимое about.html следующей разметкой (вы замените явную ссылку на домашнюю страницу простой навигационной панелью в шаге 3–4):

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

Откройте файл templates/index.html и добавьте следующую строку прямо в элемент <body> , чтобы связать страницу сведений (опять же, вы заменяете эту ссылку навигационной панелью в шаге 3–4):

Сохраните все файлы с помощью команды меню Файл > Сохранить все или нажмите клавиши CTRL+SHIFT+S. (Этот шаг не является обязательным, так как при запуске проекта в Visual Studio файлы автоматически сохраняются. Однако об этой команде лучше знать.)

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

Вопрос. Имеет ли имя функции страницы значение в Flask?

Ответ. Нет, так как URL-адреса, для которых Flask вызывает функцию для получения ответа, определяет декоратор @app.route . Разработчики обычно подбирают имя функции в соответствии с маршрутом, но такое сопоставление необязательно.

Шаг 3–4. Использование наследования шаблона для создания заголовка и навигационной панели

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

Система шаблонов Flask (по умолчанию Jinja) предоставляет два способа повторного использования определенных элементов в нескольких шаблонах: включение и наследование.

Включение. Это другие шаблоны страниц, которые вставляются в определенное место в ссылочном шаблоне, используя синтаксис <% include <template_path> %>. Кроме того, можно использовать переменную, если необходимо динамически изменять путь в коде. Включение обычно используется в тексте страницы для извлечения общего шаблона в определенном расположении на странице.

Наследование. В начале шаблона страницы используется <% extends <template_path> %>для определения общего базового шаблона, на основе которого затем создается ссылочный шаблон. Наследование обычно используется для определения общих макета, панели навигации и других структур для страниц приложения, так что ссылочным шаблонам необходимо только добавлять или изменять определенные области базового шаблона, называемые блоками.

В обоих случаях <template_path> относится к папке templates приложения ( ../ или ./ также разрешены).

Базовый шаблон отделяет блоки с помощью тегов <% block <block_name> %>и <% endblock %>. Если ссылающийся на него шаблон использует теги с тем же именем блока, содержимое его блока переопределяет содержимое базового шаблона.

Далее демонстрируется наследование:

В папке templates приложения создайте HTML-файл (с помощью пункта контекстного меню Добавить > Новый элемент или Добавить > HTML-страница) с именем layout.html и замените его содержимое приведенным ниже кодом. Вы увидите, что этот шаблон содержит блок под названием content, который должен быть заменен для всех ссылающихся страниц:

Добавьте следующие стили в файл static/site.css приложения (в этом пошаговом руководстве не демонстрируются принципы адаптивного проектирования, однако эти стили дают интересный результат):

Измените templates/index.html для ссылки на базовый шаблон и переопределения блока content. Можно увидеть, что с помощью наследования этот шаблон упрощается:

Измените файл templates/about.html так, чтобы он тоже ссылался на базовый шаблон и блок content в нем переопределялся:

Запустите сервер для просмотра результатов. После завершения закройте сервер.

Так как в приложение были внесены значительные изменения, самое время зафиксировать изменения в системе управления версиями.

Работа со статическими файлами во Flask Python

Работа со статическими файлами – это отдельная тема для рассмотрения. Многие пользователи интересуются, что это такое и как с ними работать во Flask. Под статическими подразумевают те файлы, изменение которых происходит не очень часто. Типичные их примеры – CSS-файлы, JavaScript, шрифты, и так далее.

Если не задано другого, Flask осуществляет поиск статических файлов в папке static , хранящейся в папке приложения. Но возможно изменение этого поведения путем передачи аргументу-ключевому слову static_folder имени новой папки в процессе создания экземпляра программы.

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

Но на данный момент можно остановиться на папке по умолчанию static . Сначала необходимо сгенерировать папку static внутри flask_app . Здесь создается CSS-файл style.css , внутри которого есть такие правила стилей веб-страницы.

Flask автоматически добавляет путь в формате /static/<filename> , чтобы обрабатывать статические файлы. Следовательно, все, что остается – это создание URL с использованием функции url_for() .

Вывод будет таким.

Затем надо открыть шаблон index.html и добавить тег <link> .

Если сервер не запущен, то его надо запустить и открыть ссылку http://localhost:5000/ . После этого вы увидите страницу с текстом, окрашенным CSS-стилями в красный цвет.

Правда, такой метод работы со статическими файлами используется исключительно в процессе разработки. Если же надо создать реальные приложения, используются полноценные веб-сервера, такие как Nginx или Apache.

Отличие Nginx и Apache

Какой же сервер выбрать для разработки реальных приложений? Ответ не так прост, как может показаться на первый взгляд. Все зависит от задач, которые ставятся перед тем или иным сервером.

Если говорить о статистике, Apache популярнее, так как с ним работает около 60 миллионов веб-ресурсов. С Nginx – 40 миллионов. А теперь детальнее об отличиях между этими серверами.

Как обрабатываются соединения с клиентами

Apache генерирует сепарированный процесс на каждый запрос, приходящий от клиентского приложения. Это выглядит так: приложением отправляется запрос к серверу, после чего для него создается отдельный процесс на уровне последнего. После этого дает ответ клиенту, а потом ставит процесс на паузу до того момента, пока клиентом не закроется соединение.

Преимущества такого подхода в легкости его реализации. Также он позволяет упростить мониторинг и отладку. Но если highload-проект, то в этом случае такой принцип недостаточно хорошо работает. Процесс в любой ОС требует части ресурсов компьютера. А что делать, когда количество процессов растет экспоненциально? В этом случае обработка значительно затягивается, память заканчивается, а нагрузка на процессор возрастает. Если проект мелкий, это не будет проблемой, но если он будет развиваться и совершенствоваться, то тогда придется компенсировать минусы такого подхода очень мощным железом. Это, в свою очередь, стоит дорого.

Что касается Nginx , то в него включен master-процесс и дочерние. Как правило, мастер единственный, и он отвечает за дочерние процессы, такие как воркеры, загрузчики кеша, кеш-менеджер. Он же выполняет открытие портов и получает данные о конфигурации. Обычно воркеров несколько и зависит от количества ядер. Вообще, можно установить другое их количество, но рекомендуется делать их столько, сколько ядер имеется в наличии.

Эти дочерние процессы будут выполнять обработку всех все подключений неблокирующим способом.

Цикл бесконечный, сервер отвечает на все запросы клиентов. При окончании соединения, оно удаляется из перечня. Если одновременно нужно обслуживать больше, чем 10 тысяч соединений одномоментно, это – лучшее решение.

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

Отдаваемый контент

Apache гибко работает как со статическим, так и динамическим контентом. Он содержит набор инструментов для генерации динамики, в то время как Nginx изначально способен генерировать исключительно статический контент. Этот момент нужно учитывать, работая с этими серверами с помощью Flask.

Если нужно применять динамический контент, то тогда применяется Nginx + Apache. Вообще, первый называется нередко фронтенд-сервером, а второй – backend.

Конфигурирование

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

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

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

Nginx не имеет поддержки подобного способа настроек. Есть один файл с настройками, который и используется. Чтобы выполнить апгрейд конфигурации, необходимо отправить определенный сигнал мастеру, который уже далее все сделает автоматически. Правда, потребуется завершение работы воркеров, чтобы появилась возможность обновить конфигурацию. Следовательно, сделать это «на лету» не получится.

Взаимодействие с модулями

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

Что касается Ngix , то он также имеет модули, причем их больше – 130 официальных. Правда, их динамическая загрузка невозможна. Правда, это же – и преимущество, поскольку такой подход имеет лучшие параметры безопасности в сравнении с другими.

Интерпретация запросов

Apache может ее выполнять, как физический ресурс в файловой системе либо как URI, требующий дополнительной обработки.

Nginx выполнен так, чтобы поддерживалась и работа в роли веб-сервера, и в качестве прокси. Следовательно, он взаимодействует с URI.

Работа со скриптовыми языками

Apache включает один mod_php , который поддерживает только одну версию php и один конфигурационный файл. Что касается nginx , то можно совмещать разные версии php (python/ruby/perl и др.). При этом конфигурация каждого из процессов может быть отдельной.

Скорость работы

Тесты производительности говорят, что Nginx справляется в 2,5 раза быстрее со статикой. Поэтому для статики Nginx подходит лучше.

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

Поддержка операционных систем

Apache отлично работает с Unix-подобными ОС. Кроме этого, встроена поддержка Windows, включая последние версии. Что касается Nginx, то поддержка Windows в этом случае ограниченная. Правда, сейчас для веб-серверов Windows почти не используется.

Сообщество и поддержка

В случае с Apache , специализированной поддержки нет. Но есть любительское сообщество, в котором также есть и профессионалы в этой области. Они могут ответить на любые вопросы, которые возникают у пользователей. Nginx также имеет сообщество, но есть и коммерческая версия.

Документация и обучение

Оба этих сервера имеют официальную документацию. Nginx предусматривает платное обучение, причем полноценное: с экзаменом в конце. После того, как заканчивается курс, все участники получают сертификаты. Стоимость получения официального сертификата Nginx – 49 долларов (включая стоимость экзамена).

В целом, можно воспользоваться обоими решениями. Каждое из них стабильно, безопасно и универсально.

Как использовать Nginx + Flask?

Перед тем, как запускать Flask вместе с Nginx, необходимо убедиться в том, что соблюдаются следующие требования:

1. Сервер имеет SSH-доступ.
2. Nginx работает на сервере.
3. Установлен Python.
4. Вы – sudo-пользователь.

Настройка сервера

Для начала надо установить Python и PIP, потом создать папку для хранения проекта.

Затем изменить права доступа к этой папке.

Далее использовать apt для установки Flask и Gunicorn.

Затем вводите такую команду.

Затем можно использовать Flask на сервере. То есть, логика установки проста, и не требует особого подхода. Все делается через терминал так, как на Unix-подобных системах. Для обслуживания сервера используется Gunicorn, но это уже отдельная тема для рассмотрения.

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