Flask + Vue.js でWebアプリを起動してみました

Flaskは使ったことがあるのですが、Vue.jsと組み合わせて使ったことはなかったので、試してみました。

＊参考

Developing a Single Page App with Flask and Vue.js

＊Flaskとは

簡単で高機能なPythonのWebフレームワークで、RESTFull API の開発に最適です。

＊Vueとは

OSSのJavaScriptフレームワークです。ReactやAngularよりも簡単なので、初心者であってもすぐに始めることができます。また、高機能なので、最新のフロントエンドアプリケーションを作成するための機能が備わっています。

＊環境

MacOS
Python 2.7.14
Flask 1.0.2
Vue 2.9.6

＊FlaskでWebアプリを起動

仮想環境を作成して、FlaskとFlask-Corsをインストールします。

$ virtualenv flask1
$ source flask1/bin/activate
(flask1)$ pip install Flask==1.0.2 Flask-Cors==3.0.4

Flask-Cors
ブラウザでAjax通信をする場合、Webページを生成したドメイン以外へのHTTPリクエストができませんが、異なるドメインにアクセスしたいという要求に応えるために作られたのがCORS（Cross-Origin Resource Sharing）です。
Flask-CORSはFlaskの拡張機能で、Cross-Origin Ajaxを可能にします。

作業ディレクトリにapp.pyを新規作成します。
<app.py>

from flask import Flask, jsonify
from flask_cors import CORS

DEBUG = True

app = Flask(__name__)
app.config.from_object(__name__)

CORS(app)


@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')


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

アプリケーションを起動します。

$ python app.py

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 289-154-125
127.0.0.1 - - [22/Jul/2018 19:46:10] "GET / HTTP/1.1" 404 -
127.0.0.1 - - [22/Jul/2018 19:46:11] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [22/Jul/2018 19:46:18] "GET /ping HTTP/1.1" 200 -
127.0.0.1 - - [22/Jul/2018 19:46:18] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [22/Jul/2018 19:48:04] "GET /ping HTTP/1.1" 200 -

下記URLにアクセスすると、「“pong!”」が表示されます。
http://localhost:5000/ping

＊Vueを使ってWebアプリを起動

Vue CLIをインストールします。Vue CLIはVue.js開発環境セットアップの公式コマンドラインツールです。

$ npm install vue-cli -g

フロント用のディレクトリを作成し、Vueのプロジェクトを作成します。プロジェクト名など聞かれるので、下記にしておきます。（Vue buildなどは上下の矢印キーで他の選択ができます）

$ mkdir front
$ cd front/
$ vue init webpack client

? Project name client
? Project description A Vue.js project
? Author XXXXXX@gmail.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "client".


# Installing project dependencies ...
# ========================

必要なファイルが自動生成されています。
このままの状態でWebアプリを起動します。

$ cd client
$ npm run dev

下記にアクセスすると初期画面が表示されます。
http://localhost:8080

＊Flaskで表示した値をVueで表示させる

Ping.vueを新規に作成します。
const pathにFlask側のURLを設定します。
data() の中でメッセージを返却しています。ここに直接文字列を設定するとその値が返却されますが、今回はFlaskで表示させた「pong!」をVueで表示させるようにするようにします。

補足ですが、エラー処理にある「// eslint-disable-next-line」は、コメントアウトではないので、消すとビルドエラーになって起動できません。
<Ping.vue>

<template>
  <div class="container">
    <button type="button" class="btn btn-primary">{{ msg }}</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Ping',
  data() {
    return {
      msg: '',
    };
  },
  methods: {
    getMessage() {
      const path = 'http://localhost:5000/ping';
      axios.get(path)
        .then((res) => {
          this.msg = res.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
  created() {
    this.getMessage();
  },
};
</script>

src/router/index.jsを修正します。
「HelloWorld」になっていた箇所を「Ping」に修正します。
<src/router/index.js>

import Vue from 'vue';
import Router from 'vue-router';
import Ping from '@/components/Ping';  <--Pingに修正

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Ping',  <--Pingに修正
      component: Ping, <--Pingに修正
    },
  ],
});

App.vueを修正します。
のイメージ画像やフォーマットの設定を削除し、下記だけにします。
<App.vue>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  margin-top: 60px;
}
</style>

axiosをインストールします。

$ npm install axios@0.18.0 --save

axios
HTTP通信を簡単に行うことができるJavascriptライブラリです。REST-APIを実行したいときに使うと簡単に実装することができます。

BootStrapをインストールします。

$ npm install bootstrap@4.1.1 --save

main.jsにbootstrapのimportを追加します。
<main.js>

import 'bootstrap/dist/css/bootstrap.css';  <-- 追加
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

FlaskのWebアプリも起動した状態で、Vueも起動します。

$ npm run dev

FlaskのWebアプリを起動したときの値が表示されています。

＊所感

Vue.jsが流行っているせいか、新しい情報が多く見つかったので他にもわかりやすいサイトがあるかもしれません。今回は参考にさせて頂いたサイトの内容は英語でしたが、非常にわかりやすくて進めやすかったです。
手順通りに進めてみましたがまだ理解できていない部分も多いので、サイトの続きをやったり他のサイトも参考にしながら学習を続けていこうと思います。

もぐもぐプログラミング