React 프로젝트 gh-pages 배포

깃허브 페이지에 배포하는 방법과 내가 겪었던 자잘한 버그(?) 상황과 그에 대한 해결법을 소개하고자 한다.

 

우선 아래의 사진과 같이 깃허브 페이지에 배포하는 방법이다.

 

그 전에 리액트의 빌드 과정을 간략하게 설명하자면, 

npm run build 커맨드를 실행시 리액트에서는 react-scripts build 스크립트를 실행한다.

그러면 전에 없던 build라는 폴더가 생기는데,

그 폴더 안에는 우리가 src 폴더 안에서 작업했던 내용이 최적화된 빌드 파일이 들어가게 되고,

그 빌드 파일을 배포하는 것이다.

 

빌드한 후에는 npm run deploy 커맨드를 실행하게 되면 gh-pages -d build 커맨드가 실행되는데 build 폴더를 gh-pages로 deploy한다는 의미로 생각하면 될 거 같다.

 

위에서 언급한 커맨드와 실행되는 내용은 package.json 파일에 script 부분에 정의되어 있는데, 우리의 배포 과정을 간략화 하고, 편하게 하기 위해 해당 파일을 약간 수정할 예정이다.

 

일단 package.json 파일에 맨 아랫쪽에 다음의 코드를 추가해주자.

이는 리액트에 우리 gh-pages의 주소를 알려주게 된다.

 

이 때, 문제점이 하나 발생하는데, BrowserRouter 사용시 리액트는 우리 홈페이지의 루트 주소를 https://wjlee611.github.io/로 알고있다는 것이다. 

따라서 내가 홈페이지의 홈화면으로 생각했던 화면이 안 나오고 하위 주소의 페이지가 나올 수 있다.

 

따라서, Router.tsx에 BrowserRouter JSX에 basename={process.env.PUBLIC_URL}을 추가로 적어야 한다.

 

그럼 이제 npm run build -> deploy 순서로 커맨드를 입력하면 몇 분 이내에 깃허브 페이지로 사이트가 배포된다.

하지만 이 과정을 커맨드 하나로 끝낼수도 있다.

 

이를 위해 다시 package.json 파일을 좀 더 수정해보자.

 

사실 build, deploy 스크립트 실행 이전에 실행되는 스크립트가 있는데, 각각 postbuild, predeploy 이다. 따라서 package.json 파일에 predeploy 스크립트를 다음과 같이 작성하면 빌드부터 배포까지 명령어 한 줄로 처리가 가능하다.

그럼 npm run deploy를 입력하면 내부에서 npm run build가 먼저 실행된 후 deploy가 실행되게 된다.

 

이렇게 하면 페이지 배포 끝..!

...

인줄 알았더니 한가지 버그가 있었다.

 

https://wjlee611.github.io/portfolio-site로 접속시에는 문제가 없지만, https://wjlee611.github.io/portfolio-site/611 와 같이 하위 주소를 바로 붙여서 접속하거나 저 주소에서 새로고침하면 404에러 페이지가 나온다.

 

그 이유는, 리액트는 모든 활동이 index.html 안에서 이루어지는 Single Page Application인데,

깃허브에서는 루트 주소로 접속시에는 index.html로 접속 시켜주지만, 다른 주소로 접속시에는 404.html로 리다이랙트 시켜주기 때문이다.

 

따라서 404.html 파일을 index.html과 똑같이 만들어 준다면?

실제로는 404.html로 접속하는 거겠지만, 내용이 index.html과 똑같기 때문에 404에러가 더이상 나오지 않을 것이다.

(다만, 완전 쌩뚱맞은 주소에 경우 추후에 예외처리를 해 주는 것이 좋을 것이다.)

 

404.html 파일을 index.html 파일과 같게 만들어 주는 방법은 간단하다.

deploy 하기 전에 build폴더 내에 index.html를 복사한 뒤 이름을 404.html로 바꿔주면 된다.

 

이 과정을 간략화 하기 위해 package.json 파일에 다음과 같은 스크립트를 추가한다.

 

이렇게 하면 기본적인 리액트를 이용한 ph-pages 배포 끝!

업데이트가 발생하면 npm run deploy만 입력하면 위의 모든 과정이 자동적으로 처리되며, 몇 분 이내에 gh-pages가 갱신된다.