LoginSignup
38
42

More than 5 years have passed since last update.

FlaskでReactアプリを走らせる

Last updated at Posted at 2018-12-25

最近AWSのPython開発環境であるChaliceを触っていて、少しFlaskに興味がわいたので試してみました。お手軽にWebサービスが作れるらしい。とりあえずReactアプリを動作させることだけに目標を絞りました。

1.Reactアプリ

過去記事「React Reduxの概要を理解する」で作成したTodoアプリをそのまま流用します。

npm run build 

buildディレクトリには、build/index.htmlやbuild/static/js/*などdeployに必要なファイルが揃っています。後でbuildを丸ごとflaskディレクトリ(後で作成)にコピーします。

cp -r build  flaskディレクトリ

2.Flaskの設定

venvを設定して、flaskをインストールします。venv は virtualenv が Python 3.3 から標準機能として取り込まれたものです。

mkdir flask
python -m venv flask
source ./flask/bin/activate
cd flask
pip install flask

プロジェクトディレクトリを作成します。

mkdir flask-test   # flaskディレクトリを作成
cd flask-test

以下がソースです。static_folderやtemplate_folderの指定以外は特に注意する必要はありません。

server.py
# server.py
from flask import Flask, render_template

app = Flask(__name__, static_folder="./build/static", template_folder="./build")

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

if __name__ == "__main__":
    app.debug = True
    app.run(host='0.0.0.0', port=8000)

この段階で、「1.Reactアプリ」で作成したbuildを、このディレクトリに、コピーします。

サーバを起動します。

python server.py

これで ルートパス "/"にアクセスすると、build/index.htmlが読み込まれ、Reactアプリが立ち上がります。

想像したように動作したので、あまりドキュメントを読む必要はなかったですね。

3.WARNING対策

サーバ起動時に、以下のようなWarningが出たので対策します。

WARNING: Do not use the development server in a production environment.

環境をdevelopmentに変更します。

.flaskenv
FLASK_APP=server.py
FLASK_ENV=development

必要なライブラリをインストールします。

pip install python-dotenv

サーバを立ち上げると、Warningが出ないことがわかります。

python server.py

今回は以上です。

38
42
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
42