Github page deploy Error 모음

연결되는 글

https://javannspring.tistory.com/276

깃헙 웹페이지 올리기 github.io

 

github page 설정시 나오는 에러 해결 방법

 

1. 404 가 나올경우

페이지를 못찾는 경우 package.json에 homepage url 을 잘못 설정했을 가능성이 높다.

"homepage" : "https://{{User Name or Organizations Name}}.github.io/{{Project Name}}/"

으로 설정되어 있는지 다시한번 확인해보자.

 

github page deploy를 하면 바로 반영되지는 않고 3~5분정도 기다려야 한다.

진행상황을 확인해보고 싶으면 Project Environments 에서 진행상황을 확인해보자.

 

Environments 를 클릭하면 배포 상황을 알수 있다.

배포중일 경우 Pending이 표시된다.

 

 

2. 다른 Page 로 라우팅이 안되는 경우

BrowserRouter를 사용했을 가능성이 높다. HashRouter를 사용하자.

BrowserRouter를 사용하고 싶은 경우 basename props을 추가해주자. 라우터한테 기본 URL을 제공하여 “/”이 아닌 레포지토리 주소로 이동하라고 지시하는 것이다. 이렇게 하면 github pages를 이용한 React 프로젝트 배포 시 생기는 라우팅 오류를 없앨 수 있다.

 

3. Mixed-Content Error

페이지는 로드 됐는데 Axios 로 가져오는 컨텐츠가 나오지 않을 경우 Network tab을 확인해 보았더니 아래와 같은 에러가 발생하고 있었다.

Mixed Content: The page at 'URL' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '{{Axios Get Url}}. This request has been blocked; the content must be served over HTTPS.
(anonymous) @ xhr.js:210
e.exports @ xhr.js:15
e.exports @ dispatchRequest.js:56
c.request @ Axios.js:108

 

이 경우 암호화된 HTTPS 기반의 사이트에서 암호화되지 않은 HTTP 사이트에 요청을 보내서 Mixed content 에러가 발생한 것이다.

페이지에 아래의 메타를 추가하면 http로 나가는 요청이 모두 https로 변경된다.

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

https를 지원하는 서버이면 상관없지만 http만 지원하는 서버면 계속 에러가 발생된다.

 

Mixed Content 를 '임시'로 보고 싶은 경우

Chrome -> 사이트 설정 -> 안전하지 않은 콘텐츠 -> 허용 으로 바꿀경우 임시로 데이터를 확인해볼 수 있다.

 

 

 

참고 

https://create-react-app.dev/docs/advanced-configuration/

Advanced Configuration | Create React App

https://stackoverflow.com/questions/35178135/how-to-fix-insecure-content-was-loaded-over-https-but-requested-an-insecure-re

How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"