React) 프로젝트 github-pages로 배포하기 & 오류 정리!

지난번에 진행했던 마켓컬리 클론코딩 프로젝트를 배포해보려고 한다.

더미데이터를 쓰고 있으니 github-pages를 활용하여 배포해도 충분하겠다는 생각이 들어 당장 실시!

 

배포 전에 잠깐!

웹브라우저는 리액트의 문법을 이해할 수 없다...

따라서 JSX 파일을 HTML, CSS, JS로 변환해주어야 하는데,

이는 빌드를 통해 이루어진다!

Github-pages를 이용하면 빌드+배포까지 편리하게 할 수 있다는 장점이 있다!😄

---

Github Pages란, GitHub의 리포지토리에서 직접 HTML, CSS 및 JavaScript 파일을 가져오고 선택적으로 빌드 프로세스를 통해 파일을 실행하고 웹 사이트를 게시하는 정적 사이트 호스팅 서비스이다.

 

About GitHub Pages - GitHub Docs

About GitHub Pages - GitHub Docs

---

배포 과정

*create-react-app을 통해 만들어진 프로젝트를 기준으로 작성되었습니다.*

1. gh-pages 설치

프로젝트를 github pages에서 호스팅할 수 있도록 npm 패키지를 설치해주어야 합니다.

npm install gh-pages --save-dev

잘 설치가 되었는지는 package.json에서 확인할 수 있습니다.

2. github에 Repository 생성

레포를 하나 만들고 초기 화면에 나온 명령어를 그대로 입력해주기!

 

3. package.json 수정하기

3-1)

package.json 중괄호 안에 다음 명령어를 추가해주세요.이는 우리 프로젝트가 호스팅될 주소입니다!

"homepage": "https://{본인githubID}.github.io/{RepositoryName}"

(맨 처음에 http라고 했다가 아무것도 안떠서 매우 당황했으므로 꼭 https로 써주시길...)

 

3-2)

그리고 다음 명령어를 scripts 안에 두 줄을 추가해줍니다.

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

 

4. 진짜 배포하기

npm run deploy

다음 명령어를 입력하면 알아서 빌드 + 배포까지 됩니다.ㅎㅎ

배포가 된다면 최상단에 build라는 폴더가 생깁니닷!

이제 homepage에 기입한 주소로 들어가면 사이트가 잘 나올겁니다!

(바로 안나오면 1~10분 정도 기다려보세요)

---

그런데...

★★★오류 발생?!★★★

 

저의 경우 아무것도 안보이는 흰 화면만 보이며 개발자 도구에

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.

라는 알 수 없는 오류가 떴습니다....

 

stackoverflow에서 찾은 결과 

https://stackoverflow.com/questions/72948207/error-with-permissions-policy-header-origin-trial-controlled-feature-not-enable

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'

라우터를 수정하라는 것 같아서

메인페이지 라우터 경로를

이렇게 바꿔줬더니 잘 나오네요!

저 주의 문구는 안 없어지긴 하는데 사이트가 잘 떠서 다행입니다.

이렇게 GitHub Pages를 이용해 배포하는 방법을 알아보았습니다.

모두 즐거운 개발 하세요! :)