Frontend로 Reat과 Backend로 Python을 섞어 웹프로그래밍하기

댓글수0 다음블로그 이동

프로그래밍

Frontend로 Reat과 Backend로 Python을 섞어 웹프로그래밍하기

주넥
댓글수0


Python의 경우 Flask비롯하여 웹 프로그래밍을 위한 다양한 모듈들을 지원된다.

또한 여차하면 exe 등 단독 실행파일을 만들 수 있어서 개발된 웹 서비스의 배포 deploy도 쉽다.


React의 경우 creat-react-app 을 사용하여 만든 웹서비스 front end의 static 파일들은

npm run build (or npm run-script build) 명령어로 compile을 할 경우 build 폴더 아래 생성된다.

이 build폴더를 통으로 배포 deploy하면 어떠한 Node 설치나 npm 모듈 설치도 불필요해, 상당히 배포/설치/실행이 쉬워진다.


그래서 든 생각이 frontend로 react를 사용하고, backend로 python flask를 사용할 수 없을까 고민하다 시도해 보았다.

아래와 같이 frontend용 static file들이 있는 static_folder 위치를 npm run build로 생성되는 build폴더로 하고,

root path 요청에 대해 index.html을 전달하고, 나머지 page요청에 대해 static file들을 전달하도록 한다.


# set the project root directory as the static folder, you can set others.
app = Flask(__name__static_url_path=''static_folder='build')

# ...
# ...

# Production release시 아래 코드 사용
@app.route('/'methods=['GET'])
def root():
    return app.send_static_file('index.html')

@app.route('/')
def static_prox(path) :
    return app.send_static_file(path)



그런데 개발 단계에서는 일일이 한줄 코딩하고 테스트 하기 위해서 npm run build로 frontend를 build하는 것은 귀찮다. 

그래서 python flask server 프로그래밍시 아래와 같이 frontend쪽 static file들에 대해서 요청이 들어오면
npm start 로 기동되는 frontend 서버로 redirect하도록 한다. 개발 중에는 아래 코드 블럭을 사용하고, 

release시에는 위의 코드 블럭을 사용하도록 하면 된다.


# 개발시는 아래 코드 사용
@app.route('/'methods=['GET'])
def root() :
    url = 'http://localhost:3000'
    #print('here===> ' + url,file=sys.stderr)
    r = requests.get(url)
    return Response(r.content);

@app.route('/static/js/<f>')
def jsfile(f) :
    url = 'http://localhost:3000/static/js/' + f
    #print('jsfile===> ' + url,file=sys.stderr)
    r = requests.get(url)
    return Response(r.content);

@app.route('/sockjs-node')
def sockjsnode() :
    url = 'http://localhost:3000/sockjs-node'
    #print('sockjs-node===> ' + url,file=sys.stderr)
    r = requests.get(url)
    return Response(r.content);


배포시에는 npm run build로 생성되는 build폴더와 backend 용으로 구현한 python code들을 배포하면 된다.

참고로 python flask 를 이용한 web server를 daemon 형태로 서비스 할 때, 

몇가지 방법이 있는데 개인적으로 선호하는 것은 gunicorn 이다. 


gunicorn3 --daemon --threads 10 -b localhost:8443 --keyfile serverssl.key --certfile serverssl.crt myserver:app


위와 같이 daemon 옵션과 threads 옵션을 주어야 한다. threads 옵션은 동시에 여러 request를 처리하기 위해서 1 이상의 값을 주도록 하고, threads 대신 --workers 옵션을 1 이상으로 주지 않도로 한다. workers의 경우 threads와 달리 별도 process가 되어서 ptyhon 코드내 data 공유가 되지 않는다.


관련 태그 목록 #flask #node #python #react #web
맨위로

https://blog.daum.net/junek69/87

신고하기