독서노트 미니 프로젝트 진행중, 생각했던 최~~소한의 기능을 구현 하고 1차 배포를 했다.
프로젝트 빌드 : Vite
fake server : (로컬) json-server
로그인,회원가입 : Firebase
배포 : Netlify
우선, json-server로 로컬에서 구동하던 페이크 서버를 어떻게 netlify 에서 배포하느냐가 문제였는데, 이런 저런 시도를 해봤지만 순수하게 Netlify 에서 json-server를 구동할순 없었다.
Netlify를 쓰려면 서버리스 백엔드 기능을 제공하는 Netlify Functions 을 이용해야했는데 함수를 작성해야한다는 점이 간단해보이지 않아서, 그냥 호스팅 플랫폼인 Glitch를 이용해서 페이크 서버를 만들었다. (개인 작업이니까!)
GitHub - younggyung/db
Contribute to younggyung/db development by creating an account on GitHub.
github.com
호스팅 한 다음, 서버 URL 받아서 로컬서버로 되어있던 URL들을 모두 교체해주고, 배포를 진행하니 수월하게 빌드되었다.
(사실 json server를 netlify로 어떻게든 돌려보겠다고 삽질 많이 함..)
하지만..... 이렇게 해서 배포까진 했는데 책검색 API가 작동을 하지 않았다.
CORS 문제를 피하기 위해서 프록시를 설정해 준 상태였는데
(참고) React 에서 fetch로 네이버 검색 API 사용하기 (feat.Vite 환경/프록시) (tistory.com)
React 에서 fetch로 네이버 검색 API 사용하기 (feat.Vite 환경/프록시)
해결과제 1. Open API 클라이언트 신청 2. 발급받은 아이디와 키로 fetch 받아주기 3. Postman으로 데이터 전송 확인 - 여기까지는 무난하게 했는데, CORS 에러 발생해서 막혔다. 4. CORS 해결하기 CORS에러를
meldu.tistory.com
Netlify에서는 먹히지 않았던 것! 따로 설정이 필요했다.
Rewrites and proxies | Netlify Docs
Rewrites and proxies
Use rewrite rules to fetch a location behind the scenes while the URL in the visitor’s address bar remains the same. Proxy to another service or site.
docs.netlify.com
근데 Netilify 공식문서 좀 별로인거같애..
아무튼, 프록시 문제까지 해결하고 나니 API 검색도 잘 돌아가는데
걱정되는건 최초 로딩이 느린거같다는 것. 여러 기기에서 테스트 해봐야겠다.
'리액트' 카테고리의 다른 글
| 리액트에서 form의 작동 (feat.FormData와 JSON) (0) | 2023.06.25 |
|---|---|
| useEffect 함수와 return (0) | 2023.06.23 |
| [실패의 기록] Modal 컴포넌트를 재사용하면서, 각각의 다른 children을 렌더링 하고 싶었다.. (0) | 2023.06.15 |
| React :: fetch()로 서버에서 데이터 삭제하기 (0) | 2023.06.03 |
| React 에서 fetch로 네이버 검색 API 사용하기 (feat.Vite 환경/프록시) (0) | 2023.05.28 |