Como servir arquivos estáticos no Flask

539

Então isso é embaraçoso. Eu tenho um aplicativo que juntei Flaske, por enquanto, ele está apenas exibindo uma única página HTML estática com alguns links para CSS e JS. E não consigo encontrar onde na documentação Flaskdescreve o retorno de arquivos estáticos. Sim, eu poderia usar, render_templatemas sei que os dados não estão padronizados. Eu teria pensado send_fileou url_forera a coisa certa, mas não consegui fazê-los funcionar. Enquanto isso, estou abrindo os arquivos, lendo o conteúdo e criando um Responsetipo de mimet apropriado:

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)

Alguém quer dar uma amostra de código ou URL para isso? Eu sei que isso vai ser muito simples.

hughdbrown
fonte
6
Por que não usar o nginx ou outros servidores da web para servir arquivos estáticos.
Atupal
8
Lembre-se de que a maneira como você está "servindo" os arquivos provavelmente diferirá entre produção (no servidor da web) e desenvolvimento (no computador local ou em outra área de teste). Como algumas respostas apontaram, você provavelmente NÃO desejará servir seus arquivos estáticos com balão, mas, em vez disso, terá-os em seu próprio diretório e, em seguida, terá seu servidor da Web real (Apache, nginx, etc.), servidor desses arquivos diretamente.
precisa
75
"Por que não usar o nginx…" Porque, quando estou executando no modo de desenvolvedor no meu laptop, é bom apenas precisar executar uma coisa e apenas uma coisa. Sim, isso torna as coisas um pouco diferentes, mas tudo bem.
Thanatos
1
Mesmo na produção, é muito comum ver isso, com uma camada de cache à frente (como Varnish ou Nginx ou uma CDN).
Thomas Decaux

Respostas:

644

O método preferido é usar o nginx ou outro servidor da web para servir arquivos estáticos; eles poderão fazer isso com mais eficiência do que o Flask.

No entanto, você pode usar send_from_directorypara enviar arquivos de um diretório, o que pode ser bastante conveniente em algumas situações:

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()

Você não usar send_fileou send_static_filecom um caminho fornecido pelo usuário.

