はじめに
フロントエンドで全部できるっちゃできるけど、やっぱり計算部分にPythonの楽さは欲しいなあ、という思いからサーバでプログラムを動的に動かすCGIを触ってみたのでそのまとめ。バックエンドは未だ疎い。
フリーレンタルサーバーのXREAのアカウントを持っているので実際にそこで試してみる。
無料から使える高機能・高品質レンタルサーバー | XREA（エクスリア）
やりたいことは、
- ボタンをクリック
- Vue.jsとaxiosを使ってデータをサーバに渡す
- Pythonで書かれたCGIスクリプトを実行して演算、結果をJSONで返す
- 同じ画面に返されたデータを表示
というかんじ。
今回は例として入力された2数の最大公約数と最小公倍数を計算して返すプログラムを作る。
作ってみる
ファイルの配置
├─ cgi-bin
│ └─ index.cgi
├─ index.html
└─ main.js
Pythonで書かれたCGIスクリプトは cgi-bin というディレクトリを作ってその中に投入。Pythonで書かれてるけど拡張子は .cgi 。
サーバにアップロードした後、CGIまわりのパーミッションを指定する必要があるけどそれは後述。
HTML (index.html)
<html>
<head>
<meta charset="UTF-8">
<title>最大公約数と最小公倍数を返す</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script type="module" src="main.js"></script>
</head>
<body>
<div id="app">
<!-- 入力部分 -->
<p>
<input v-model="a" type="number" value="12">
<input v-model="b" type="number" value="15">
<button v-on:click="getResult">計算</button>
</p>
<!-- 表示部分 -->
<p>
最大公約数: {{ result['gcd'] }}<br>
最小公倍数: {{ result['lcm'] }}
</p>
</div>
</body>
</html>
CDNでVue.jsとaxiosを読み込んでおく。
Vueで書いたJavaScriptのファイルは type="module" で読み込むと、DOMが読み込まれた後に実行されるので安心。
JavaScript (main.js)
var vm = new Vue({
el: '#app',
data: {
a: 12,
b: 15,
result: {}, // 返ってきたオブジェクトを格納する変数
},
methods: {
getResult: function() {
const url = './cgi-bin/';
// axiosでデータの受け渡し
axios.get(url, {
params: { // paramsでパラメータを指定
a: this.a,
b: this.b
}
})
.then(res => this.result = res.data) // データをresultに格納
}
}
});
Vueインスタンスを作ってaxiosでデータの受け渡しをする。
URLは ./cgi-bin/ 。 index.cgi という名前ならHTML同様ファイル名を指定しなくてもOKなもよう。
また、返ってくるデータ res.data はオブジェクトとして取り出せるので JSON.parse() とかで直す必要がなかった。（JSONにして返したんだからJSON文字列で返ってくるだろうという思い込みにやられた。）
ちなみにやるとこんなエラーが出る。
SyntaxError: Unexpected token o in JSON at position 1
o ってなんぞやと思ったら object の o らしい...
Python CGI (index.cgi)
# !/usr/local/bin/python3
# -*- coding: UTF-8 -*-
import cgi
import cgitb
import math
import json
cgitb.enable() # CGIのデバッグをオン
form = cgi.FieldStorage() # GETで得たデータを格納
a = int(form['a'].value) # データは文字列でやってくるので数値に変換
b = int(form['b'].value)
data = {
'gcd': math.gcd(a, b), # math.gcd() は Python 3.5 で追加されたらしい
'lcm': a * b // math.gcd(a, b)
}
print('Content-Type: application/json')
print()
print(json.dumps(data)) # json形式にして返す
行頭でPythonのインタプリタの場所を指定。レンタルサーバの仕様ページに各言語のCGIの実行パスが書いてあると思うので確認する。XREAだとここ。
Context-Type 指定の行の後の print() は改行のためで、これを入れないとダメな仕様みたい。 普通に Context-Type 文字列の最後に \n してもOK。
アップロード後はCGIスクリプトを入れたディレクトリとそのファイルのパーミッションを指定する必要があり、XREAにも推奨パーミッションが書いてある。
特に、CGIの実行ファイルは700以上（実行可能）にする必要があるのは注意（よく忘れた）。
以上のXREAの仕様が書いてあるリンクも貼っておく。
仕様 | 無料から使える高機能・高品質レンタルサーバー | XREA（エクスリア）
実行
ファイルを上げて実際に試してみた画面がこちら
いいかんじ。空欄や小数で送信したら普通にエラーになるけど、まあお試しなので。
以上。