먼저 백/프론트 서버 연결 시 CORS 에러 또는 여러 proxy 설정 위한 CORS 에러 해결 의 내용(proxy, http-proxy-middleware)이 해결되었다는 가정 하에 진행한다.
프론트단에서 배포하기 위해 React를 통해 netlify를 사용하려고 한다. 그 과정에서 netlify가 프록시 지원을 할 수 있도록 세팅을 해줘야 한다. 따라서 netlify.toml 파일을 통해 proxy를 설정하여 api를 처리할 것이다.
🌐 netlify.toml
먼저 route 디렉토리에 netlify.toml을 만들어 준다. 각각의 경로에 [[redirects]]로 구분을 해준다.
from : redirection 하기 전 경로
to : redirection 하려는 경로
statues : 사용할 HTTP 상태 코드 (default는 301)
force : 경로의 기존 내용을 무시할지 여부 (default는 true)
[[redirects]]
from = "/proxy/*"
to = "https://url주소/:splat"
status = 200
force = true
[[redirects]]
from = "/api/*"
to = "https://api.openweathermap.org/data/2.5/group:splat"
status = 200
force = true
[[redirects]]
from = "/*"
to = "/index.html"
status = 200:splat 은 /*와 같은 역할이라고 보면 된다. 입력한 경로 외에 추가로 경로가 연결되어도 가능하도록 붙여주었다.
나는 서버, 오픈 api, index.html 순으로 입력해주었다. 경로의 실행 순서 역시 위에서부터 입력한 대로 영향이 간다. 자세한 내용은 아래 트러블 슈팅 에.. ^ㅠ^ㅠ..
🏃♂️ 트러블 슈팅 (with Top-Down)
분명 코드를 다 맞게 썼는데, 오픈웨더 api가 실행되지 않았다ㅠ 이제 배포만 하면 되는데 해결되지 않아 힘들었었다 😥
원래 index.html에 대한 redirects를 2번째 위치에, 그리고 오픈웨더 api 주소를 3번째에 입력했다.
api ?
api 문제인가 싶어서 api 다 수정하고 여러 방법으로 고쳐봐도 해결되지 않았다. api는 문제가 없다는 거니까..
/*
다시 확인해보니 index.html의 /* 처리로 인해 /로 시작하는 모든 url이 index.html로 실행되었던 것이다. 웨더 api 역시 마찬가지였다. 그래서 index.html의 from 경로를 /로 두었는데, 메인 페이지만 실행이 되고 url에 로그인 혹은 카테고리 페이지 등의 경로를 주면 404페이지가 떴다. *가 없으면 다른 경로로 연결하지 못하기에 이 방법도 아니었다ㅠ
실행 위치
도대체 어디가 문제이지 싶어서 막막했는데,, 같이 한 팀원이 도움을 주었다ㅠ index.html을 맨 하단으로 위치하니 성공적으로 실행되었다! 탑다운 방식이라 경로 처리 역시 해당이 되었나 보다,, 원래 제일 어려운 문제는 알고 보면 이렇게 간단(?)하게 해결이 되는 것 같다. 이마저도 해결해야 알 수 있지만^^..
cf)
(React) React App에서 CORS 이슈 해결하기
Netlify 301 Redirection 처리하는 방법
netlify 배포하기
