[React]github page 배포 & 배포 후 404 error (github 여러 페이지 배포하기)
개인 포트폴리오를 만드는 프로젝트를 진행하는 중에 배포와 자동화 작업을 먼저 해놔야겠다는 생각을 했다.
전 프로젝트에서는 a3로 배포했었는데 이번 프로젝트는 비교적 크기도 작고 앞으로 많은 수정이 일어날 예정이였으며 무엇보다 배포 자동화를 하기 위해서는 github으로 먼저 배포하는 것이 맞다고 생각해서 github에 배포를 해보았다.
배포 과정
먼저 배포하기 전에 파일을 build 하는 과정이 필요하다.
build 과정은 작성한 코드를 최적화하고 압축하는 과정이라고 생각하면 좋을 것 같다.
아래 명령어를 입력하고 배포를 하고자 하는 파일을 먼저 build 하는 작업을 진행하자
$ git run buildgithub으로 배포하는 과정은 간단하다.
처음 배포할 때는 레포지토리를 만들 때 아래와 같이 "github아이디/github.io"로 레포지토리 이름을 만들고 public과 Add a README file을 체크해준 뒤 레포지토리를 만들어 주면 된다
이미 만들어져 있는 상태라 오류가 떴지만 같은 이름의 레포지토리가 없다면 생성하는데 문제는 없을 것 같다.
레포지토리가 만들어 졌다면 미리 build 해놓은 파일을 레포지토리에 push 해주면 된다.
배포 과정이 다 진행되었는지 확인하고 싶다면 아래처럼 Actions에 들어가서 workflow run 상태를 확인하면 된다.
초록색 체크가 되어있다면 배포가 완료 된 것이니 해당 url에 들어가서 내가 만든 화면이 잘 렌더링 되는지 확인하면 된다.
URL은 https://깃헙 id.github.io/ 이다
만약에 이미 해당 이름의 레포지토리가 있고, 추가로 배포를 하고싶은 사이트가 있어도 간단하게 새로운 사이트를 배포 할 수 있다.
배포하길 원하는 레포지토리로 들어가 settings -> pages로 들어간 뒤 Branch를 main으로 변경해주고 저장해준다.
URL은 https://깃헙 id.github.io/레포지토리 이름/ 이다
배포 후 404 error
배포를 하는 과정은 간단했지만 해당 에러가 한참동안 해결되지 않았다.
많은 블로그를 찾아보고 이것 저것 해보다가 발견한 방법은 당혹스러울 정도로 간단했다.
html의 css, js 주소 앞에 .하나를 더 찍어주는 것,, 사실 검색하고 나서 얼마 안되서 찾아낸 방법인데 당시에는 해결이 되지 않았다. 하지만 한 두시간 헤매다가 너무 답답해서 레포지토리를 다시 생성해 수정 된 코드를 build해주니 이번에는 됐다.
(.....??)
<!doctype html>
<html lang="en">
<head>
...
//아래 두줄의 src 맨 앞에 .하나를 더 입력해보세요
<script defer="defer" src="./static/js/main.cf466577.js"></script>
<link href="./static/css/main.69542f53.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
</body>
</html>이것저것 수정해보다가 구렁텅이에 빠졌다보다..
이 해결방안 외에도 URL에 index.html을 붙여 접속해보는 방법, router에 basename값을 추가해주는 방법, json파일에 private를 true -> false로 바꿔주는 방법등이 다양하게 있었지만 나의 오류메세지에서는 js파일과 css 파일이 응답하지 않는다는 내용이였기 때문에 .을 붙여주는 방식으로 해당 경로를 잘 지정해 주는 것으로 해결이 되었던 것 같다.
오류가 발생한 위치를 잘 보자 ..!!
내친김에 배포 자동화까지 해보려고 했는데 생각보다 간단한 작업은 아닌 듯 싶어 오늘은 배포 작업에 대해서만 포스팅을 완료하려고 한다.
build와 github 배포에 대해서 더 자세히 공부해야겠다는 생각이 들었고 오늘도 역시나 에러메세지에 답이 있다는걸 다시 한 번 경험했다..ㅎㅎ