生产中的静态文件（由前端 Web 服务器提供）

Created: November-22, 2018

Flask 的内置网络服务器能够提供静态资产，这适用于开发。但是，对于使用 uWSGI 或 Gunicorn 等服务于 Flask 应用程序的生产部署，提供静态文件的任务通常是卸载到前端 Web 服务器（Nginx，Apache 等）的任务。这是一个小型/简单的任务，使用较小的应用程序，尤其是当所有静态资产都在一个文件夹中时; 但是对于较大的应用程序，和/或使用提供静态资产的 Flask 插件的应用程序，则很难记住所有这些文件的位置，并手动将它们复制/收集到一个目录中。本文档介绍如何使用 Flask-Collect 插件简化该任务。

请注意，本文档的重点是静态资产的集合。为了说明该功能，本示例使用 Flask-Bootstrap 插件，该插件提供静态资产。它还使用 Flask-Script 插件，该插件用于简化创建命令行任务的过程。这些插件都不是本文档的关键，它们仅用于演示功能。如果你选择不使用 Flask-Script，则需要查看 Flask-Collect 文档以获取调用 collect 命令的其他方法。

另请注意，为这些静态资产提供服务的前端 Web 服务器的配置超出了本文档的范围，你需要查看使用 Nginx 和 Apache 的一些示例以获取更多信息。可以这么说，你将把以“/ static”开头的 URL 别名到 Flask-Collect 将在此示例中为你创建的集中目录。

该应用程序的结构如下：

/manage.py - The app management script, used to run the app, and to collect static assets
/app/ - this folder contains the files that are specific to our app
    | - __init__.py - Contains the create_app function
    | - static/ - this folder contains the static files for our app.
        | css/styles.css - custom styles for our app (we will leave this file empty)
        | js/main.js - custom js for our app (we will leave this file empty)
    | - templates/index.html - a simple page that extends the Flask-Bootstrap template

首先，创建你的虚拟环境并安装所需的软件包:( your-virtualenv）$ pip install flask flask-script flask-bootstrap flask-collect
建立上述文件结构：

$ touch manage.py; mkdir -p app / {static / {css，js}，templates}; 触摸 app / { init .py，static / {css / styles.css，js / main.js}}
建立 manage.py，app/__init__.py 和 app/templates/index.html 文件的内容：

# manage.py
#!/usr/bin/env python
import os
from flask_script import Manager, Server
from flask import current_app
from flask_collect import Collect
from app import create_app

class Config(object):
   # CRITICAL CONFIG VALUE: This tells Flask-Collect where to put our static files!
   # Standard practice is to use a folder named "static" that resides in the top-level of the project directory.
   # You are not bound to this location, however; you may use basically any directory that you wish.
   COLLECT_STATIC_ROOT = os.path.dirname(__file__) + '/static'
   COLLECT_STORAGE = 'flask_collect.storage.file'

app = create_app(Config)

manager = Manager(app)
manager.add_command('runserver', Server(host='127.0.0.1', port=5000))

collect = Collect()
collect.init_app(app)

@manager.command
def collect():
  """Collect static from blueprints. Workaround for issue: https://github.com/klen/Flask-Collect/issues/22"""
  return current_app.extensions['collect'].collect()

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

# app/__init__.py
from flask import Flask, render_template
from flask_collect import Collect
from flask_bootstrap import Bootstrap

def create_app(config):
  app = Flask(__name__)
  app.config.from_object(config)

  Bootstrap(app)
  Collect(app)

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

  return app

# app/templates/index.html
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}

{% block navbar %}
<div class="navbar navbar-fixed-top">
  <!-- ... -->
</div>
{% endblock %}

{% block content %}
  <h1>Hello, Bootstrap</h1>
{% endblock %}

有了这些文件，你现在可以使用管理脚本来运行应用程序：

$ ./manage.py runserver # visit http://localhost:5000 to verify that the app works correctly.

现在，首次收集你的静态资产。在此之前，值得注意的是，你应该在应用程序的顶层没有 static/文件夹; 这就是 Flask-Collect 将放置它将从你的应用程序和你可能使用的各种插件收集的所有静态文件的位置。如果你这样做在你的应用程序的顶层的 static/文件夹，你完全应该继续之前删除它，用干净的石板开始是见证的一个重要组成部分/理解什么瓶，收集一样。请注意，此指令不适用于日常使用，它只是为了说明 Flask-Collect 将为你创建此目录的事实，然后它将在那里放置一堆文件。

话虽如此，你可以运行以下命令来收集静态资产：

$ ./manage.py collect

执行此操作后，你应该看到 Flask-Collect 已创建此顶级 static/文件夹，并且它包含以下文件：

$ find ./static -type f # execute this from the top-level directory of your app, same dir that contains the manage.py script
static/bootstrap/css/bootstrap-theme.css
static/bootstrap/css/bootstrap-theme.css.map
static/bootstrap/css/bootstrap-theme.min.css
static/bootstrap/css/bootstrap.css
static/bootstrap/css/bootstrap.css.map
static/bootstrap/css/bootstrap.min.css
static/bootstrap/fonts/glyphicons-halflings-regular.eot
static/bootstrap/fonts/glyphicons-halflings-regular.svg
static/bootstrap/fonts/glyphicons-halflings-regular.ttf
static/bootstrap/fonts/glyphicons-halflings-regular.woff
static/bootstrap/fonts/glyphicons-halflings-regular.woff2
static/bootstrap/jquery.js
static/bootstrap/jquery.min.js
static/bootstrap/jquery.min.map
static/bootstrap/js/bootstrap.js
static/bootstrap/js/bootstrap.min.js
static/bootstrap/js/npm.js
static/css/styles.css
static/js/main.js

就是这样：只要你对应用程序的 CSS 或 JavaScript 进行编辑，或者更新了提供静态资产的 Flask 插件（如本例中的 Flask-Bootstrap），就可以使用 collect 命令。