開発Tips アプリ公開:flask+Vue編

 オセロAIをWEBアプリ化した時のメモ!

ディレクトリ構成

 今回作成したアプリはindex.htmlをクライアントに送信後、あとはAjaxで通信のみでやり取りするアプリ。(内容的にはオセロアプリ)

app
 ├─back(flask)
 │  ├─reversi
 │  │  ├─model(アプリの自作モジュール)
 │  │  ├─static
 │  │  │  ├─css
 │  │  │  ├─img
 │  │  │  └─js
 │  │  ├─templates
 │  │  │  └─index.html
 │  │  ├─__init__.py(flask起動ファイル)
 │  │  └─reversi.py(BluePrintでルーディング登録)
 │  └─venv(python仮想環境)
 │ 
 └─front(vue)
    ├─node_modules
    ├─public
    ├─src
    └─vue.config.js(vueの設定ファイル)

主要なものを記載。

  • backはflaskとvueのコンパイル後ファイルを保存
  • frontはVueの作業スペース
  • Vueのdistの向き先はbackのtemplatesとstaticに出力に変更。(方法は後述)
  • Gitのバージョン管理はback下のみを対象とする想定。
  • Vueのソースもバージョン管理するならば、frontフォルダをback下で作成するのが良きか。

 ネット情報ではflaskのtemplatesとstaticをVueのdistフォルダ下に変更している記事しか見当たらない。上記はVue側の設定を変更している。何か弊害あるか気を付けること。

Vue

コンパイル後のファイル出力先変更

vue.config.jsをfront直下に作成。

module.exports = {
    publicPath: './',
    outputDir: '../back/reversi/templates',
    assetsDir: '../static',
    devServer: {
        proxy: 'http://127.0.0.1:5000'
    }
}

publicPath
 プロダクトのアプリケーションルートのパス。コンパイル後の各ファイルがpublicPath直下に配置されているとして作成される。「./」を指定すると、絶対パス参照ではなく、相対パスで各ファイルが作成されるため、どこに配置してもOKになる。
絶対パスで記載する場合は 
「https://www.foobar.com/my-app/」に配置 → 「/my-app/」を設定。

outputDir
 コンパイル後のファイルの出力先を記載する。vue.config.jsが存在するフォルダからのパスを記載する。

assetsDir
 js, css, img, fontsなどの静的なファイルが配置されるフォルダ。outputDirからのパスを記載する。

devServer
 開発用のサーバーの設定。
 proxy
  開発用サーバーで一致しないURLへのリクエストがあった場合、プロキシ先   を記載する。

公式のドキュメントはコチラ

Configuration Reference | Vue CLI
🛠️ Standard Tooling for Vue.js Development

環境変数の設定値

 以下のサイト参考。

Vue.jsで環境変数を超簡単に切り替える - Qiita
環境変数 本番環境、検証環境、開発環境の複数環境を作成したときにAPIの向き先を変えたりする必要がある。その都度ベタがきのコードを改修してfirebase,AWSにデプロイするなんていうのは嫌ですよね? また、中にはビルド時に秘...

簡単にまとめると、
以下で環境変数呼び出し。

const apiUrl = process.env.ENV_VALUE

環境変数の設定ファイル「env.XXX」はVueのルート直下に配置。各環境分作成する。

ENV_VALUE = abcdefj

環境を指定してサーバーをスタートできるようにpachage.jsonでコマンドを登録。

"scripts": {
    "serve": "vue-cli-service serve",
    "serve-任意": "vue-cli-service serve --mode XXX",

  }

flask

static,templatesフォルダの変更

 今回は変更しなかったが、使いそうなのでメモ。
flaskオブジェクトと作成するときに引数を追加するだけ。

app = Flask( __name__, static_folder="parts/static", template_folder="parts/templates")

CORSについて(Ajax時の注意)

 オリジンとは「http://example.com:80/app1/index.html」の太字。つまり、「スキーム」「ホスト」「ポート」。
 通常、ブラウザは、AオリジンからHTMLをもらって、BオリジンのAPIからデータをもらうみたいなことセキュリティのため不能。それを可能にするのがCORS:オリジン間リソース共有 (Cross-Origin Resource Sharing)。

CORSに詳しくは以下を参照。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://developer.mozilla.org/ja/docs/Glossary/Origin

ここではflaskでCORSを許可する方法を記載。
flaskでは、CORSのための機能を以下でインストール。

pip install Flask-Cors

下記のようにして、許可するオリジンを指定する。

from flask import Flask, render_template
from flask_cors import CORS

def create_app(test_config=None):
    app = Flask(__name__, instance_relative_config=True)
    CORS(app, origins=["http://127.0.0.1:8080"])


  // その他の設定

    return app

 今回のオセロアプリでは、開発中のフロントがVue開発サーバ(ポート8080)、APIのバックエンドサーバーがflask開発サーバ(ポート5000)で異なるオリジンだったため動作確認のためCORSを許可した。
 ちなみに、「localhost」を許可しても「127.0.0.1」でアクセスするとエラーになったので、「localhost」と「127.0.0.1」は異なるオリジン扱いみたい。

公式のflask-CORSの使い方の説明は以下。

Flask-CORS — Flask-Cors 3.0.10 documentation

SECRET_KEY

 セッションの暗号化とかセキュリティ関連で使われる値。
そのため、乱数で自動生成するのがよい。以下はシェル上で自動生成する用。

python -c 'import os; print(os.urandom(16))'

config.cfgなどのファイルを作成し、設定値を記載。
「組込みの設定値」の項参照。
https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/config.html#

DEBUG=True
TESTING=False
SECRET_KEY=******

シェルで環境変数を指定。

set FLASK_CONFIG=\path\to\config.cfg

configファイルの指定をappに追加。

def create_app(test_config=None):
    app = Flask(__name__, instance_relative_config=True)
    CORS(app, origins=["http://127.0.0.1:8080"])
    app.config.from_envvar(
'FLASK_CONFIG')

    from . import reversi
    app.register_blueprint(reversi.bp)

    return app

configファイルの指定方法は以下が分かりやすかった。

公式の設定ファイルの指定方法は「Pythonファイルからの設定の読み取り」の項、参照。

設定の処理の仕方(Configuration Handling) — Flask Documentation (2.0.x)

コメント

タイトルとURLをコピーしました