netlify 로 react 프로젝트 배포 시 나온 오류들

일단 배포는 완료됐다^0^ 
https://dbd-random-perks-kr.netlify.app/

데바데 랜덤퍽KR

241020 수정

아침 6시까지 배포하고 오류 없는것까지 확인하고잤는데 아침에 백엔드 친구가 오류떴다는 카톡을 보냈다.

결국 toml 파일은 적용이 제대로 안되는건지 효과가 없었고, netlify.toml 파일은 삭제, _redirects 파일을 수정하여 고쳤다.

고친건 _redirects 파일 하나뿐이 되었다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

1. Mixed Content: The page at...

netlify 프론트의 https와 AWS의 http 서버가 충돌하여 생긴 오류라고한다.

http를 https로 바꿔주는게 가장 좋은 방법이라고했지만 AWS에서 https를 사용하려면 월마다 돈이 든다고해서 그럴순없었다. 여기저기 찾아보고 고치다보니 어디서  적용이 잘 된건진 모르겠는데, 최종적으로 내가 적용시킨 것들은 이렇다.

 

- public 폴더 안에 있는 _redirects 파일

/api/* ~~api url~~/api/:splat 200
/* /index.html 200

 

수정) 처음엔 윗줄만 적용했다가 안돼서 toml 파일을 생성한건데 결국 안됐고, 위처럼 두줄을 모두 써주니 적용됐다. 저렇게 쓰려니 프리티어에서 오류가 걸렸는데, 무시하고 적용해주면 된다.

 

 

- 루트에 netlify.toml 생성, fetch url 수정  => 제대로 적용되지 않아 toml 파일 삭제. url 은 수정한 그대로 적용.

// netlify.toml
[[redirects]]
  from = "/api/*"
  to = "http://~~api url~~/api/:splat"
  status = 200
  force = true

 

// fetch를 사용하는 컴포넌트

const host =
    window.location.hostname === process.env.REACT_APP_LOCAL_IP
      ? 'http://~~ 원래 사용하던 http로 오류나던 백엔드 서버 url(로컬에서 사용)'
      : '/api/getData'
 	const getDatas = async () => {
    const res = await fetch(host, { cache: 'force-cache' }) // fetch가 너무 오래걸려서 넣어줌
    const data = await res.json()
    ...
 }

 

이 오류의 해결책으로 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 이걸 index.html의 head에 넣어주라는 솔루션이 가장 많이 보였는데, 이건 http를 https로 변경해도 가능한 경우에만 적용된다고해서 나에겐 해당되지 않았다.

 

2. 404 Page not Found

생기는 오류들을 계속 고치다보니, 메인페이지 외의 다른 페이지에서 새로고침을 하면 나오는 오류였다. 아마 위에서 _redirects 파일을 수정해서 그랬던거같다. 다시 /* /index.html 200로 고쳤더니 잘됐으니까..

=> 수정) 1번처럼 다시 수정

 

 

3. 고쳐졌지만 해결되지 않은 오류들

- GET (( api url )) net::ERR_CONNECTION_REFUSED

- Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

이것저것 고치다보니까 더이상 뜨지는 않는 오류들인데, 어디서 어떤 방식으로 고쳐졌는지 알수가 없어 의문만 남아있다. 아래 오류는 package.json에서 "homepage": (( netlify 배포주소 )) 이걸 지웠더니 된거같기도한데.. 정확한건 모른다.

 

not valid JSON 오류는 netlify.toml이 제대로 적용되지 않아 기존의 api url이 아닌 배포 사이트 url + /api/getData에서 fetch를 하여 json 형식으로 이루어진 데이터가 아닌 html 형식의 응답을 받아버려 생긴 오류였다. 

 

나는 항상 배포가 제일 싫다.