Flask
静的ファイル
サーチ…
静的ファイルの使用
Webアプリケーションには、CSSやJavaScriptファイルなどの静的ファイルが必要なことがよくあります。 Flaskアプリケーションで静的ファイルを使用するには、パッケージ内またはモジュールの横にstaticという名前のフォルダを作成します。このフォルダは、アプリケーション上で/staticで利用できるようになります。
テンプレートを使用するプロジェクト構造の例は、次のとおりです。
MyApplication/
/static/
/style.css
/script.js
/templates/
/index.html
/app.py
app.pyはテンプレートレンダリングのFlaskの基本的な例です。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
テンプレートindex.html内の静的CSSおよびJavaScriptファイルを使用するには、特別な「静的」エンドポイント名を使用する必要があります。
{{url_for('static', filename = 'style.css')}}
したがって、 index.htmlには次のものが含まれます：
<html>
<head>
<title>Static File</title>
<link href="{{url_for('static', filename = 'style.css')}}" rel="stylesheet">
<script src="{{url_for('static', filename = 'script.js')}}"></script>
</head>
<body>
<h3>Hello World!</h3>
</body>
</html>
app.pyを実行すると、 http：// localhost：5000 /にウェブページが表示されます 。
プロダクション内の静的ファイル（フロントエンドWebサーバーによって提供）
Flaskの組み込みWebサーバは静的資産を提供することができ、これは開発に適しています。しかし、Flaskアプリケーションを提供するためにuWSGIやGunicornのようなものを使用している実動環境では、通常、フロントエンドWebサーバー（Nginx、Apacheなど）にオフロードされます。これは、小さなアプリケーションでは、特にすべての静的資産が1つのフォルダにある場合は、小さな/簡単なタスクです。静的アセットを提供するFlaskプラグインを使用している大規模なアプリケーションの場合は、これらのファイルの場所を覚えて、手動で1つのディレクトリにコピー/収集することが難しくなります。このドキュメントでは、 Flask-Collectプラグインを使用してそのタスクを簡略化する方法を示します。
このドキュメントの焦点は、静的資産のコレクションにあることに注意してください。その機能を説明するために、この例ではFlask-Bootstrapプラグインを使用します。これは静的資産を提供するプラグインです。また、Flask-Scriptプラグインを使用します。これは、コマンドラインタスクの作成プロセスを簡素化するために使用されます。これらのプラグインのどちらもこのドキュメントにとって重要なものではなく、機能を実証するためにここで使用されています。 Flask-Scriptを使用しない場合は、 Flask-Collectドキュメントを確認して、 collectコマンドを呼び出す別の方法を調べることをお勧めします。
また、これらの静的資産を提供するフロントエンドWebサーバの設定はこの文書の範囲外ですので、 NginxとApacheを使っていくつかの例を調べてみてください。この例では、Flask-Collectが作成する集中ディレクトリに "/ static"で始まるURLのエイリアスを付けています。
アプリは次のように構成されています：
/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インストールフラスコフラスコスクリプトフラスコブートストラップフラスコ収集
上記のファイル構造を確立します。
$ touch manage.py; mkdir -p app / {静的/ {css、js}、テンプレート};タッチAPP / {INITの.py、静的/ {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コマンドを使用します。