Как обслуживать статические файлы в Flask

539

Так что это неловко. У меня есть приложение, которое я добавил вместе, Flaskи на данный момент оно просто обслуживает одну статическую HTML-страницу с некоторыми ссылками на CSS и JS. И я не могу найти, где в документации Flaskописано возвращение статических файлов. Да, я мог бы использовать, render_templateно я знаю, что данные не шаблонизированы. Я бы подумал send_fileили url_forбыл правильным, но я не мог заставить их работать. Тем временем я открываю файлы, читаю контент и Responseсобираю соответствующий mimetype:

import os.path

from flask import Flask, Response


app = Flask(__name__)
app.config.from_object(__name__)


def root_dir():  # pragma: no cover
    return os.path.abspath(os.path.dirname(__file__))


def get_file(filename):  # pragma: no cover
    try:
        src = os.path.join(root_dir(), filename)
        # Figure out how flask returns static files
        # Tried:
        # - render_template
        # - send_file
        # This should not be so non-obvious
        return open(src).read()
    except IOError as exc:
        return str(exc)


@app.route('/', methods=['GET'])
def metrics():  # pragma: no cover
    content = get_file('jenkins_analytics.html')
    return Response(content, mimetype="text/html")


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def get_resource(path):  # pragma: no cover
    mimetypes = {
        ".css": "text/css",
        ".html": "text/html",
        ".js": "application/javascript",
    }
    complete_path = os.path.join(root_dir(), path)
    ext = os.path.splitext(path)[1]
    mimetype = mimetypes.get(ext, "text/html")
    content = get_file(complete_path)
    return Response(content, mimetype=mimetype)


if __name__ == '__main__':  # pragma: no cover
    app.run(port=80)

Кто-то хочет дать пример кода или URL для этого? Я знаю, что это будет очень просто.

hughdbrown
источник
6
Почему бы не использовать nginx или другие веб-серверы для обслуживания статических файлов.
atupal
8
Имейте в виду, что то, как вы на самом деле «обслуживаете» файлы, вероятно, будет отличаться в зависимости от производства (на вашем веб-сервере) и разработки (на локальном компьютере или в другой области тестирования). Как указывалось в некоторых ответах, вы, вероятно, НЕ захотите обслуживать ваши статические файлы с помощью flask, но вместо этого разместите их в своем собственном каталоге, а затем фактический веб-сервер (Apache, nginx и т. Д.) Будет напрямую обрабатывать эти файлы.
Марк Хилдрет
75
«Почему бы не использовать nginx…» Потому что, когда я запускаю его в режиме разработчика на своем ноутбуке, приятно просто запускать одну вещь и только одну. Да, это немного по-другому, но это нормально.
Танатос
1
Даже в производстве это очень часто встречается, и, конечно, перед ним находится слой кэша (например, Varnish, Nginx или CDN).
Томас Деко

Ответы:

644

Предпочтительным методом является использование nginx или другого веб-сервера для обслуживания статических файлов; они смогут сделать это более эффективно, чем Flask.

Тем не менее, вы можете использовать send_from_directoryдля отправки файлов из каталога, что может быть довольно удобно в некоторых ситуациях:

from flask import Flask, request, send_from_directory

# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path='')

@app.route('/js/<path:path>')
def send_js(path):
    return send_from_directory('js', path)

if __name__ == "__main__":
    app.run()

Как не использовать send_fileили send_static_fileс помощью предоставленного пользователем пути.

send_static_file пример:

from flask import Flask, request
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path='')

@app.route('/')
def root():
    return app.send_static_file('index.html')
