[PF] Github pages 배포 시 겪은 에러

1. 깃허브 배포 시 README.md만 뜨는 에러

- 기본적으로 pages는 최상위 폴더의 index.html 파일을 가리키기 때문에 index.html 파일이 존재하지 않는 경우 README.md 를 띄워주게 된다. 
- 리액트는 index.html이 최상위 폴더에 있지 않기 때문에 gh-pages 패키지를 설치해서 배포해주어야 한다.
(1) gh-pages를 설치하고, package.json 파일에 아래의 코드를 추가해준다.

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  
 "homepage": "https://{깃허브명}.github.io/{레포지토리명}"

(2) npm run deploy 명령어를 이용해서 빌드와 배포 과정을 거친다.

(3) 깃허브 레포지토리의 Settings -> Pages 에서 브랜치를 None 에서 gh-pages로 변경한 후 Save 해준다.
 
💡 gh-pages 라는 브랜치에 빌드 한 파일을 올리고 이 브랜치를 배포해주는 것!

gh-pages 브랜치에 index.html 파일이 있는 것을 볼 수 있다.

 

2. 깃허브 배포 시 빈 페이지만 뜨는 에러 

- 리액트에서 사용하고 있던 라우터 문제였다.
- 나는 BrowserRouter를 사용하고 있었는데 아무런 설전없이 사용하게 되면, “/” 경로가 우리가 설정한 레포지토리 이름이 아니기 때문에 빈 화면이 나오는 게 당연하다.
- HashRouter를 사용하면 도메인 뒤에 /#/이 붙으면서 도메인 주소를 확실히 인식시킬 수 있다.
- BrowserRouter를 사용하려면 basename을 props로 전달해주면 되는데, 나는 새로고침 시 404에러가 나는 문제를 함께 해결하기 위해서 HashRouter로 변경했다.

 

3. Public 폴더에 있는 이미지 배포 에러

- process.env.PUBLIC_URL 환경 변수를 사용하는 방법으로 에러를 해결했다.

- process.env.PUBLIC_URL은 애플리케이션의 루트 경로를 나타내는 환경 변수로, 이 변수를 사용하면 애플리케이션의 경로를 자동으로 가져와 정적 파일의 경로를 정의할 수 있다.