솔직히 배포는 뚝딱 될줄 알았다 ㅎ

Movyes 프로젝트를 gh-page로 배포하면서 만난 에러를 정리해보려고 한다.

1. Module not found Error

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'assert' in 'C:\Users\yeon\Desktop\FRONTEND\projects\movie\node_modules\yargs\lib\platform-shims'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modulThis is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }

프로젝트 deploy에 실패하면서 발생.

파일에 환경변수를 넣을 때 실수로 import { env } from "yargs 가 추가되어 발생함.
import를 삭제하니까 사라졌다.

2. 첫번 째 404 에러

배포에 성공하고 웹사이트에 접속했더니 두둥..! 별안간 뜨는 없는 페이지입니다😥

처음에는 또 배포가 제대로 안된건가 싶었는데 gh-page에서 제공하는 404페이지가 아닌 내가 설정한 NotFound 컴포넌트가 뜨는걸 보니 배포는 성공한 듯 싶었다.

그렇다면 남은건 하나.

라우팅..!

잡았다 요놈!

하지만 아무리 살펴봐도 경로는 문제가 업었고... (애초에 그게 문제였으면 로컬에서도 안됐을텐데 로컬에선 문제가 없었음) 뭐가 문제일까... 한참 구글링하다 드디어 원인을 찾았다.

참고자료: https://tlsdnjs12.tistory.com/68?category=1029328

간단히 말하자면
프로젝트의 라우터가 가리키는 '/' 경로는 'https://배포사이트/' 에서의 '/' 인데
실제 배포는 'https://배포사이트/레포지터리이름/' 경로에 배포되기 때문이다.

해결 방법은 두 가지를 찾았다.

HashRoute 사용

BrowserRoute 대신 HashRoute 를 사용하는 방법.

basename 설정

BroswerRoute 에 basename=process.env.PUBLIC_URL 을 설정해준다.
그러면 자동으로 프로젝트의 베이스 경로가 /public_URL 로 바뀐다.

나는 이 방법을 사용했는데BrowserRoute가 아닌 createBrowserRouter 를 사용했기 때문에 공식 문서를 참고해서 두번째 인자값으로 해당 속성을 지정해주었다.

공식문서: https://reactrouter.com/en/main/routers/create-browser-router

2. 두번 째 404 에러

더이상 빈화면이 뜨지 않지만 메인 페이지에서 API를 호출할 때 404 에러가 발생했다. (그만..!)

네트워크 탭에서 API 요청이 어디로 가는지 확인했는데 내 배포 사이트 경로/API 엔드포인트 으로 요청되고있었다.
개발할 때 CORS 에러가 발생해서 proxy 처리를 했었는데 그것 때문인 것 같았다.
proxy처리를 제거하니 404 에러는 사라졌지만 새로운 에러가 발생했다!

3. Mixed Content

Mixed Content: The page at 'https://ohy9205.github.io/movie/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.koreafilm.or.kr/openapi-data2/wisenut/search_api?collection=kmdb_new2&ServiceKey=RIR3C4XJSZ780D6XH891&detail=Y&listCount=50&releaseDts=20221229&releaseDte=20230112'. This request has been blocked; the content must be served over HTTPS.

배포 사이트는 https 인데 API는 http 이라서 발생한는 에러.

해결 방법으로는 두 가지를 찾았다.

브라우저에서 임시적으로 해결

브라우저 설정 창에서 안전하지 않은 콘텐츠 차단->허용 으로 바꾸면 되는 방법인데...
현실적으로 사용자보고 일일이 설정하라고 할 순 없지 않을까.

프로젝트 파일에서 처리

/pubic/index.html에 meta 태그 추가

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

내가 선택한 방법.
header 안에 해당 코드를 추가하면 된다.

4. 이미지 경로

포스터 없을때 보여주는 이미지를 /public/assets경로에 넣어두고 img src='/assets/파일명' 으로 경로를 지정해뒀는데 라우트에 basename처리를 하면서 경로가 바뀌어 가져오지 못하는 현상이 발생했다.

이미지 경로도 /process.env.PUBLIC_URL/assets/ 처럼 변경했던 ㅣ해결됐다.

---

이상 배포시에 발생한 문제를 정리해 보았다.
우리 다음에 배포때는 만나지 말자~~