궤도
[백엔드] Node.js 서버에서 flask api 호출하기(request 모듈) 본문
우리 프로젝트에서 기술적으로 가장 중요한 부분은 채점 부분이다.
사용자가 사진을 찍어서 업로드한 뒤 채점 결과를 받기까지의 과정을 그림으로 나타내면
일단 이렇게 사진을 업로드 한 뒤
이런식으로 채점이 이루어질 것이다.
이미지 업로드는 저번에 해서 블로그에 글로도 올렸다.
그리고 욜로 학습 담당 팀원이 모델을 파이썬에 이식하는 건 성공했고 내가 그걸 플라스크에 이식하는 것까지 성공했다.
그럼 이제 리액트로부터 넘어오는 url을 플라스크까지 보내서 결과를 받아 다시 리액트에 보내는 과정을 해야 한다.
아직 욜로와 ocr api 연결부분을 하지 않아서 당장 채점 알고리즘을 만들 순 없고
오늘은 그냥 리액트-노드-플라스크 사이에서 데이터가 잘 오가는지만 확인하려고 한다.
node.js 서버에서 다른 서버의 api를 호출하려면 request 모듈을 사용해야 한다고 한다.
npm install request --save
app.py
import numpy as np
import json
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/test', methods=['POST'])
def test():
lists = request.args['file_name']
lists = lists.split(',')
data = []
for list in lists:
data.append(list)
return jsonify({
'result': data
})
if __name__ == '__main__':
app.run()먼저 flask api다.
원래는 욜로 관련 코드도 있었는데 괜히 여기에 쓰면 헷갈리기만 할 것 같아서 지웠다.
프론트에서는 파일 이름 사이사이에 쉼표를 넣어서 한 줄로 보내준다고 했다.
예를 들어 http://blahblah/test 파일과 http://blahblah/test1 파일이 있다면
http://blahblah/test,http://blahblah/test1
이런식으로 오는 것이다. 이러면 길이가 꽤 길어질테니 get말고 post로 처리하기로 했다.
오늘은 테스트용이므로 이렇게 한 줄로 온 데이터를 쉼표기준으로 잘라서 다시 노드에 보내는 것만 하도록 하겠다.
@app.route('/test', methods=['POST'])
def test():
lists = request.args['file_name']
lists = lists.split(',')
data = []
for list in lists:
data.append(list)
return jsonify({
'result': data
})flask는 request.args로 인자를 넘긴다고 한다.
넘어온 인자를 lists에 저장한 뒤, 쉼표 기준으로 split한다.
그리고 그 결과를 data 배열에 담아서 node.js로 return 해주는 것이다.
제이슨 형식으로 잘 넘겨주기 위해 return jsonify라고 명시해주었다.
이 주소에서 돌아간다고 했으니 http://127.0.0.1:5000/test로 요청을 보내면 될 것이다.
routes/scoring.js
var models = require('../models');
const express = require('express');
var request = require('request');
const router = express.Router();
var Op = models.Sequelize.Op;
router.post('/', function (req, res, next) {
let body = req.body;
const file_name = body.file_name
const YoloResult = (callback)=>{
const options = {
method: 'POST',
uri: "http://127.0.0.1:5000/test",
qs: {
file_name: file_name
}
}
request(options, function (err, res, body) {
callback(undefined, {
result:body
});
});
}
YoloResult((err, {result}={})=>{
if(err){
console.log("error!!!!");
res.send({
message: "fail",
status: "fail"
});
}
let json = JSON.parse(result);
res.send({
message: "from flask",
status: "success",
data:{
json
}
});
})
});
module.exports = router;프론트로부터 post 요청이 들어오면 플라스크 서버의 api를 호출하여 그 결과를 받아 다시 프론트에 넘겨주는 코드이다.
let body = req.body;
const file_name = body.file_name
const YoloResult = (callback)=>{
const options = {
method: 'POST',
uri: "http://127.0.0.1:5000/test",
qs: {
file_name: file_name
}
}
request(options, function (err, res, body) {
callback(undefined, {
result:body
});
});
}프론트가 한줄로 넘겨준 file_name을 그대로 저장하여 request 요청을 할 때 그대로 보내준다.
const YoloResult = (callback)=>{
const options = {
method: 'POST',
uri: "http://127.0.0.1:5000/test",
qs: {
file_name: file_name
}
}이렇게 options에 요청의 종류(method)와 호출할 api의 url(uri), 그리고 넘겨줄 인자(qs)를 명시해준다.
request(options, function (err, res, body) {
callback(undefined, {
result:body
});
});아까 본 options을 담아 request 요청을 보낸 뒤 그 결과를 result에 담는다.
이 모든 과정을 YoloResult라는 상수에 담았고
YoloResult((err, {result}={})=>{
if(err){
console.log("error!!!!");
res.send({
message: "fail",
status: "fail"
});
}
let json = JSON.parse(result);
res.send({
message: "from flask",
status: "success",
data:{
json
}
});
})이렇게 쓰면 된다.
문제가 없다면 플라스크로부터 넘어온 정보가 result에 담겼을 것이고, 이걸 JSON.parse 하여 프론트로 넘겨준다.
한줄로 들어온 test,test1을 test와 test1으로 잘 분리한 것을 확인할 수 있다.
