기본 콘텐츠로 건너뛰기

파이썬으로 React구현하기 (웹팩3) | Flask-React-Webpack3

파이썬으로 React구현하기 (웹팩3) | Flask-React-Webpack3

git저장소 이동하기(클릭)

Flask-React-Webpack3

Flask + React + Redux + React Router + Webpack3

React React-Redux5 React-Router4 Webpack3 Webpack-Dev-Server Python3 Flask jinja2 HMR

어떤 사람들에게 필요한 프로젝트인가요?

보통 리액트를 사용하는 프로젝트일 경우 서버단은 node.js로 구현하는게 깔끔하겠지만, 백엔드 서버는 파이썬으로 구축하면서 리액트로 프런트를 구축해야 할 상황이 와서 해당 프로젝트를 만들게 되었습니다.

부여된 조건

서버단 언어는 Python이여야한다. Front는 React와 번들링이 되야 하며 HMR(Hot Module Replacement - 실시간반영)이 지원되어야한다. Front 개발환경에서도 문제없이 Python Backend단 Api 등 소스호출이 가능해야한다. Front 개발환경에서도 Jinja2 템플릿을 사용할수 있어야한다. 특정 소스는 번들링 없이 그대로 연결 및 사용할 수 있어야한다.(ex> 외부 부트스트랩과 연결을 위해서) > 데브서버와 백엔드서버 경로 일치화

상기 내용을 모두 충족하면서, 결과적으로 디플로이 환경은 Python이 되고, Python 어플리케이션 파일을 실행했을때, Front-end Webpack Dev Server에서 보는 View가 모두 적용될 수 있게 만들었습니다. 특히나 React의 라우터와 리덕스 등이 문제없이 동작하며, 프런트 작업자들이 변경사항을 바로바로 확인할 수 있는 환경을 만드는데 초첨을 두었습니다.

사용해보기

1) 파이썬 패키지 설치

pip install -r requirements.txt

2) 노드 패키지 설치

cd static

npm install 또는 yarn

3) 백엔드 서버 기동 (python app.py 백그라운드로 실행) : loaclhost:5000

cd static

./server.sh

./server.sh 스크립트를 실행시키면 백엔드 파이썬 서버가 기동됩니다. 해당 백엔드 서버는 나중에 디플로이할때의 환경이 되며, 프런트서버에서 api호출할 경우, 해당 서버를 바라보게 됩니다. 즉, 프런트 개발서버를 기동전에 해당 app.py을 실행시켜두어야 합니다. 이 상태에서 5000번에 접속해보면 아무것도 뜨지 않을텐데요 이유는 Flask가 static/dist 폴더를 기본으로 바라보고있기 때문입니다. 5)번에서 처럼 yarn build를 하고나면 Front의 View가 반영되겠죠?

4) 프런트엔드 개발서버 기동 (Webpack Dev Server) : localhost:8080

yarn start

Webpack-dev-server를 이용한 프런트용(HMR) 개발서버가 기동이 됩니다.

5) 디플로이 하기

yarn build

해당 webpack.config.js를 보면, webpack-dev-server의 설정에서 라우트 패스가 /api일 경우 proxy: localhost:5000을 보게 되는 원리로 되어있습니다. 따라서 프런트에서 /api 패스에 접속시 React-router가 아닌 Flask.app route를 타게됩니다. 추가적으로 yarn build를 하는 순간, 백엔드 서버는 빌드된 static/dist의 소스들을 바라보게 되고 프런트와 같은 환경이 되게 됩니다.

번들링 (Webpack3)

현재 웹팩 config을 보면 아시겠지만, SPA(Single Page Application)로 구성되어있습니다. React-router로 DOM을 새로 그리는 방법을 채택했습니다.

static/resource 에서 외부 부트스트랩이나 딱히 번들링할 필요없는 소스들을 모아둘 수 있습니다. (index.html에 상대경로로 연결) 작업을 하시다보면 번들링 되는 속도나 번들링시 발생하는 예기치않은 오류를 무시하고 그냥 소스만 연결해야 할 상황(부트스트랩에 이미지가 빠져있다던가)이 분명히 있을거에요. 두 언어가 같은 경로에 놓여지도록 python서버와 webpack-dev-server의 public path를 맞춰논 상태입니다. 소스 연결시에는 jinja2({{url_for()}})를 이용하거나 혹은 상대경로를 이용할 수 있을텐데, 저는 그냥 상대경로로 설정하는게 편했습니다.

jinja2 template

Webpack-dev-server로 프런트 개발서버를 띄웠을때, jinja2의 템플릿 언어는 적용되지 않을거에요.

하지만 이 프로젝트의 경우 SPA이기 때문에 flask에서 index.html만 리턴을 해줍니다. 즉, webpack-dev-server의 proxy에 '/api' 와 더해서 '/'를 추가해주면 flask를 먼저 타고 오기때문에 jinja2 template엔진이 적용되게 됩니다. SPA가 아닐경우에도 해당 url을 proxy에 추가해주면 되겠죠?

디플로이

혹시 디플로이 환경이 AWS lambda이거나 엔드포인트가 존재하나요?

webpack의 output > publicPath를 설정해주세요.

flask의 static_url 을 설정해주세요.

ex) 디플로이 path가 hidekuma.com/dev 일경우, 상기 처럼 publicPath와 static_url을 /dev로 설정해주어야 합니다.

