Github Pages에 배포하기

JulyK9·2023년 4월 13일
github pages클라이언트 배포
1

오랜만에 깃헙에서 배포를 진행해보았다.
몇 달전 공부하면서 진행했던 투두 리스트 플젝 이후로 깃헙 배포를 해본적이 없어 방법이 가물가물하여 자료를 찾아보고 새로운 문제점을 확인하고 해결된 상황이 있어 정리해두고자 한다.

전체적인 흐름

  1. package.json 설정
  2. gh-pages 패키지 설치
  3. 프로젝트 build 파일 생성
  4. deploy 실행
  5. 문제 발생
  6. 접근 방법(HashRouter, basename, 404.html 트릭)
  7. 추가로 알아볼 것
  8. 번외. 레포지토리를 별도로 만들어 배포하기
  9. 회고

1. package.json 설정

여기서 script에 predeploy와 deploy를 설정해주고, homepage까지 설정해준다.

{
  "homepage": "https://내깃헙아이디.github.io/레포지토리명", // 추가 작성
	...(생략)
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...(생략)
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build", // 추가 작성
    "predeploy": "npm run build" // 추가 작성
  },
  ...(생략)
}

2. gh-pages 패키지 설치

github pages 배포를 쉽게 도와주는 라이브러리를 설치한다
script의 deploy에 기재한 gh-pages가 작동하기 위해 필요한 것 같다.

npm install gh-pages --save-dev
{
  "homepage": "https://내깃헙아이디.github.io/레포지토리명",
	...(생략)
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...(생략)
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"
  },
  ...(생략)
  "devDependencies": {
    "gh-pages": "^5.0.0" // 라이브러리 설치 확인
  }
}

3. 프로젝트 build 파일 생성

배포용 build 파일을 생성해주어야 하므로
터미널에서 아래와 같이 실행해주면 build 폴더가 안에 파일들이 생기게 된다.

script에 predeploy를 설정해주었기 때문에
deploy 전에 build 를 한번 돌리고 deploy 하는 것 같은데
나는 혹시나 하여 npm run build를 한번 수행해주고 npm run deploy를 실행해주었다.

npm run build

4. deploy 실행

build 파일이 생겼으니 이것을 배포할 어딘가에 올려줘야 할 것이다.

npm run deploy

script 에 따라 깃헙 페이지에 build를 deploy 한다는 내용으로
위 명령이 성공적으로 수행되면 Published 라는 메시지가 터미널에 나오고,
깃헙의 해당 레포에 가면 gh-pages 라는 새로운 배포용 브랜치가 생긴걸 확인할 수 있다.

라이브러리를 설치하고 스크립트에 기재한 내용에 따라 deploy 수행이 진행되면서
배포용 브랜치에 배포를 수행하게 해준다고 보면 될 것 같다.

5. 문제 발생

배포는 성공적으로 된 것 같았는데 배포된 화면이 빈 화면이었다..
찾아보니 github에서는 SPA를 지원하지 않는다고 한다.
그럼 난 지난번에 어떻게 한거지?..
확인해보니 그 때는 라우터를 잡아주지 않고 해서 됐던 것이다. ㄷㄷ

6-1. 접근 방법(1)

먼저 레퍼런스에서 제시하는 HashRouter로 바로 바꿔서 다시 배포했지만 같은 상황이 반복되었다.
다른 방법으로 기존에 썼던 BrowserRouter를 유지하고, basename 속성에 내가 배포하는 레포지토리 주소를 부여해주었더니 첫 페이지인 루트 url('/')은 정상적으로 떴지만,
역시 다른 주소로의 라우팅 전환시 404 페이지가 나오는 상황이었다.

6-2. 접근 방법(2)

추가로 404.html 트릭을 이용한 방법을 적용해보게 되었다.
Github Pages에서는 잘못된 url을 입력할 경우 404 페이지를 표시해주는데 이 페이지를 커스텀하여 모든 페이지가 한 페이지를 사용하도록 해주는 것이다.

