File tree Expand file tree Collapse file tree 1 file changed +13
-7
lines changed Expand file tree Collapse file tree 1 file changed +13
-7
lines changed Original file line number Diff line number Diff line change @@ -11,7 +11,7 @@ Flask + React + Redux + React Router + Webpack3
11
11
9 ) HMR
12
12
13
13
# 어떤 사람들에게 필요한 프로젝트인가요?
14
- 보통 리액트를 사용하는 프로젝트일 경우 서버단은 node.js로 구현하는게 깔끔하겠지만, 파이썬에서 리액트 프런트를 구축해야 할 상황이 와서 해당 프로젝트를 만들게 되었습니다.
14
+ 보통 리액트를 사용하는 프로젝트일 경우 서버단은 node.js로 구현하는게 깔끔하겠지만, 백엔드 서버는 파이썬으로 구축하면서 리액트로 프런트를 구축해야 할 상황이 와서 해당 프로젝트를 만들게 되었습니다.
15
15
16
16
## 부여된 조건
17
17
1 ) 서버단 언어는 Python이여야한다.
@@ -37,17 +37,23 @@ cd static
37
37
38
38
./server.sh
39
39
40
+ ### ./server.sh 스크립트를 실행시키면 백엔드 파이썬 서버가 기동됩니다.
41
+ ### 해당 백엔드 서버는 나중에 디플로이할때의 환경이 되며, 프런트서버에서 api호출할 경우, 해당 서버를 바라보게 됩니다.
42
+
40
43
## 4) 프런트엔드 개발서버 기동 (Webpack Dev Server) : localhost:8080
41
44
yarn start
42
45
46
+ ### Webpack-dev-server를 이용한 개발서버가 기동이 됩니다.
47
+
43
48
## 5) 디플로이 하기
44
49
yarn build
45
50
46
- # 흐름
47
- ./server.sh 스크립트를 실행시키면 백엔드 파이썬 서버가 기동됩니다 .
48
- 해당 백엔드 서버는 나중에 디플로이할때의 환경이 되며, 프런트서버에서 api호출할 경우, 해당 서버를 바라보게 됩니다.
49
- yarn start로 프런트서버를 기동하면 Webpack-dev-server를 이용한 개발서버가 기동이 됩니다.
50
- 해당 webpack.config.js를 보면, webpack-dev-server의 설정에서 라우트 패스가 /api일 경우 proxy: localhost:5000을 보게 되는 원리로 되어있습니다.
51
- 따라서 프런트서버에서 개발이 완료되고 yarn build를 하면 백엔드 서버는 빌드된 static/dist의 소스들을 바라보게 되고 프런트와 같은 환경이 되게 됩니다.
51
+ ### 해당 webpack.config.js를 보면, webpack-dev-server의 설정에서 라우트 패스가 /api일 경우 proxy: localhost:5000을 보게 되는 원리로 되어있습니다.
52
+ ### 따라서 프런트서버에서 개발이 완료되고 yarn build를 하면 백엔드 서버는 빌드된 static/dist의 소스들을 바라보게 되고 프런트와 같은 환경이 되게 됩니다 .
53
+
54
+ # 번들링
55
+
56
+
52
57
58
+ # 정적리소스 연결
53
59
You can’t perform that action at this time.
0 commit comments