서론
예전에 만들었던 todo-list를 오랜만에 열어봤는데
로컬 스토리지에서 정보를 받아오게 했었는데 배포후에 다른 환경에서 로컬스토리지 생성이 안돼서 페이지가 불러오는데 실패하는 것을 발견했다.
그리하여 redux-toolkit의 초기 상태값을 로컬스토리지에서 받아오는 형태에서 초기값을 따로 정의해주는 구조로 변경을 했다.
변경한 내용을 다시 배포하고 싶은데 안되는 문제가 발생했다.
깃 페이지를 이용하여 배포하는 방법
1.npm install gh-pages 배포를 위한 깃허브 페이지 패키지를 설치한다.
2. 페이지에 대한 설정을 한다.
해당 프로젝트의 package.json이다.여기서 봐야할 것은 hompage에 주소를 정확하게 입력해주는 것이다.
주소는 해당 깃허브 레포지토리에서 setting-> 좌측 메뉴 pages에 들어가면 확인할 수 있다. 대부분 위 예시처럼
https://${github아이디}.github.io/${저장소 이름}위와 같은 형태이다.
3.대부분의 프론트엔드 배포는 빌드 폴더를 생성해서 한다.npm run deploy라는 커맨드를 사용할건데
이런 형태로 deploy 전에 predeploy에서 build를 하여 빌드 폴더를 생성하고, 그 다음에 배포를 진행한다.
이제 설정을 다했으면 npm run deploy 커맨드를 실행한다.
결과)
이제 배포에 성공을 하였고, 약 2~3분 정도 넉넉하게 시간을 갖고 기다리면
배포된 내용을 해당 주소에서 확인할 수 있다
1.브랜치를 변경하기(실패)
기존에 설정된 방식인데 현재 업데이트된 브랜치로 변경해봤는데,
readme.md 파일이 불러와졌다.
찾아보니 빌드 파일에 index.html이 없어서 마크다운 파일만 업로드 된 것이라고 한다. 다른 경우에는 404페이지가 뜰수도 있다고 한다.
2.빌드폴더 삭제후 다시시도(성공)
이번엔 빌드 폴더를 삭제하고, 다시 배포를 했다.
그러고 몇분후에 재확인하니 정상적으로 갱신된 내용이 배포되었다.
결론
배포하는 과정에서 시간이 조금 걸릴 수 있으니 느긋하게 기다릴 필요도 있다.
2번째 방법을 시도하고 또 실패로 생각하고 다른 방법을 찾아보려 했으나
시간이 모든 것을 해결해줬다.
