주말에 리액트 공부하는 겸 간단하게 리액트로 투두 프로젝트를 만들어봤는데요, 만드는 김에 깃허브 페이지에도 배포해보았습니다. 또 배포 하는김에 저저번 프로젝트인 투두 프로젝트도 조금 수정을 거쳐서 배포해보았구요. 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 로 불러와서 페이지가 제대로 로딩이 되지 않습니다.

  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를 해봅니다. 그럼 끝!

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/57b2045e-001c-4f95-a623-0566b8faf87b/Untitled.png

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

  5. 결과물

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

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

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

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

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