[Pages]Static 파일들에 대한 Not Found Issue 해결과정

개요

이력서를 내가 직접 작성하는 과정에서 Develop, Main Branch에 Push가 발생되는 경우 Pages에 자동으로 배포가 되도록 설정을 진행하는 과정에서, React의 모든 참조파일들이 아래처럼 Not Founds가 발생되는 문제에 대한 기록이다.

---

개발환경

• React
• Github Pages 

Actions를 통한 배포가 아닌 Deploy from a Branch 방식을 통한 배포를 진행하였다.

---

이슈사항

Pages에서 Resume프로젝트에 접속하기 위한 링크는 아래의 스크린 샷과 같은 명칭과 같이 github.io/My-Resume/~로 진행되었다.

 

하지만 참조가 되야하는 파일들은 github.io/static~으로 경로가 달랐고, 파일 경로가 다르다 보니 실제 404, NotFounds를 출력하고 있었다.

 

이후 Url경로를 변경해서 파일을 그대로 호출이 가능한지에 대해서 확인을 해봤고 파일의 경우에는 정상적으로 위치에 존재하고 있는 부분이 확인되었다.

---

해결과정

https://create-react-app.dev/docs/deployment/#github-pages 다음의 Docs를 발견할 수 있었다.

 

다음의 설정과 같이 일단 domain에 대한 FullName을 기록해야 하는줄 알고 처음에는 기록을 진행했었다..

그러나 결과는 Not Founds가 그대로 출력을 하고 있었다...

 

 

이후 해당 homepage에 대한 값을 아래처럼 Project명칭으로 수정을 한 이후 빌드를 해서 테스트를 진행해봤다.

내 목표는 npm run build를 진행하게 될 경우 import하는 파일들이 My-Resume가 붙도록 하는게 목표였기 떄문이었다.

 

 

빌드를 진행한 이후 React에서 참조해야하는 파일들의 링크를 확인해봤고, My-Resume가 앞에 붙는것을 로컬로 우선확인 하였고, 이후 Push를 진행해봤다.

 

 

이후 Pages가 정상적으로 출력되는 부분까지 확인이 가능하였다...

---

 

정말..간단한 문제였는데... 처음에 잘 안되었다보니까 오래 해맨감이 없잖아 있는듯 하다....