주말에 리액트 공부하는 겸 간단하게 리액트로 투두 프로젝트를 만들어봤는데요, 만드는 김에 깃허브 페이지에도 배포해보았습니다. 또 배포 하는김에 저저번 프로젝트인 투두 프로젝트도 조금 수정을 거쳐서 배포해보았구요. push-dir 라이브러리를 사용하면 정말 간단하게 배포 가능합니다!!

1. 백앤드 코드 삭제하기

   깃허브 페이지에서는 정적파일 호스팅만 지원하기 때문에 백앤드 관련된 코드를 실행할 수 없습니다. 백앤드 코드를 다른 사이트에서 호스팅하던지 아니면 프론트앤드에서 백앤드와 통신하는 부분을 제거하고, 백앤드 코드도 지워줍니다.

   로그인 기능이 있던 프로젝트 였다면 로그인/회원가입 로직을 지우고 자동으로 일단 로그인 시키는 것도 하나의 방법이겠네요.

2. 빌드하기

   만약 프로젝트 이름이 my-practice일때, gh-page 브랜치에 빌드된 파일을 올리게 되면 https://{user_id}.github.io/my-practice 의 경로로 배포가 됩니다.

   문제는, 빌드시 publicPath 옵션을 따로 설정하지않으면 css나 js파일들을 https://{user_id}.github.io/my-practice 가 아닌 https://{user_id}.github.io 로 불러와서 페이지가 제대로 로딩이 되지 않습니다.

   • webpack의 경우

     module.exports = {
       mode: "production",
       entry: "./src/index.js",
       output: {
         path: path.resolve(__dirname, "src/public"),
         filename: "bundle.js",
         publicPath: ".", // 추가
       },
     

     output안에 publicPath 옵션을 추가해줍니다. (https://webpack.js.org/guides/public-path/)

   • parcel의 경우

     "build": "parcel build index.html --public-url ."
     

     npm 스크립트에 —public-url . 를 추가해줍니다.

3. push-dir 설치하기

   npm i -D push-dir
   

   push-dir은 vue의 SSR 프레임워크인 nuxt 공식 가이드에서 소개된 라이브러리입니다.

   특정 디랙토리의 파일들만 특정 브랜치에 넣을 수 있습니다. 이 기능을 활용해 빌드된 파일이 들어있는 디렉토리만 gh-page에 푸쉬해보도록 할겁니다.

4. deploy 스크립트 추가 및 배포!

   "deploy": "push-dir --dir=dist--branch=gh-pages"
   

   --dir 옵션에 빌드된 파일이 있는 디렉토리를 적고, npm run deploy를 해봅니다. 그럼 끝!

   

   aborted: git is not clean 오류가 뜬다면, 현재 작업중인 내용을 커밋하거나 --allow-unclean 옵션을 넣어서 강제로 푸쉬 가능합니다.

5. 결과물

   https://유저이름.github.com.io/프로젝트 이름 으로 접속하셔서 확인하시면 됩니다.

   https://github.com/Agrajak/react-practice → https://agrajak.github.io/react-practice/

   https://github.com/Agrajak/vanilla-kanban-js → https://agrajak.github.io/vanilla-kanban-js

   위의 방법을 적용시킨 결과물입니다.

   CI/CD를 활용해서 특정 브랜치에 푸쉬가 될 때 마다 npm run deploy 스크립트를 실행시키는 방법으로 자동 배포도 가능합니다!!

l && gh-pages -d build