Responder + Vue.jsプロジェクト作成手順

5664 ワード
responder Python Vue.js vue-cli Python テキストリンク

TL;DR

最近responderというPython製の非同期処理が売りのWebフレームワークを知ったので、Vue.jsと組み合わせてプロジェクトを作成した手順を紹介します。

完成したものはこちら
https://github.com/KeisukeToyota/responder-vue-sample

プロジェクト作成

Responder側

まずはディレクトリを作成してpipenvで環境を作っていきます。

$ mkdir responder-vue-sample
$ cd responder-vue-sample
$ pipenv --python 3.7

Pipfileを以下のように編集

[[source]]
name = "pypi"
url = "https://pypi.org/simple"
verify_ssl = true

[dev-packages]

[packages]
asgiref = "==2.3.2"
responder = "*"

[requires]
python_version = "3.7"

responder以外にasgirefをPipfileにバージョンを固定して記述しています。
asgirefはresponderの依存パッケージでresponderをインストールすれば自動的にインストールされるのですが、記事投稿時そのままでは3.0.0が入ってしまいVue.jsのビルド済みファイルが入るstaticディレクトリ配下のファイルを正しく読み込めないため2.3.2で固定しています。

以下のコマンドでライブラリをインストールします。

$ pipenv install

サーバープログラム

プロジェクト直下にapp.pyを作成してstatic/index.htmlを表示するだけのコードを記述します。

app.py
import responder

api = responder.API()

if __name__ == '__main__':
    api.add_route('/', static=True)
    api.run()

Vue.js側

まずvue-cliをグローバルにインストールします。

$ npm install -g @vue/cli

インストール後、先程作ったプロジェクト直下にVue.jsのプロジェクトを作っていきます。
カレントディレクトリの指定以外はお好みで大丈夫です。

$ vue create .
Vue CLI v3.5.1
? Generate project in current directory? (Y/n) Y
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

Vue.jsのプロジェクトの作成ができたらvue.config.jsを作成して、ビルドしたファイルをstaticに吐くためにoutputDir、ベースURLを/からstaticに変更するためにpublicPathを追加します。

vue.config.js
module.exports = {
  publicPath: "static",
  outputDir: "static"
}

最終的に以下のようなファイル構成になるかと思います。

$ tree -L 1
tree -L 1
.
├── Pipfile
├── Pipfile.lock
├── README.md
├── app.py
├── babel.config.js
├── node_modules
├── package.json
├── public
├── src
├── static
├── templates
├── vue.config.js
└── yarn.lock

ビルドと実行

では実際にビルドしてからサーバープログラムを起動してresponderからVue.jsが呼べているか確認していきます。

$ pipenv run responder build # or yarn build
$ pipenv run python app.py

これでlocalhost:5042にアクセスして以下のようにVue.jsのホーム画面が出たら終了です。お疲れ様でした。