手抜き
nginxでnode.jsの8080ポートへ
/つけるかつけないか要注意
http://example.com/name/foo
proxy_pass http://127.0.0.1/; -> http://127.0.0.1/foo
proxy_pass http://127.0.0.1; -> http://127.0.0.1/name/foo
-
location /wp {でなくlocation /wp/ {
/etc/nginx//etc/nginx/default.d/textlint.conf
location /textlint/ {
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
allow <許可IP>;
deny all;
proxy_pass http://127.0.0.1:8080/;
}
サーバー側node.js
CORS(Cross-Origin Resource Sharing)対応しておかないと問い合わせできないので許可する
app.js
// vim:set ts=2 et:
const TextLintEngine = require('textlint').TextLintEngine;
const express = require('express');
const cors = require('cors')
const bodyParser = require('body-parser');
const app = express();
// postデータのjsonをパースするおまじない
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
// allow cors
app.use(cors());
// 8080番ポートで待ちうける
app.listen(8080, () => {
console.log('Running at Port 8080...');
});
app.post('/api/request', (req, res, next) => {
const req_text = req.body.text;
const options = {
rules: [
"no-todo",
"max-kanji-continuous-len",
],
rulesConfig: {
"no-todo": true,
"max-kanji-continuous-len": true,
},
};
const engine = new TextLintEngine(options);
engine.executeOnText(req_text).then(results => {
res.json({
messages: results[0].messages
});
});
});
// その他のリクエストに対する404エラー
app.use((req, res) => {
var url = req.protocol + '://' + req.headers.host + req.url;
console.log(url);
res.sendStatus(404);
});
クライアントは単純にindex.html
flask用にinputのhidden属性でURLを取得する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<input type="hidden" name="textlint_url" value="http://localhost/textlint/api/request">
<form>
<div class="form-group">
<label for="lint_textarea">Example textarea</label>
<textarea class="form-control" id="lint_textarea" rows="10" placeholder="Write something here..."></textarea>
<button type="button" class="btn btn-primary" id="btn_lint">Save</button>
</div>
</form>
<script type="text/javascript">
(function () {
'use strict';
$('#btn_lint').on('click',function () {
console.log("1");
let text = $('#lint_textarea').val();
let textData = JSON.stringify(
{
'text': text,
});
console.log(textData)
let textlint_url = $('input[name=textlint_url]').val();
console.log(textlint_url)
$.ajax({
type: 'POST',
url: textlint_url,
data: textData,
contentType: 'application/json',
}).done(function (data, textStatus, jqXHR) {
console.log(data);
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log("failed");
});
});
}());
</script>
</body>
</html>