■ 전제조건
1) GitHub에서 표준프레임워크 MSA 프로젝트를 Fork 한다.
https://github.com/eGovFramework/egovframe-msa-edu
2) GitHub Code Space 생성
■ Code Space 구동방법
1) 터미널 탭에서 frontend > admin 이동, node 버전 변경
Next.js/React 기반의 MSA frontend를 구동하기 위한 기준 node 버전은 V14.8.0이다.
nvm이 이미 설치되어 있으므로 편리하게 node 버전을 다음 명령으로 변경한다.
| $ nvm list $ nvm install v14.8.0 $ nvm use v14.8.0 $ node --version v14.8.0 |
2) node 패키지를 설치 및 실행한다.
| $ npm install $ npm run dev:lg |
3) node 패키지를 설치 및 실행한다.
정상적으로 구동이 되었으면 "포트" 탭으로 이동하여 포워딩 URL을 복사 붙여넣기 하여 잘 기록한다.
PROXY_HOST변수로 env.local파일에 기재 하여야 하기 때문이다.
4) 포트 가시성 > Public 설정
해당 URL이 인터넷상으로 접근 가능하여야 하기 때문에 Public으로 변경
5) env.local 파일 생성 및 환경 변수 생성
env.local.sample 파일을 이용하여 env.local파일을 만든다.
SERVER_API_URL은 퍼블릭 IP또는 도메인으로 인터넷 접속이 가능해야 한다.
PROXY_HOST는 "포트"탭에서 복사 붙여넣기 한 URL 정보를 기재한다.
| PORT=3001 SERVER_API_URL=http://PUBLIC_IP:PORT PROXY_HOST=https://musical-space-eureka-7rw464zzzzzxxxxx-3001.app.github.dev |
* 주의사항
CORS이슈로 인해 웹브라우저에서 백엔드 서버로 직접 접속은 허용되지 않는다.
따라서 React에서 백엔드 서버로 일종의 우회 접속을 위해 PROXY_HOST가 필요하다.
6) node 서비스 중지후 재기동
| $ npm run dev:lg |
7) 웹브라우저에서 접속 및 로그인
8) 접속 결과