send_static_file exemplo:

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
fonte
12
para dar suporte ao Windows: retorne app.send_static_file (os.path.join ('js', caminho) .replace ('\\', '/')) #
22137 Tony BenBrahim
9
um invasor pode explorar esse método para procurar os arquivos de origem do balão, navegando em / js / <alguma codificação inteligente de "../ yourflaskapp.py">?
Akiva
30
O @kiwi send_from_directoryfoi projetado para resolver esse problema de segurança. Existe um erro de saída se o caminho levar para fora do diretório específico.
Jpmc26
10
"Não use send_file ou send_static_file com um caminho fornecido pelo usuário." Por que não?
Tirou Verlee
6
O @DenisV não tem nada a ver com o Python em si, é a convenção do Flask para definir parâmetros de URL (consulte http://flask.pocoo.org/docs/0.12/api/#url-route-registrations ). Em poucas palavras, <path>é equivalente a <string:path>, e porque você deseja que o Flask garanta um parâmetro semelhante ao caminho solicitado <path:path>.
b4stien
136

Se você deseja apenas mover a localização dos seus arquivos estáticos, o método mais simples é declarar os caminhos no construtor. No exemplo abaixo, movi meus modelos e arquivos estáticos para uma subpasta chamada web.

app = Flask(__name__,
            static_url_path='', 
            static_folder='web/static',
            template_folder='web/templates')
  • static_url_path=''remove qualquer caminho anterior da URL (ou seja, o padrão /static).
  • static_folder='web/static'para servir todos os arquivos encontrados na pasta web/staticcomo arquivos estáticos.
  • template_folder='web/templates' Da mesma forma, isso altera a pasta de modelos.

Usando esse método, a seguinte URL retornará um arquivo CSS:

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

E finalmente, aqui está uma amostra da estrutura da pasta, onde flask_server.pyestá a instância do Flask:

Pastas estáticas aninhadas para balões

Richard Dunn
fonte
9
Isso é o que funcionou para mim também. O Send_from_directory simplesmente não funcionou, apesar de todas as recomendações.
GA
Funciona perfeito. Muito obrigado <3.
Thuat Nguyen
Como é o caminho? get_static_file('index.html')?
Batman
isso funciona bem, como o GA disse, nada mais funcionou para mim e isso corrigiu tudo. Muito apreciado
Andrey Starenky
81

Você também pode, e este é o meu favorito, definir uma pasta como caminho estático para que os arquivos contidos no site sejam acessíveis a todos.

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

Com esse conjunto, você pode usar o HTML padrão:

<link rel="stylesheet" type="text/css" href="/static/style.css">
sharpshadow
fonte
4
Funciona bem se houver arquivo project/static/style.cssdisponível.
Pavel Vlasov
6
a linha "app = Flask (....)" também precisa de "static_folder" como parâmetro
datdinhquoc 5/18/18
Estou lutando com esse problema há horas! Só faltava um único argumento!
LogicalBranch 07/06/19
78

Tenho certeza de que você encontrará o que precisa lá: http://flask.pocoo.org/docs/quickstart/#static-files

Basicamente, você só precisa de uma pasta "estática" na raiz do seu pacote e, em seguida, pode usar url_for('static', filename='foo.bar')ou vincular diretamente seus arquivos em http://example.com/static/foo.bar .

EDIT : conforme sugerido nos comentários, você pode usar diretamente o '/static/foo.bar'caminho do URL, mas a url_for() sobrecarga (desempenho) é bastante baixa e, usando isso, você poderá personalizar facilmente o comportamento posteriormente (alterar a pasta, alterar o caminho do URL, mova seus arquivos estáticos para S3, etc).

b4stien
fonte
14
Por que não '/static/foo.bar'diretamente?
Tyler Longo
3
@TylerLong está certo - se você deseja vincular a um arquivo que já está salvo em seu diretório estático, pode vincular diretamente a ele sem nenhum código de rota.
hamx0r
42

Você pode usar esta função:

send_static_file(filename)
Função usada internamente para enviar arquivos estáticos da pasta estática para o navegador.

app = Flask(__name__)
@app.route('/<path:path>')
def static_file(path):
    return app.send_static_file(path)
Mamba negra
fonte
1
Este foi o único que funcionou para mim sem uma grande dor de cabeça.
Kenny Powers
Mesmo. Onde eu percebo que o Flash depende muito da ideia de que vamos usar o sistema de modelos, não de alguma RIA onde o HTML seja produzido em outro lugar.
NiKo 05/10
15
AVISO: É uma grande preocupação de segurança chamar send_static_filecom a entrada do usuário. Não use esta solução em nada importante.
xApple
41

O que eu uso (e está funcionando muito bem) é um diretório "templates" e um diretório "estático". Coloco todos os meus arquivos .html / modelos de balão dentro do diretório de modelos e estático contém CSS / JS. render_template funciona bem para arquivos html genéricos, que eu saiba, independentemente da extensão em que você usou a sintaxe de modelagem do Flask. Abaixo está um exemplo de chamada no meu arquivo views.py.

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

Apenas certifique-se de usar url_for () quando desejar fazer referência a algum arquivo estático no diretório estático separado. Você provavelmente acabará fazendo isso de qualquer maneira nos links de arquivos CSS / JS em html. Por exemplo...

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

Aqui está um link para o tutorial informal "canônico" do Flask - muitas ótimas dicas aqui para ajudá-lo a começar a correr.

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

Kyle Sum
fonte
38

Um exemplo de trabalho mais simples, com base nas outras respostas, é o seguinte:

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)

Com o HTML chamado index.html :

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

IMPORTANTE: E index.html está em uma pasta chamada estática , o que significa que <projectpath>tem o .pyarquivo e <projectpath>\statico htmlarquivo.

Se você deseja que o servidor fique visível na rede, use app.run(debug=True, host='0.0.0.0')

EDIT: Para mostrar todos os arquivos na pasta, se solicitado, use este

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

Qual é essencialmente BlackMambaa resposta, então dê a eles um voto positivo.

EpicPandaForce
fonte
Obrigado pela observação importante!
Gleidson Cardoso da Silva 22/03
13

Para fluxo angular + padrão, que cria a próxima árvore de pastas:

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

