본문 바로가기

Lecture

[React] github page로 배포하기

https://develop-famous.tistory.com/152

 

[ 디파이 코인 ] 유니스왑 클론

디파이의 가장 성공적인 예인 유니스왑 홈페이지의 interface 코드를 clone 받아서 macOs 환경에서 실행시켜보았다. 클론 깃 https://github.com/Uniswap/interface GitHub - Uniswap/interface: 🦄 An open sourc..

develop-famous.tistory.com

 

 

위에서 클론 후 띄워봤던 프론트를 github page를 이용해서 배포해 보려고 한다.

 

 

일단 깃 허브에서 새로운 repository를 만든다.

나는 uniswap이라는 이름으로 생성했다.

 

이제 코드 파일안에 package.json을 아래와 같이 수정한다.

 

 

"homepage" : "https://[github id].github.io/[repo명]"
나의 경우) "homepage" : "https://HeiniHeo.github.io/uniswap"

 

scripts안에

 

"integration-test":"start-server-and-test 'server build -l 3000' http://localhost:3000",
"predeploy" : "yarn build",
"deploy" : "gh-pages -d build"

 

이렇게 세개를 추가한다.

 

 

그 다음 yarn build 로 파일을 빌드한다.

 

 

 

그리고 hompage url을 배포하기 위해서 yarn add gh-pages명령어를 사용한다.

 

 

 

 

이제 아까 만들어놨던 repository를 git remote add 로 추가한다.

add . , commit, push를 순서 대로 한다.

 

 

마지막으로 총 배포를 위해 yarn deploy 명령어를 입력해주면 배포가 완료 된 페이지를 볼 수 있다.

 

 

 

 

 

 

 

내가 배포한 git page

https://heiniheo.github.io/uniswap/#/swap

 

Uniswap Interface

 

heiniheo.github.io