aws 프론트 배포 405 에러

https://deswaq.tistory.com/103

S3+CloudFront를 활용한 정적 웹 배포하기

 

배포하는 글을 썻다.

배포가 다 된줄 알았으나!!!!!!!! 

하다보니 내가 쓴 글에 불필요한 작성이 있는것도 알앗다

근데 뭐 해도 별 상관은 없다.

405에러가 떴다.

미치고 팔짝 뒤겠다

때려죽어도 안된다라는 말이 정말.. 적합했던 배포 트러블슈팅.

 

해결1

어쩐지 첫 화면만 보이고 그 외 화면들은 데이터가 없으니까 undefined라고 오류 페이지로 가는것이다.

아!!!왜!!!! 상태로

찾아보니까 cloudfront에 동작부분에 그냥 get으로 햇지 않음..?

이거를 

허용된 HTTP 방법에 세번째껄 선택하니까

다른 페이지로 이제 이동은 된다!!!

근데 문제. 405에러가 뜬다..ㅇ ㅖ.. post가 안된다는뜻

장고였나... ngnix엿나... 어디가 post를 인식 못한댓나... 뭐 어쩌고라고햇는데.. 백엔드 쪽이라 정확히 기억은 안나지만

백엔드와 모여서 잼띠니가 시키는대로 다 해봤음

그래서 프론트에선 할 수 있는건 다 했으니 백엔드 문제인가보다.. 하고 백엔드에서 계속 삽질만 했다

그러다가 잼띠니가 저희를 포기를 하는 불미스러운 사건이 발생

ai가 우리를 포기해도 되는건지... 포기하는건 또 처음 봄

 

이틀을 배포한다고 날렸는데 진짜 여기까지 왔는데 이제와서 버셀,네트리파이로 배포한다,..? 가오가있지..... 막 이런다

 

그러다 힌트를 얻었다ㅂ!!!!!!!!!

뭐였냐면.. 네트워크탭에 있는 헤더를 그냥 쫙 복사해서 잼띠니한테 알려줫더니

지가 원인을 찾아줌

Request URL
https://d1eabj9ka18j40.cloudfront.net/api/users/send-codeRequest Method
POSTStatus Code
405 Method Not AllowedRemote Address
13.225.117.12:443Referrer Policy
strict-origin-when-cross-origin





Ask AI about more insights
You can now ask Gemini about more performance insights: image delivery, legacy JavaScript, duplicate JavaScript, and modern HTTP.
Emulate the 'Save-Data' header
In 'Network conditions', you can now emulate the 'Save-Data' request header that indicates the client's preference for reduced data usage.
Debug complex CSS values easier
See also, from version 138: The Elements > Styles tab can now show you a tooltip with a breakdown of the definition chain and step-by-step evaluations of complex CSS variables, so you can find bugs quicker and gain a deeper understanding of how a value is computed.

 

진짜 그냥 헤더 긁은건데 저 밑에 에스크 어쩌고는 지 알아서 생겼음

 

아니..?!!!! 암만 서치를 해도 저런 얘기는 전혀 없었다

api 경로에 대한 메서드를 "허용"...?

동작에서 api 경로 추가하는 글은 하나도 못봣단말임.... 405에러떠도 위에서 언급한대로 디폴트 경로에서만 수정했지

저렇게 새로 추가하라는건 처음 봤다

하지만 저의 원본은 s3 버킷밖에 없었음

현재/*규칙 하나만 있으면, API 요청(.../api/...)을 포함한모든 요청이 S3 버킷(프론트엔드)으로 가버려서 백엔드 서버에 도달하지 못합니다.

안알려줫잖아.. 아무도 안알려줬어요.. 진짜요... 

원래 하던 사람들은 어캐 배포하는거냐고 백엔드 하는 사람들이랑

머리를 6시간 내내 쥐어 뜯었는데 이제 좀 덜 쥐어뜯음

멘토 한명 구하자며.. 엉엉 울었다

 

이렇게하고 백엔드에서 추가한 코드때문에 되는건지 아님 내가 설정한것때문에 되는건지 백엔드 코드 한줄씩 지워가면서 해봤다.

추가한 코드 다 지워도 되길래 에?? 상태로

내가 설정한걸 지웟더니 바로 405길래 찐 해결방법을 작성해봅니다.

 

진짜최종 해결

원본생성

원본을 들어와서 원본 생성을 눌러준다

아무것도 건들지말고 이렇게만 설정하고 저장

뭐 만약에 api/back이면

api.back으로 하면 됨!

 

동작 생성

동작으로 돌아와 동작 생성을 눌러주기

 

경로 패턴은 그 백엔드에서 서버 주소줄때

공통된게 잇을거 아닙니까? 거기까지 써주고 *까지하기

원본그룹 및 선택누르면 커스텀 오리진으로 아까 만든 원본이 뜬다

 

꼭... 허용된 HTTP방법 세번째껄로 선택

 

Create behavior 누르고 잠시 기다려야함..

반영되기까지 좀 걸린다

나는 그것도 모르고 안된다고 어떻게 좀 해보라며

백엔드 팀원을 영원히 잡도리했습니다

미안합니다

 

여기까지가 저의 해결방법입니다.

저는 원본과 동작을 하나 더 추가 해주었더니 되었어요

 

아직까지 미스터리인건

분명 백엔드에게 요청을하고 데이터를 받아오는데

데이터가 이상하게 몇개만 들어오고 나머지가 죄다 빈값으로 들어와서

없다고 하기에도 애매한 상태로 넘어왔다.

 

아니 이거 뭐냐면서 200 뜨는데 데이터 상태가 왜 이러냐고

확인하는데 또 로컬에서는 데이터가 잘만 넘어오는것이다

뭐 좌표값은 들어와서 카카오맵에 핀은 찍히지만 식당 이름도... 설명도...전화번호도 죄다 빈값이였ㄱ다

다국어 지원도 하고있어서 어쩌다가 언어를 바꿧는데

갑자기 데이터가 다 잘 들어오는것임.

에??????????

하고 한국어로 바꿨더니 갑자기 언제 빈값줬냐는듯 데이터 싹 들어옴

 

그렇게 백엔드랑.. 나랑.. 얼레벌레 배포가 끝났다.

이제.. 엄청난.. 경험을 한 것 같다

+++
저 데이터 안들어오던것도 aws에서 주소에 KR을 붙여서 보여줫기 때문이였음.... 주소에 lang=ko-KR 이엿나 대충 저런식으로 붙어서 백엔드가 쿼리파람을 ko로 인식해서 데이터를 줘야하는데 뒤에 쓸다리없이 KR 까지 붙어서 데이터가 이상햇던것임. 그래서 다른 언어로 바꿧을땐 주소에 KR이 없어져서 데이터를 제대로 불러왔던것이다
하하!