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

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

ディレクトリ構成
Vue
1. コンパイル後のファイル出力先変更
2. 環境変数の設定値
flask

ディレクトリ構成

　今回作成したアプリは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ファイルからの設定の読み取り」の項、参照。