일단 결론은 build 폴더 내부에 404.html 파일을 만들어서 index.html 파일의 내용을 복사해주는 것이다. 이게 무슨 원리일까?

build 파일 구조와 배포 원리를 살펴보면
깃헙 페이지의 루트 url로 접근하면 build 파일 내부의 index.html이 열리면서 작동되게 된다.
만일, 루트 url이 아닌 다른 경로로 접근시에는 SPA를 지원하지 않아 페이지가 없으므로, 커스텀한 404.html이 실행되게 되는데 위에서 index.html의 내용을 그대로 복사해주었기 때문에 아이러니하게도 404.html에서 원하는 동작을 수행하게 되는 것이다.

추가로 배포 명령어 입력시 자동 적용될 수 있도록 package.json에 script를 재설정해본다.
postbuild로 경로 build/index.html 파일을 build/404.html로 복사(cp)해주라는 내용인 것 같다.

{
  ...(생략)
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "cp build/index.html build/404.html", // 추가 작성
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build",
  },
  ...(생략)
}

이렇게 하고나니, 배포된 페이지에서 다른 경로로 라우팅을 해도 정상적으로 작동되는 걸 확인할 수 있었다.

7. 추가로 알아볼 것

하지만 이 방법으로 적용시 오픈 그래프 프로토콜 데이터를 제대로 파싱하지 못하는 문제가 있다고 한다. 하여 HashRouter로 바꾼 레퍼런스도 찾아보고 나중에 추가로 적용해보면 좋겠다.

8. 번외. 레포지토리를 별도로 만들어 배포하기

원래 깃헙에서 무료로 배포를 지원하는 Github pages 는 레포가 public 인 경우만 가능하다.
근데 이렇게 하는 이유는 프로젝트 레포는 공개하고 싶지 않아서 private 으로 관리하는데
배포는 무료로 하고 싶을 때 사용할 수 있을 것 같다.

즉, 배포용 레포지토리만 따로 public으로 만들어서 거기에 연동해서 build 파일을 올리고 배포하는 것이다.

나와 같은 경우 이번 레포가 과제 제출용이라 public 이기 때문에
해당 레포를 그대로 배포할 레포로 이용했기 때문에 사용할 일이 없었다.

9. 회고

블로그에 정리까지 하다보니 생각보다 시간이 소요되었다.
블로그를 안쓰게 되는건 내 마음이 급해서 인 것 같다..
빨리 취업을 하고 빨리 기술을 익혀야 되고 글을 쓸 시간에
코딩을 하거나 새로운 정보를 익히는 게 더 도움이 된다는 생각으로 블로그 정리를 더 어렵게 만들었던 거다.

글로 정리해보는 건 기억을 조금 더 체계적으로 정리하는 데 도움이 된다.
체계적으로 정리한다는 것은 다음에 그 정보와 기억을 좀 더 꺼내서 사용하기 쉽게 만들어준다.
그리고 더 나아가면 활용과 같은 융합적 사고를 하기 더 수월하게 해줄 것이다.

당장에는 시간이 좀 소요되겠지만
나는 오래도록 평생 이 일을 하고 싶기 때문에
길게 보면 내 것으로 만드는 시간을 좀 더 단축한다고 생각해보자!

아울러 배포는 자주 해봐야겠다는 생각이 들었다.
오히려 개인적으로 간단한 사이드 플젝을 하면서도
완성을 하고나서 배포를 하기보다
어느정도 틀이 잡힌 상태라면 미리 배포를 해보는 것이 좋을 것이다.

이렇게 생각해보니 이전에 멘토분이 팀플젝을 하면서도
배포를 미리 해보라고 했던 조언이 떠오른다..
미리 경험한 분들의 이야기는 꼭 새겨들을 필요가 있다.

레퍼런스

profile
JulyK9
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.
이전 포스트

[TIL] Next.js 에서 styled-components 적용 문제

다음 포스트

vite + typescript 에서 절대 경로 설정

0개의 댓글