정말 5분만에 배포가 가능하다고? ~cra github page로 배포하기~

배포가 제일 쉬웠어요...

 

 

 

cra로 프론트 페이지를 열심히 만들었는데, 나만 보기 너무 아깝다! 빨리 자랑하고 싶다!

그렇다고 배포를 하기 위해 서버를 달 순 없잖아...흑흑 귀찮아..

이럴 때 아주 간단하게 배포하는 방법이 있다.

바로 github page를 이용하는 것이다.

우리의 시간은 소중하니까 빨리 시작해보자!

 

 

 

 

1. 우선 터미널에 아래 명령어로 필요한 패키지를 설치해준다. 5분만에 끝내고 싶다면 빨리 치는 게 좋다.

npm i gh-pages
또는
yarn add gh-pages

인내심을 가지고 기다리면 다음과 같은 문구가 뜬다.

5초컷!!!

 

 

 

2. package.json 파일에 들어간다. 빨리 빨리!

이걸 누른다.

 

 

 

3. 맨 마지막에 아래와 같이 한 줄 추가해준다.

"homepage": "https://{your github username}.github.io/{the name of you project in github}/"

주의할 점 : 오타가 나거나 하나라도 틀리면 배포 시간이 길어지니 여기선 신중하게 쳐야한다!

꼭 쉼표 넣고 추가하세요

• 쉼표를 잊으면 안된다.
• url 맨 끝에 슬래시'/'를 넣어주는 게 좋다.
• 프로젝트 네임과 정확히 일치해야한다.

 

 

 

4. package.json에서 "script" 안에 아래 두가지를 추가해준다.

난 yarn 써서 yarn build 했다. 쉼표를 잊지 마세요.

"deploy": "gh-pages -d build",
"predeploy": "yarn build"
또는
"predeploy": "npm run build"

 

 

 

시간이 없어요 빨리 배포하고 자랑해야한다고!!

5. 터미널에 아래 명렁어를 입력한다.

yarn deploy
또는
npm run deploy

짠!!!!!!!

끝!!!!!!!!!!!!!

배포가 완료되면 package.json에 있는 homepage 항목에 입력한 url로 누구나 들어갈 수 있다.!

빨리 자랑하러 가자!!!!!!

 

 

 

 

 

 

참고

가끔 404가 뜨는데 기다리면 된다.

만약 기다려도 안된다면 package.json을 다시 살펴보는 게 좋다.

만약 배포 후에 뭔가를 수정했다면 deploy 명령어를 다시 입력해야 반영된다.