atupal
источник
12
для поддержки Windows: верните файл app.send_static_file (os.path.join ('js', path) .replace ('\\', '/'))
Тони БенБрахим
9
Может ли злоумышленник использовать этот метод для просмотра исходных файлов фляги, просмотрев вид / js / <некоторая хитрая кодировка "../ yourflaskapp.py">?
akiva
30
@kiwi send_from_directoryпредназначен для решения этой проблемы безопасности. Он существует, чтобы выдавать ошибку, если путь ведет за пределы конкретного каталога.
jpmc26
10
Msgstr "Не используйте send_file или send_static_file с указанным пользователем путем." почему бы нет?
Дрю Верли
6
@DenisV это не имеет ничего общего с Python, это соглашение Flask для определения параметров URL (см. Http://flask.pocoo.org/docs/0.12/api/#url-route-registrations ). В двух словах <path>это эквивалентно <string:path>, и потому что вы хотите, чтобы Flask обеспечивал параметр, подобный пути, который вы запрашиваете <path:path>.
b4stien
137

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

app = Flask(__name__,
            static_url_path='', 
            static_folder='web/static',
            template_folder='web/templates')
  • static_url_path=''удаляет любой предыдущий путь из URL (то есть по умолчанию /static).
  • static_folder='web/static'обслуживать любые файлы, найденные в папке, web/staticкак статические файлы.
  • template_folder='web/templates' аналогично это меняет папку шаблонов.

Используя этот метод, следующий URL вернет файл CSS:

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">

И, наконец, вот немного структуры папок, где flask_server.pyнаходится экземпляр Flask:

Вложенные статические колбы

Ричард Данн
источник
9
Это то, что сработало и для меня. Send_from_directory просто не работал, несмотря на все рекомендации для него.
GA
Работает отлично. Большое вам спасибо <3.
Thuat Nguyen
Как выглядит путь? get_static_file('index.html')?
Бэтмен
это хорошо работает, как сказал Г.А., у меня больше ничего не получалось, и это все исправило. Очень ценится
Андрей Старенький
81

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

app = Flask(__name__, static_url_path='/static')

С этим набором вы можете использовать стандартный HTML:

<link rel="stylesheet" type="text/css" href="/static/style.css">
sharpshadow
источник
4
Работает хорошо, если есть project/static/style.cssдоступный файл .
Павел Власов
6
строка "app = Flask (....)" нуждается в "static_folder", чтобы быть параметром тоже
datdinhquoc
Я боролся с этой проблемой в течение нескольких часов! Я пропустил только один аргумент!
LogicalBranch
78

Я уверен, что вы найдете там то, что вам нужно: http://flask.pocoo.org/docs/quickstart/#static-files

По сути, вам просто нужна «статическая» папка в корне вашего пакета, а затем вы можете использовать url_for('static', filename='foo.bar')или напрямую ссылаться на ваши файлы с помощью http://example.com/static/foo.bar .

РЕДАКТИРОВАТЬ : Как предлагается в комментариях, вы можете напрямую использовать '/static/foo.bar'путь URL, но url_for() накладные расходы (с точки зрения производительности) довольно низки, и использование его означает, что вы сможете легко настроить поведение впоследствии (изменить папку, изменить путь URL, переместите ваши статические файлы на S3 и т. д.).

b4stien
источник
14
Почему не '/static/foo.bar'напрямую?
Тайлер Лонг
3
@TylerLong прав - если вы хотите создать ссылку на файл, который уже сохранен в вашем статическом каталоге, вы можете сделать ссылку непосредственно на него без кода маршрута.
hamx0r
42

Вы можете использовать эту функцию:

send_static_file(filename)
Функция, используемая внутри для отправки статических файлов из статической папки в браузер.

app = Flask(__name__)
@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)
Черная мамба
источник
1
Это был единственный, который работал для меня без большой головной боли.
Кенни Пауэрс
Одни и те же. Я понимаю, что Flash в значительной степени опирается на идею, что мы собираемся использовать их систему шаблонов, а не какую-то RIA, где HTML создается в другом месте.
NiKo
15
ВНИМАНИЕ: Это серьезная проблема безопасности, чтобы звонить send_static_fileс пользовательским вводом. Не используйте это решение ни в чем важном.
xApple
41

То, что я использую (и оно отлично работает) - это каталог «templates» и «static». Я помещаю все мои файлы .html / шаблоны Flask в каталог шаблонов, а static содержит CSS / JS. Насколько мне известно, render_template отлично работает с общими html-файлами независимо от того, в какой степени вы использовали шаблонный синтаксис Flask. Ниже приведен пример вызова в моем файле views.py.

@app.route('/projects')
def projects():
    return render_template("projects.html", title = 'Projects')

Просто убедитесь, что вы используете url_for (), когда хотите сослаться на статический файл в отдельном статическом каталоге. Вы, вероятно, в конечном итоге сделаете это в своих ссылках на файл CSS / JS в html. Например...

<script src="{{ url_for('static', filename='styles/dist/js/bootstrap.js') }}"></script>

Вот ссылка на «каноническое» неофициальное руководство Flask - здесь много полезных советов, которые помогут вам начать работу.