Eu uso a seguinte solução:

...
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')
...

Isso ajuda a redefinir a pasta 'estática' para personalizada.

user1671599
fonte
com base em sua resposta que eu fiz isso: stackoverflow.com/a/29521067/303114 aviso eu usei 'add_url_rule' intead 'rota', que é basicamente o mesmo
danfromisrael
7

Então, eu comecei a trabalhar (com base na resposta do @ user1671599) e queria compartilhá-lo com vocês.

(Espero estar fazendo certo, já que é meu primeiro aplicativo em Python)

Eu fiz isso -

Estrutura do projeto:

insira a descrição da imagem aqui

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
fonte
para uma melhor compreensão você pode ler esta resposta: stackoverflow.com/a/23501776/303114 (que aponta para a fonte no github)
danfromisrael
6

Uma das maneiras simples de fazer. Felicidades!

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)

Agora crie o nome da pasta chamada modelos . Adicione seu arquivo index.html dentro da pasta de modelos

index.html

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

Estrutura do Projeto

-demo.py
-templates/index.html
Maheshvirus
fonte
você não leu a pergunta. Eu disse expressamente que estava ciente da render_templatesolução, mas não queria fazê-lo porque o arquivo era estático, sem substituições: "Sim, eu poderia usar render_template, mas sei que os dados não estão padronizados".
hughdbrown 31/05/19
A única solução que funcionou facilmente no Windows, obrigado!
Basj 5/04
4

Pensou em compartilhar .... este exemplo.

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')

Isso funciona melhor e simples.

Jeevan Chaitanya
fonte
Você pode, por favor, explicar como isso funcionará melhor?
Arsho 8/04/19
1
lmao todos os outros métodos me deram algum arquivo irritante, não encontrei erros. nice1 jeevan
Dmitri DB
3

Use redirecteurl_for

from flask import redirect, url_for

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

Isso armazena todos os arquivos (css e js ...) mencionados no seu html.

forzagreen
fonte
2

A maneira mais simples é criar uma pasta estática dentro da pasta principal do projeto. Pasta estática contendo arquivos .css.

pasta principal

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

Imagem da pasta principal contendo pastas estáticas e de modelos e script de balão

frasco

from flask import Flask, render_template

app = Flask(__name__)

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

html (layout)

<!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
fonte
2
app = Flask(__name__, static_folder="your path to static")

Se você tiver modelos em seu diretório raiz, colocar o app = Flask ( nome ) funcionará se o arquivo que o contém também estiver no mesmo local, se esse arquivo estiver em outro local, será necessário especificar o local do modelo para ativar Balão para apontar para o local

Novak254
fonte
4
Você pode fornecer uma explicação sobre por que isso funciona?
economia em
1
Como é que difere desta resposta que fornece explicação?
Gino Mempin
Eu ofereci uma explicação para a minha resposta @economy
Novak254 22/04
1

Todas as respostas são boas, mas o que funcionou bem para mim é apenas usar a função simples send_filedo Flask. Isso funciona bem quando você só precisa enviar um arquivo html como resposta quando o host: port / ApiName mostrará a saída do arquivo no navegador


@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])```
Binoy S Kumar
fonte
0

   Por padrão, o balão usa uma pasta "modelos" para conter todos os seus arquivos de modelo (qualquer arquivo de texto sem formatação, mas geralmente .htmlou algum tipo de linguagem de modelo como jinja2) e uma pasta "estática" para conter todos os seus arquivos estáticos (por exemplo, .js .csse suas imagens).
   No seu routes, você pode usar render_template()para renderizar um arquivo de modelo (como eu disse acima, por padrão, ele é colocado na templatespasta) como resposta para sua solicitação. E no arquivo de modelo (geralmente é um arquivo .html), você pode usar alguns .jsarquivos e / ou `.css ', então acho que sua pergunta é como vincular esses arquivos estáticos ao arquivo de modelo atual.

Harvey
fonte
0

Se você está apenas tentando abrir um arquivo, você pode usar app.open_resource(). Portanto, ler um arquivo seria algo como

with app.open_resource('/static/path/yourfile'):
      #code to read the file and do something
Chaitanya Shivade
fonte