클라이언트 배포
하지만 간과한게 있었다. S3는 정적 웹페이지 호스팅 방법이다. 그렇기 때문인지 동작이 되지 않는 것이 있었다. 바로 로그인 시 POST요청을 하게 되는데 이 경우 405 error를 받게 되었다. 확인해보니까 s3에서 post 요청을 막는 줄 알았는데 그것이 아니라 ...
📌 클라이언트를 배포해보자.
클라이언트를 배포하다가 정신이 나갈뻔 했다.
해당 포스트는 내가 삽질하고 알게된 것을 적은 것이다. 중간에 삽질한 것이 결국은 내가 잘못한 것으로 인해 시도한 것이고 마지막에 해결 역시 잘못을 몰랐을 때 해결한 것이다. 추가부분에서 어떤 것 때문에 삽질을 했는지, 또 어떻게 해결해야 하는지 설명했다.
✏️ S3 배포
처음 클라이언트를 배포하는 방법을 배운 것은 바로 AWS의 S3를 이용하는 것이었다. 버킷을 만들고 리액트 앱을 빌드한 뒤 빌드 폴더 내부의 파일들을 버킷에 올리면 되는 간단한 방법이다. 그렇기 때문에 사실 클라이언트 배포는 걱정하지 않았다.
하지만 간과한게 있었다. S3는 정적 웹페이지 호스팅 방법이다. 그렇기 때문인지 동작이 되지 않는 것이 있었다. 바로 로그인 시 POST요청을 하게 되는데 이 경우 405 error를 받게 되었다. 확인해보니까 s3에서 post 요청을 막는 줄 알았는데 그것이 아니라 서버에서 해당 오리진에 대해 cors처리를 해주지 않아서 발생하는 문제였다. 처리해주니까 요청이 갔다. 단 쿠키에서 문제가 생겼다. cors일때 쿠키를 담아서 주기 위해서는 samesite = none이어야하는데 이는 https에서만 쿠키 전달이 가능하므로 실패다..
❗️ 405 에러
하이퍼텍스트 전송 프로토콜(HTTP)의 405 Method Not Allowed 응답 상태 코드는 서버가 요청 메서드를 알고 있지만 대상 리소스가 이 메서드를 지원하지 않음을 가리킵니다.
서버는 405 코드를 응답할 경우 반드시 Allow 헤더 필드를 생성해야 합니다. 이 필드에는 반드시 현재 대상 리소스에서 지원하는 메서드의 리스트가 들어있어야 합니다.
위 문제가 바로 cors처리를 제대로 하지 않았을 때 났던 문제다. 꼭 405 error가 발생한다고 cors처리를 제대로 하지 않은 것 때문이라고 할 순 없지만 고려해볼 문제일 순 있다는 것을 알게되었다.
📚 해결을 위한 삽질…
🪒 AWS cloud front 이용
POST요청이 되지 않기 때문에 이를 해결하는 방법을 찾아보니 AWS에서 제공하는 cloud front를 이용하면 사용가능한 http 메소드를 설정할 수 있었다. 또한, http를 https로 변경할 수 있게 만들 수 있다. 아주 좋은 것 같아 적용했다.
근데 문제가 생겼다. 당연한 문제였는데, 현재 클라이언트에서 통신하려고 하는 서버의 프로토콜은 https가 아니라 http 였기 때문에 서로 통신이 불가능 했다… 그렇다면 cloud front도 실패하는 것인가 했지만, 떠오르는 또 다른 아이디어는 서버도 cloud front에서 보여주면 되는 것이었다.
실제로 서버 역시 클라우드 프론트에 올렸다. 때문에 https로 인해 통신이 불가능한 문제는 해결되었다. 그걸 확인할 수 있었던 이유는 바로 클라이언트에서 POST요쳥이 갔기 때문이다!
하지만 다른 문제가 발생했다. cloud front는 정책 때문인지 쿠키를 담을 수 없었다… 나의 로그인 기능은 쿠키를 이용해서 제공되는 서비스였기 때문에 이를 해결하지 못하면 로그인을 할 수 없었다.
여러 방법을 찾았지만, 이전에는 쿠키를 담을 수 있게 설정이 가능했던 것 같은데 지금 클라우드 프론트는 그 설정하는 부분이 보이질 않았다. 그래서 결국 포기했다.
🪒 netlify 이용
웹페이지 배포를 하는 또 다른 방법인 netlify를 이용하면 될까하는 생각에 해봤지만 되지 않았다. 물론 이도 s3와 같이 문제가 발생할 POST요청이 불가능할 것이라는 생각이 들었고, 정확했다.
🪒 깃허브 페이지 이용
이 역시 POST 요청이 되지 않았다.
🔑 해결
클라이언트 배포를 단순히 서버와 따로 배포를 해야된다고 생각한 것이 문제였다. 그냥 빌드 파일을 서버에서 열어주면 되는 것이었는데, 생각만 하고 다른 방법만 계속 적용했었는데 실제로 해보니 성공했다… 클라이언트의 빌드 폴더를 서버에서 가지고 있고, 서버에서 해당 폴더의 index.html을 기본 경로에서 제공하는 방법으로 해결했다.
🤣 추가
위에서 언급했듯이 내가 겪었던 문제 중 post요청이 가지 않는 것은 단순히 cors처리를 제대로 하지 못해서 발생한 문제였다. 서버에서 s3주소를 제대로 처리해주면 위의 삽질을 하지 않고도 해결이 되는 것이었다.