Netlify Function 에러 / Proxy

1.🧐 문제/목표 파악

Netlify Function으로 서버리스 백엔드를 구축해서 배포한 후, 로컬에서 프론트로 테스트를 했더니 에러가 떴다. 다른 function에서는 정상 작동하는데 update_ideas function에서만 에러가 떠서 그 원인을 파악해야한다.

 

1.🎯 문제/목표 해결

1) 범위 좁히기

get_ideas와 update_ideas의 차이를 파악해서 무엇이 에러를 일으키는 변수인지 파악한다.

get_ideas.js와 update_ideas.js를 비교한 결과 try-catch에러 핸들링 구간이랑 node-fetch import 구간 이렇게 2가지 차이점이 있음을 알 수 있다.

 

맨 처음에는 에러처리를 수정했는데 별 다른 개선이 없어서 node-fetch 라이브러리 import코드를 삭제했다.

 

그 결과 정상적으로 에러가 사라진 것을 확인할 수 있었다. 아마 라이브러리가 netlify 배포환경에서는 지원되지 않는 라이브러리였으리라 추측된다.

 

사실 검색도 해봤고, 정확히 동일한 에러관련 포럼글을 발견했다.

https://answers.netlify.com/t/typeerror-class-extends-value-object-is-not-a-constructor-or-null/79762/4

TypeError - Class extends value #<Object> is not a constructor or null

하지만 뭔가 해당 글에서 제안하는 axios를 쓰는 문제는 아닐거라 생각했는데, 그건 그냥 느낌이었고 정확한 에러지점을 파악하는게 우선이라 위의 과정을 거쳤던 것이다.

즉, 정확한 문제 지점을 파악하는 것이 검색보다 우선된다.

 

2.🧐 문제/목표 파악

 

리액트 코드를 netlify에 배포했더니 404에러가 떴다. 딱봐도 요청 URL에서 아예 서버로 요청이 못간 모양이었다. proxy로 설정해둔 부분이 의심이 들어 해당 키워드로 검색했다.

2.🎯 문제/목표 해결

검색 키워드 : netlify proxy

관련 자료는 많이 있었다. 아래 블로그를 참조하여 문제를 해결했다.

https://velog.io/@hinyc/%EB%B0%B0%ED%8F%AC-Netlify-proxy-%EC%84%A4%EC%A0%95-9gmuvrr8

[배포] Netlify proxy 설정

 

netlify.toml파일을 만들어서 프록시 정보를 넣어줘야했다.