[AWS] 로컬 개발환경에선 되는데, 배포된 곳에서만 POST 통신이 안된다 (Invalid body)

date
Feb 27, 2023
slug
로컬-개발환경에선-되는데-배포된-곳에서만-POST-통신이-안된다-invalid-body
category
Dev
status
Public
tags
aws
Front-end
Next.js
keywords
summary
next.js 프로젝트에 api routes를 정의했는데 로컬에서만 된다..!
type
Post
Last updated
Feb 27, 2023 06:56 AM
Created time
Feb 27, 2023 05:39 AM
이야기의 서막
notion image
우리 프로젝트의 팀원분께서, 내가 먼저 타 도메인에 배포했던 기능을 떼와서 붙여넣는 작업을 해주셨다.
어떤 글을 등록하는 에디터를 구현하는 작업이었는데, 그 내용중에는 url의 meta데이터를 가져와서 embed로 그려주어야 하는 기능이 있었다.
next.js의 api routes로 구현해서 배포한 기능이었는데, 로컬에선 되고 배포된 환경에선 안된다고 한다..
3일 넘게 디버깅 해보다가 멘탈이 터질 것 같다는 말을 듣고 직접 보기로 하였다.
 
원인 분석
로컬 개발환경에서는 잘 가져와지는 데이터가 네트워크 로그에 400(INVALID BODY)으로 찍히는 것을 보고는 의심되는 원인은 아래와 같았다.
  1. PWA 관련 이슈
  1. 환경세팅 관련 이슈
로컬 개발환경과 배포된 환경의 차이는 크게 위 두개밖에는 없었다.
위 원인들 중에 범인이 있을 것이라고 확신하며 나아가보기로 했다.
 
트러블 슈팅 - PWA
notion image
최근 환경개선을 진행하면서 이러한 일이 있을 때 디버깅을 쉽게 하기 위해, PWA를 환경변수로 비활성화 할 수 있도록 해두었다.
별도의 코드를 수정하지 않고, DISABLE_PWA 환경변수를 세팅해서 재배포하였다.
서비스워커가 등록되지 않았을 때에도 마찬가지로 400에러가 동일하게 발생하였다.
PWA관련 이슈가 아닌 것 같다.
 
트러블 슈팅 - 환경세팅
notion image
로컬에서 빌드해서 테스트했을때도 동작하는 것을 보면, 확연한 환경세팅의 차이라고밖에 생각이 되질 않았다.
네트워크 로그에 찍히는 헤더의 값들부터 비교해보았는데, local과 배포된 도메인의 이름 정도만 다를 뿐 크게 다른 것이 없었다.
그러던 중 먼저 배포해서 잘 쓰이고 있던 환경과 현재 안되는 환경과의 차이가 하나 떠올랐는데, 그것은 바로 배포 플랫폼의 차이였다.
기존에 배포해서 잘 쓰는 도메인은 vercel로 배포하고 있고, 현재 문제가 되는 도메인은 aws를 통해 배포하고 있다.
헤더를 한 번 확인해보니 aws의 cloudfront에서 캐시를 히트하고 있는 것을 알 수 있었고, POST 응답이 캐싱되어서 그런가 싶어서 캐싱을 해제해보았지만 무용지물이었다.
 
왜 안되는걸까?
aws의 CDN이 원인일것이라는 것 까지는 추론했으나, 해결되질 않았고 포기하려는 찰나에 문득 POST method로 데이터를 보낼 때의 Content-Type이 생각났다.
notion image
기존엔 application/json 타입으로 데이터를 보내는데, postman에서 테스트해본 결과 application/x-www-form-urlencoded 으로 요청하니 잘 되었다.
 
원인은 다름아닌 Content-Type 헤더..
뭔가 먼길을 돌고 돌아 왔는데, 원인은 CDN의 특성?이었으나 결국 코드를 수정해야 했다.
이럴 때 마다 위에서 언급된 두 도메인은 하나의 모노레포에서 관리하고 싶은 욕구가 가득해진다.
하지만.. 현재 사내 구조상 쉽지않은 길이라서 진행할 수가 없는게 슬픈 현실이다.
개인적으로 혹은 다른 환경에서 더욱 열심히 도입해보고자 하는 것이 나을 수도 있겠다..!