http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

Кайл Сум
источник
38

Простейший рабочий пример, основанный на других ответах:

from flask import Flask, request
app = Flask(__name__, static_url_path='')

@app.route('/index/')
def root():
    return app.send_static_file('index.html')

if __name__ == '__main__':
  app.run(debug=True)

С HTML- кодом index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <div>
         <p>
            This is a test.
         </p>
    </div>
</body>
</html>

ВАЖНО: И index.html в папке называется статическим , то есть <projectpath>имеет .pyфайл, и <projectpath>\staticимеет htmlфайл.

Если вы хотите, чтобы сервер был виден в сети, используйте app.run(debug=True, host='0.0.0.0')

РЕДАКТИРОВАТЬ: для отображения всех файлов в папке, если требуется, используйте это

@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)

Что, по сути, является BlackMambaответом, так что дайте им голос.

EpicPandaForce
источник
Спасибо за важное наблюдение!
Глейдсон Кардозу да Силва
13

Для углового + стандартного потока, который создает следующее дерево папок:

backend/
|
|------ui/
|      |------------------build/          <--'static' folder, constructed by Grunt
|      |--<proj           |----vendors/   <-- angular.js and others here
|      |--     folders>   |----src/       <-- your js
|                         |----index.html <-- your SPA entrypoint 
|------<proj
|------     folders>
|
|------view.py  <-- Flask app here

Я использую следующее решение:

...
root = os.path.join(os.path.dirname(os.path.abspath(__file__)), "ui", "build")

@app.route('/<path:path>', methods=['GET'])
def static_proxy(path):
    return send_from_directory(root, path)


@app.route('/', methods=['GET'])
def redirect_to_index():
    return send_from_directory(root, 'index.html')
...

Это помогает переопределить «статическую» папку в пользовательскую.

user1671599
источник
основываясь на вашем ответе, я сделал это: stackoverflow.com/a/29521067/303114 обратите внимание, что я использовал 'add_url_rule' intead 'route', который в основном такой же
danfromisrael
7

Итак, я все заработал (основываясь на ответе @ user1671599) и хотел поделиться этим с вами, ребята.

(Я надеюсь, что я делаю это правильно, так как это мое первое приложение на Python)

Я сделал это -

Структура проекта:

введите описание изображения здесь

server.py:

from server.AppStarter import AppStarter
import os

static_folder_root = os.path.join(os.path.dirname(os.path.abspath(__file__)), "client")

app = AppStarter()
app.register_routes_to_resources(static_folder_root)
app.run(__name__)

AppStarter.py:

from flask import Flask, send_from_directory
from flask_restful import Api, Resource
from server.ApiResources.TodoList import TodoList
from server.ApiResources.Todo import Todo


class AppStarter(Resource):
    def __init__(self):
        self._static_files_root_folder_path = ''  # Default is current folder
        self._app = Flask(__name__)  # , static_folder='client', static_url_path='')
        self._api = Api(self._app)

    def _register_static_server(self, static_files_root_folder_path):
        self._static_files_root_folder_path = static_files_root_folder_path
        self._app.add_url_rule('/<path:file_relative_path_to_root>', 'serve_page', self._serve_page, methods=['GET'])
        self._app.add_url_rule('/', 'index', self._goto_index, methods=['GET'])

    def register_routes_to_resources(self, static_files_root_folder_path):

        self._register_static_server(static_files_root_folder_path)
        self._api.add_resource(TodoList, '/todos')
        self._api.add_resource(Todo, '/todos/<todo_id>')

    def _goto_index(self):
        return self._serve_page("index.html")

    def _serve_page(self, file_relative_path_to_root):
        return send_from_directory(self._static_files_root_folder_path, file_relative_path_to_root)

    def run(self, module_name):
        if module_name == '__main__':
            self._app.run(debug=True)
danfromisrael
источник
для лучшего понимания вы можете прочитать этот ответ: stackoverflow.com/a/23501776/303114 (который указывает на источник в github)
danfromisrael,
6

Один из простых способов сделать. Ура!

demo.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def index():
   return render_template("index.html")

if __name__ == '__main__':
   app.run(debug = True)

Теперь создайте имя папки под названием шаблоны . Добавьте ваш файл index.html внутри папки шаблонов

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Python Web Application</title>
</head>
<body>
    <div>
         <p>
            Welcomes You!!
         </p>
    </div>
