生產中的靜態檔案（由前端 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 命令。