Responder + Vue.jsプロジェクト作成手順
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のホーム画面が出たら終了です。お疲れ様でした。