[pre-project] 프론트엔드 배포 및 구현 확인

JulyK9·2022년 11월 4일
pre-project배포
2

pre-project

목록 보기
3/4

📌 문제상황

  • 서버는 백엔드에서 이미 EC2에 배포해주신 상황
  • 프론트는 배포 관련 s3 또는 github 배포로 고려중이었음
  • build와 deploy를 통해 github deploy로 배포하였으나 cors에러와 여러가지 에러가 뜨면서 실패
  • 프록시는 미들웨어로 설정해준 상태여서 기존에 로컬에서 서버와 통신은 문제없이 진행되는 상황이었음

💡 접근방법

  • 차선책으로 s3 버킷을 통해 정적 웹사이트 배포 시도
    => 화면은 렌더링되나 api 요청에 의한 게시물 리스트가 불러와지지 않고 404에러 발생, 별도로 cors 에러는 발생하지 않음
    => 네트워크탭에서 관련 에러로 nusuchkey 에러 메시지 확인
  • 회원가입에서도 페이지는 렌더가 되나 가입 요청을 보내면 403 에러 발생
    => 전반적으로 api 요청 보내는 부분에서 문제 발생 확인
  • 검색을 통해 버킷 정책 부분 등 여러 방법을 시도하였으나 해결이 되지 않음

👌 해결방법

  • 차선책으로 팀장분이 vercel을 통한 배포 방법 확인하여 시도
    => 처음엔 잘 되지 않았으나 vercel.json 파일에 프록시 설정해주고 해결
    => source와 destination 주소를 정확히 써줘야 반영되므로 유의해야 함을 공유
    => 직접 해본 부분이 아니라 vercel 사용을 해보고 직접 적용해봐야 알 수 있을 듯
{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "서버API주소/api/:path*"
    }
  ]
}

🔮 느낀점

  • 배포와 cors 에러 이슈는 문제의 원인이 어디서 되었는지를 찾고 좁혀나가기가 어려워서 해결에 시간이 걸릴 수 있음
    => 사전에 충분한 시간을 배정하여 계획을 세우는 걸 고려
  • s3 배포나 aws 는 가급적 배포 실패에 대한 아쉬움
    => 버킷 정책 등 설정, 빌드 파일의 s3 버킷에 담는 부분 등
    => free tier 인데도 과금이 일부 발생되는 상황 확인
    => iam 사용자를 추가 생성하여 s3 버킷 작업은 프론트에서 직접하는 것도 괜찮은 방법이 될 것 같음
    => vercel 배포 작업을 직접 보진 못했으나 알아보면 향후 프론트엔드 배포에 유용할 듯

🔑 레퍼런스

s3 관련 에러 이슈

배포 관련 정보

vercel 로 프론트엔드 배포

profile
JulyK9
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.
이전 포스트

[pre-project] 통신으로 가져온 데이터에 속성 추가

다음 포스트

[pre-project] vercel 프론트엔드 배포

0개의 댓글