- netlify로 배포했더니 프록시 오류남
- 고치고 보니 라우터 404 오류도 있었음
- 라우터 고치니 다시 프록시 오류남….😅
🔥 첫 번째 문제
프론트엔드에서 api를 사용하다보면 cors 오류를 해결하기 위해 proxy를 설정해야할 때가 있다.
개발 중에는 CRA(create-react-app)을 이용하는 경우 package.json 파일에 proxy옵션을 추가해서 쉽게 프록시를 구축해서 문제를 해결할 수 있었다.
📋 package.json
"proxy" : "https://www.api주소.shop/"하지만 문제는 netlify 배포 후 였다.
netlify에 배포할 경우, api는 정상 작동하지않고, 404에러가 뜬다.
브라우저의 네트워크 탭으로 확인해보면 요청url이 아래와 같기 때문이다.
https://도메인.netlify.app/v1/search/book.json?query=쿼리
💡 해결 방법
step 1
- api를 사용하는 파일에서 아래와 같이 작성한다.
const PROXY = window.location.hostname === 'localhost' ? '' : '/proxy';
const URL = `${PROXY}`;
//api 요청 인스턴스
const api = axios.create({
baseURL: URL,
withCredentials: true, //옵션
headers: { 'Content-Type': 'application/json' }, //옵션
}); - 로컬 서버일 경우,
package.json에서 설정한proxy로 api 연동되고 - 그 외(즉, 개발 서버)는 api 주소 앞에 proxy가 붙도록 한다.
step 2
- 최상위 경로(
.env나package.json와 같은 위치)에netlify.toml생성 후, 아래와 같이 작성한다.
📋 netlify.toml
[[redirects]]
from = "/proxy/*"
to = "https://www.api주소.shop/:splat"
status = 200
force = true:splat필수!- 참고 :
from에 쓰인 proxy라는 단어는 다른 단어로 교체 가능. 다만 step1에 작성한 proxy역시 동일하게 수정해야한다.
🔆 해결 완료
- 배포 사이트에서 확인해보면 api가 잘 작동하는 것을 확인할 수 있다.
- 요청url 중간에 proxy 설정해준 경로로 우회된 것을 확인할 수 있다.
🔥 두 번째 문제
- api 오류를 해결한 후 혼자서 배포 사이트 qa를 진행하던 중 새로운 에러를 발견했다.
- 메인 홈을 통해서 navbar를 이용해 페이지 이동은 문제가 없었다.
- 하지만 /signin /signup 등을 주소창에 직접쳐서 페이지 이동을 하려고 하거나 라우팅되어있는 공유 링크로 들어가면 이런 오류 페이지가 나타났다..🥹
💡 해결 방법
📋 _redirects
/* /index.html 200 를 public폴더에 추가해준다.
/*모든 url에 대해/index.html을 보내겠다200은 문제없이 요청을 처리했다는 답변
✨ 이유
리액트는 SPA(Single Page Application)이기 때문에 index.html만 렌더링한다.
사용자에 브라우저는 서버로부터 이 파일만 받아 여러 컴포넌트를 이 위에 그리는 것(렌더링)이다.
SPA를 편하게 구현하고자 React router 라이브러리를 거의 필수적으로 사용하는데, 이러한 라우팅도 SPA이기 때문에 서버가 아닌 사용자의 브라우저가 하게 된다.
따라서 서버는 ” [https://도메인.netlify.app/](https://도메인.netlify.app/) 요청이 들어왔을 때 index.html 파일을 보내준다” 는 규칙만 알고 있다.
`https://도메인.netlify.app/login` 을 요청하면 당연히 서버는 모를 수 밖에 없다.
그래서 netlify에서 _redirects 파일로 정의해주는 방법 등을 이용해서 규칙들을 서버에 알려주어야한다.
🔥 트러블 슈팅
두번째 문제인 라우터를 해결하고 나니 아까 해결했던 api proxy 오류가 다시 나기 시작했다…..why..?
→ netlify에서 redirect 설정할 때 두 가지 파일(netlify.toml과 _redirects)를 건들여서 였다. 이렇게 되니 _redirect 설정만 적용되고 toml은 무시(덮어쓰기?)된 것 같았다.
/public/_redirects 파일을 삭제해주고
다시 공식문서를 보면서 netlify.toml으로 통일을 해주었다.
🌐 netlify.toml
각각의 경로에 [[redirects]]로 구분을 해준다.
from : redirection 하기 전 경로
to : redirection 하려는 URL 또는 경로
statues : 사용할 HTTP 상태 코드 (default 301)
force : 경로의 기존 내용을 재정의할지 여부 (default는 false)
[[redirects]]
from = "/proxy/*"
to = "https://url주소/:splat"
status = 200
force = true
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
force = false🙏 느낀 점
무조건 구글링해서 오류난 걸 해결하기에만 급급했던 것 같다.
왜 이런 오류가 일어나는지 생각해보고 다양하 자료를 찾아보고, 공식문서도 꼼꼼히 읽어보며 스스로 문제를 해결하는 것이 중요하다는 것을 몸소 깨닫게 되었다.
또 앞으로는 무작정 개발 다했다! 하고 배포를 하는 것이 아니라 배포 전에 설정해야 할 것(환경 변수, proxy 등)을 제대로 설정하고 배포를 시도해야겠다.🥹