</body>
</html>

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

-demo.py
-templates/index.html
Maheshvirus
источник
Вы не читали вопрос. Я прямо сказал, что знаю о render_templateрешении, но не хотел его делать, потому что файл был статическим без замен: «Да, я мог бы использовать render_template, но я знаю, что данные не шаблонизированы».
hughdbrown
Единственное решение, которое легко работает в Windows, спасибо!
Basj
4

Мысль о совместном использовании .... этот пример.

from flask import Flask
app = Flask(__name__)

@app.route('/loading/')
def hello_world():
    data = open('sample.html').read()    
    return data

if __name__ == '__main__':
    app.run(host='0.0.0.0')

Это работает лучше и проще.

Дживан Чайтанья
источник
Подскажите, пожалуйста, как это будет работать лучше?
Arsho
1
Любой другой метод дал мне раздражающий файл, который не нашел ошибок. nice1 jeevan
Дмитрий Д.Б.
3

Используйте redirectиurl_for

from flask import redirect, url_for

@app.route('/', methods=['GET'])
def metrics():
    return redirect(url_for('static', filename='jenkins_analytics.html'))

Это серверы всех файлов (css & js ...), указанных в вашем html.

forzagreen
источник
2

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

главная папка

/Main Folder
/Main Folder/templates/foo.html
/Main Folder/static/foo.css
/Main Folder/application.py(flask script)

Изображение основной папки, содержащей статические папки, папки с шаблонами и скрипт колбы

колба

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def login():
    return render_template("login.html")

HTML (макет)

<!DOCTYPE html>
<html>
    <head>
        <title>Project(1)</title>
        <link rel="stylesheet" href="/static/styles.css">
     </head>
    <body>
        <header>
            <div class="container">
                <nav>
                    <a class="title" href="">Kamook</a>
                    <a class="text" href="">Sign Up</a>
                    <a class="text" href="">Log In</a>
                </nav>
            </div>
        </header>  
        {% block body %}
        {% endblock %}
    </body>
</html>

HTML

{% extends "layout.html" %}

{% block body %}
    <div class="col">
        <input type="text" name="username" placeholder="Username" required>
        <input type="password" name="password" placeholder="Password" required>
        <input type="submit" value="Login">
    </div>
{% endblock %}
ESbros
источник
2
app = Flask(__name__, static_folder="your path to static")

Если у вас есть шаблоны в корневом каталоге, размещение app = Flask ( имя ) будет работать, если файл, содержащий его, также находится в том же месте, если этот файл находится в другом месте, вам нужно будет указать местоположение шаблона, чтобы включить Колба, чтобы указать на местоположение

Novak254
источник
4
Можете ли вы дать объяснение, почему это работает?
экономика
1
Чем он отличается от этого ответа, который дает объяснение?
Джино Мемпин
Я предложил объяснение моего ответа @economy
Novak254
1

Все ответы хорошие, но для меня хорошо работало только использование простой функции send_fileFlask. Это хорошо работает, когда вам просто нужно отправить html-файл в качестве ответа, когда host: port / ApiName покажет вывод файла в браузере


@app.route('/ApiName')
def ApiFunc():
    try:
        return send_file('some-other-directory-than-root/your-file.extension')
    except Exception as e:
        logging.info(e.args[0])```
Биной ​​С Кумар
источник
0

   По умолчанию колба использует папку «templates» для хранения всех ваших файлов шаблонов (любой простой текстовый файл, но обычно .htmlили какой-то другой язык шаблонов, например jinja2) и «статическую» папку для хранения всех ваших статических файлов (то есть .js .cssи ваши изображения).
   Вы routesможете использовать render_template()файл шаблона (как я уже говорил выше, по умолчанию он помещен в templatesпапку) в качестве ответа на ваш запрос. А в файле шаблона (обычно это файл в формате .html) вы можете использовать некоторые .jsфайлы и / или файлы `.css ', поэтому я предполагаю, что ваш вопрос заключается в том, как связать эти статические файлы с текущим файлом шаблона.

Харви
источник
0

Если вы просто пытаетесь открыть файл, вы можете использовать app.open_resource(). Таким образом, чтение файла будет выглядеть примерно так

with app.open_resource('/static/path/yourfile'):
      #code to read the file and do something
Чайтанья Шиваде
источник