from http://hidekuma.tistory.com/10 by ccl(A) rewrite - 2020-03-06 15:54:22

댓글

댓글 쓰기

이 블로그의 인기 게시물

스프링 프레임워크(Spring Framework)란?

스프링 프레임워크(Spring Framework)란? "코드로 배우느 스프링 웹 프로젝트"책을 개인 공부 후 자료를 남기기 위한 목적이기에 내용 상에 오류가 있을 수 있습니다. '스프링 프레임워크'가 무엇인지 말 할 수 있고, 해당 프레임워크의 특징 및 장단점을 설명할 수 잇는 것을 목표로합니다. 1. 프레임워크란? 2. 스프링 프레임워크 "뼈대나 근간을 이루는 코드들의 묶음" Spring(Java의 웹 프레임워크), Django(Python의 웹 프레임워크), Flask(Python의 마이크로 웹 프레임워크), Ruby on rails(Ruby의 웹 프레임워크), .NET Framework, Node.js(Express.js 프레임워크) 등등. 프레임워 워크 종류 : 3. 개발 시간을 단축할 수 있다. 2. 일정한 품질이 보장된 결과물을 얻을 수 있다. 1. 실력이 부족한 개발자라 허다러도 반쯤 완성한 상태에서 필요한 부분을 조립하는 형태의 개발이 가능하다. 프레임워크를 사용하면 크게 다음 3가지의 장점 이 있습니다. 프레임워크 이용 한다는 의미 : 프로그램의 기본 흐름이나 구조를 정하고, 모든 팀원이 이 구조에 자신의 코드를 추가하는 방식으로 개발 한다. => 이러한 상황을 극복하기 위한 코드의 결과물이 '프레임워크' 입니다. 개발자는 각 개개인의 능력차이가 크고, 따라서 개발자 구성에 따라서 프로젝트의 결과 차이가 큽니다. 2. 스프링 프레임워크(Spring Framework) 자바 플랫폼을 위한 오픈 소스 애플리케이션 스프링의 다른 프레임워크와 가장 큰 차이점은 다른 프레임워크들의 포용 입니다. 이는 다시말해 기본 뼈대를 흔들지 않고, 여러 종류의 프레임워크를 혼용해서 사용할 수 있다는 점입니다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크 이다. 여러 프레임워크들 중 자바(JAV...
댓글 쓰기
자세한 내용 보기

[GCP] Flask로 TF 2.0 MNIST 모델 서빙하기

[GCP] Flask로 TF 2.0 MNIST 모델 서빙하기 Google Cloud Platform 우선 TensorFlow 2.0을 설치하자. 머신에 직접 설치하거나 도커를 다운받아 사용, 혹은 구글 colab을 활용( https://www.tensorflow.org/install)하면 되는데, TensorFlow에서 권장하는대로 머신에 VirtualEnv를 활용해서 설치하자 ( https://www.tensorflow.org/install/pip). 설치하는 김에 Flask도 같이 설치해보자. Compute Machine 하나를 생성(크게 부담 없는 예제라 g1 instance)하고, SSH를 연결하여 실행하면 된다. $ sudo apt update $ sudo apt install python3-dev python3-pip $ sudo pip3 install -U virtualenv # 굳이 system-wide로 flask를 설치할 필요는 없지만 그렇게 했다. $ sudo pip3 install flask $ sudo pip3 install flask-restful # virtualenv 환경에서 tensorflow 2.0 설치 $ virtualenv --system-site-packages -p python3 ./venv $ source ./venv/bin/activate # sh, bash, ksh, or zsh (venv) $ pip install --upgrade pip (venv) $ pip install --upgrade tensorflow 모든 환경이 마련되었으니, 우선 MNIST 모델을 TF 2.0으로 Training하여 모델을 Save 해 두자(tf_mnist_train.py). 대략 99% 이상 정확도가 나온다! import tensorflow as tf import numpy as np # 학습 데이터 load ((train_data, train_label), (eval_data, eval_label)) = tf....
댓글 쓰기
자세한 내용 보기

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고...

Coupang CS Systems 채용 정보: 쿠팡 운용 관리 시스템을 구축 하고... Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? Global Operation Technology: eCommerce에서 주문을 한 뒤 벌어지는 상황에 대해서 호기심을 가져보신 적이 있나요? Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 매일 최첨단 소프트웨어 기술을 이용해 고객의 주문을 받고 상품을 어느 창고에서 출고 시킬지, 포장을 하나의 박스 또는 여러 개로 나눌 것인지, 어떤 배송 루트를 선택하고 어떻게 고객에게 배송 상태를 보여줄지 결정하는 시스템과 서비스를 개발 합니다. What Global Operations Technology does: CS and C-Returns System 적극적 고객서비스를 바탕으로 고객의 목소리를 통해 끊임없이 고객 에게 서비스를 제공하고 Andon 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객 문제를 사전에 예방하기 위한 시스템 개발을 통해 미래의 상황을 예측 합니다. Tranportation System TSP (Traveling Salesman Problem) 와 같은 CS 최적화 관리 문제를 다룹니다.배송 물품의 실시간 추적, 3P 하드웨어와 소프트웨어를 통합, 각 배송 루트에 할당되는 물량 예측하고 T...
댓글 쓰기
자세한 내용 보기