알고보니 이미 필자가 블로그 용도로 애용하고 있는 GitHub 페이지에 DB같은 외부 의존성이 주렁주렁 안 달려있는 웹 애플리케이션 정도는 깔끔하게 올려버릴 수 있었다. 사실 아무리 필자가 서버 만지기를 좋아한다고 해도, 개인적인 작은 웹 서비스 하나를 위해 새로 물리적인 서버 (혹은 퍼블릭 클라우드)를 구축해 운영하는 것은 부담스럽다. 귀찮기도 하고, 비용 측면에서도 무시할 수 없기 때문이다. 이렇게 빛을 보지 못하는 코드들이 전세계 곳곳에 있을 터인데, GitHub 페이지 같은 서비스들이 정말 한줄기 빛을 내려주는 것 같다.

본론으로 들어가서, 필자는 create-react-app으로 제작한 간단한 웹 애플리케이션을 GitHub 페이지에 업로드할 것이다. 다른 도구를 사용해 앱을 제작하신 분들, 또는 다른 기술을 사용하시는 분들은 본인의 상황에 맞게 적당히 참고만 해주길 바란다. 먼저 본인의 프로젝트를 올릴 수 있는 GitHub 상의 저장소를 준비해 주셔야 한다. 이미 프로젝트를 GitHub에 올려두고 있다면 다음 단계로 넘어가자.

알맹이

먼저 내 프로젝트의 package.json 파일에 들어가 homepage 값을 추가하자. 아래와 같은 형태로 집어넣으면 된다.

"homepage": "https://<GitHub-유저명>.github.io/<프로젝트-저장소>"

그 다음 npm run build 명령어를 콘솔에 입력해보자. 아마 아래와 같은 출력값이 나올 것이다.

Creating an optimized production build...  
Compiled successfully.

File sizes after gzip:

 45.92 KB  build\static\js\main.bd9efe87.js
 289 B     build\static\css\main.9a0fe4f1.css

The project was built assuming it is hosted at /SithJS/.  
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.  
To publish it at https://<GitHub-유저명>.github.io/<프로젝트-저장소>, run:

 npm install --save-dev gh-pages

Add the following script in your package.json.

   // ...
   "scripts": {
     // ...
     "deploy": "npm run build&&gh-pages -d build"
   }

Then run:

 npm run deploy

package.json에 GitHub 페이지를 홈페이지로 사용한다는 정보를 넣었더니, 친절하게도 알아서 앞으로 어떻게 해야 하는지 과정을 설명해준다. 그럼 저항 없이 컴퓨터님의 목소리를 따라 앞으로 나아가 보자.

그런데 잠깐. gh-pages 명령어는 처음 보는데, 그냥 무시해도 되나? 당연히 무시하면 안된다. 컴퓨터님이 무리없이 명령어를 소화시킬 수 있도록, npm install --save-dev gh-pages 명령어를 얼른 콘솔에 입력해 미리 플러그인을 추가해 두도록 하자. (gh-pages는 웹 앱의 구동에 필수적인 플러그인이 아니니 --save-dev 명령어로 저장하면 프로덕션 빌드에서는 자동으로 빠져 편리하다.)

플러그인 추가도 마쳤으니, 다시 package.json을 열고 아래 스크립트를 추가해 보자. 위에서 친절하게 설명받은 그것이 맞다.

"deploy" : "npm run build&&gh-pages -d build"

짠. 이제 남은 것은 실행하는 것밖에 없다. npm run deploy 명령어를 콘솔에 입력해보자. 아까와 비슷한 출력값이 나오다 Published 와 함께 명령이 종료되면 정상적으로 업로드 된 것이다. 이제 웹 브라우저에서 https://<GitHub-유저명>.github.io/<프로젝트-저장소> 주소로 접속해보자. 본인이 방금 업로드한 그것이 정상적으로 나온다면 성공.

위 과정 후 내 GitHub 저장소에 들어가보면, 새로운 gh-pages라는 새로운 branch가 생겼고, 그 안에 구동 파일들이 잘 담겨 있을 것이다. 나중에 새로 deploy를 해도 이쪽으로 알아서 갱신되니 걱정하지 않아도 된다.

필자는 얼마 전 만든 divergence라는 간단한 웹 애플리케이션을 업로드했다. 이렇게 작동하니 참고할 것.