【自由研究】Vue.js+Flask+Dockerで普通のWebアプリケーションを作る(その1:FlaskからVueのHelloWorld)

夏も本番ということで、家の外は暑くて死にそうです。やっぱりお家がNo.1！！

~~自主的に夏休み休業を取るということで、~~夏なんで、自由研究っぽくだいたいここ半年くらいに勉強したことを復習しつつ簡単Webアプリケーションを作ってみたいと思います。
小学生でもできるくらい簡単になるようにがんばります。簡単にならなかったら、全国の小学生諸君、、、ごめんなさい。

Vue + Flaskで画面を表示する
- Vue
- Flask
感想

Vue + Flaskで画面を表示する

まずは手始めに、VueのHello Worldの画面をFlaskにアクセスして表示できるようにします。

イメージこんな感じ。

f:id:nogawanogawa:20190810182920j:plain:w500

要するに、Flaskのサーバーだけを起動してVueのページを表示させたいわけです。

ディレクトリ階層としてはこんな感じですね。プロジェクトは適当に"myapp"にしました。

myapp/
├── app.py
└── frontend

Vue

今回は画面とか特にこだわりないので、デフォルトでやります。

プロジェクトを普通に作ります。

vue create frontend

そうするとfrontendというvueのプロジェクトが生成されます。

次にVueのconfigをいじります。デフォルトだと、vue.config.jsというファイルが生成されていなかったんで、frontendディレクトリ直下に作ります。

module.exports = {
    assetsDir: 'static',
    devServer: {
        proxy: 'http://localhost:5000'
    }
}

そんでもって、vueのビルドを実行します。

npm run build

するとfrontend/distというディレクトリが生成されて、その中にvueプロジェクトがビルドされたものが格納されていることが確認できます。

Flask

今回は超カンタンに、myapp/app.pyを作成するだけです。

コードもシンプルで、こんな感じ。

from flask import Flask, render_template

DEBUG = True

app = Flask(__name__,
            static_folder='./frontend/dist/static',
            template_folder='./frontend/dist'
            )
app.config.from_object(__name__)

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

そんでもってFlaskのサーバーを起動します。