Vue와 Flask로 IT 이벤트 정보를 지도로 표시하는 웹 앱을 만들었습니다.

소개

넷 서핑을 하고 있다면, 3일간을 제물에 바쳐 완성.

아티팩트

IT 이벤트 포털 사이트의 connpass
Signpost for connpass
GitHub

소위 SPA 애플리케이션에서 비동기 통신으로 얻은 응답을 동적으로 지도 표시합니다.

프레임워크 라이브러리 및 선정 이유

Flask:후술

Vue.js (Vue CLI) : 공부 중이므로 React보다 확실히 오기 위해

Mapbox GL JS (+VueMapbox) : 많은 피처를 표시하기 위해 운영 성능에 중점을 둡니다

BootstrapVue : 신

OpenStreetMap (배경지도) : 국토 지리원의 기본지도보다 건물 이름 등이 보기 쉽기 때문에

각종 포인트

CORS 제한

CORS는 오리진 간 자원 공유(Cross-Origin Resource Sharing)를 말한다.
간단하게는, 「허가를 얻지 않은 타인의 웹 사이트의 데이터를 비동기 통신으로 가져오는 것은 안돼」라고 이해하고 있다.
이번 경우에는 connpassAPI의 응답은 CORS 제한 때문에 프론트 측에서 얻을 수 없다. 일단 스스로 서버에서 받으면 CORS 제한에는 걸리지 않는다. 라고 하는 이유로, 당초는 firebase의 hosting나 function으로 대응하려고 생각하고 있었지만, connpassAPI에 액세스 해 응답을 받는 서버를 Flask로 구축하는 것으로 했다. Flask는 매우 간단하기 때문에 이번처럼 뭐든지 좋기 때문에 서버가 필요한 경우에 최적이라고 생각하고 개인적으로 좋아하기 때문에 채용.

Flask와 Vue.js의 환경 구축

Vue.js는 node.js와 함께 사용하는 경우가 많다고 생각합니다. 여러가지 조사한 결과, Flask와 공존해 개발할 수 있는 구성에 이르렀습니다.


루트에 Python 스크립트와 heroku 서버 용 파일을 배치하고 프론트 측은 vue 디렉토리에 넣습니다. 다음과 같이 설정하면 Flask는 vue/dist를 template 폴더로 참조하게 됩니다.

from flask import Flask, render_template, request, jsonify, make_response, send_file, redirect, url_for

app = Flask(__name__, static_folder='./vue/dist/static', template_folder='./vue/dist')


#以下ルーティング…

API 서버 구축

에 따라 액세스해, 얻은 응답을 프런트에 돌려주는 API 서버를 이하와 같이 만들었습니다.

import urllib.request, urllib.parse
import json
@app.route('/api/')
def getApi():
    keyword_or = request.args.get('keyword_or')
    ym = request.args.get('ym')
    ymd = request.args.get('ymd')
    owner_nickname = request.args.get('owner_nickname')
    start = request.args.get('start')
    order = request.args.get('order')
    count = request.args.get('count')
    all_params = {
        "keyword_or": keyword_or,
        "ym":ym,
        "ymd":ymd,
        "owner_nickname":owner_nickname,
        "start":start,
        "order":order,
        "count":100
    }

    params = {}
    #値がNoneとなっている要素はパラメータから削除する
    for key in all_params:
        if all_params[key] != None:
            params[key] = all_params[key]


    p = urllib.parse.urlencode(params)
    url = "https://connpass.com/api/v1/event/?" + p

    with urllib.request.urlopen(url) as res:
        html = res.read().decode().replace(r"\n","")
        jsonData = json.loads(html)
        return jsonify(jsonData)

connpassAPI와 동일한 매개 변수를 받고 그대로 connpassAPI에 던져 응답을 디코딩하고 json으로 반환합니다. 완전한 중계 서버라는 것입니다.

참고 사이트

connpassAPI 사양
Vue.js(vue-cli)와 Flask를 사용하여 간단한 앱 만들기 [후반 - 서버 측편]
BootstrapVue