프로젝트 배포준비

robin Han·2025년 6월 8일
1

배포에 사용하는 환경

1. vercel


프론트엔드를 배포하기위해서 무료이면서 사용이 간단한 서버리스 환경에서 프로젝트 호스팅을 위해서 사용헀다
깃헙이랑 연동을 진행해서 바로 호스팅해서 연결해서 사용할수있으며, 또한 자동적으로 깃헙에 push를 하면 해당 변경 브랜치에 따라서 preview 또는 production을 배포해주고 에러사항또한 로그를 통해서 확인할수있다.
조직 단위에 레포지토리에 연결할려면 PRO 버전 즉 유료이지만, fork를 해오던 개인 레포에 옮겨서 진행하면 되기 떄문에 큰 문제없이 사용할수있었다.

  • 미리 사두었던 도메인을 사용해서 바로 사용할수있고 아니면 vercel에서 제공 해주는 도메인을 사용하면 된다
  • env 같은 경우 직접적으로 추가해주면 되지만 prefix (VITE, NEXT ) 걑이 붙은 variable은 될수있으면 보안에 취약해질수있다는 경고를 보내기 때문에 production 에서만 사용하고, sensity 옵션을 주는게 좋다
  • 지정된 브랜치에서는 바로 production으로 빌드하지만, 아니라면 preview로 만들어진다 따러서 수동으로 production올리던, 해당 preview url을 곳곳에 추가해주면 된다..

2. sentry

프로젝트를 모니터링 하기 위해서 사용한 sentry, 개발 환경에서는 괜찮았던 부분들이 배포를 하면서 엄청난 에러를 뽑아내기 시작했다... 에러 지옥에 빠지면서 서버를 확인 하거나, 콘솔로 직접 확인하는 것이 아닌 에러를 잡아줄수있는 문제들이 생겼다. 배포된 환경에서 사용하다가 검정색 화면이 나오는데 콘솔없이 해당 상황을 replay 또는 로그를 확인할수있는게 필요했기 때문에 sentry를 추가하게 되었다. 처음에는 오히려 sentry를 설치하면서 에러가 생겼지만, 살짝 지능이슈, sentry auth 키가 헷갈려서 잘못 추가하면서 문제가 생긴거라 현재는 정상 작동한다 sentry로 이슈처리(에러), 로그를 확인해서 어느 코드에서 문제가 생기고, replay 까지 확인할수있다.

** 특히 무료서버를 쓰면서 서버가 다운되는 일이 많았는데 해당 문제가 서버가 다운되서 그런건지 아니면 코드오류인지를 파악할수있는게 필요했다

3. koyeb

우선 가장 많이 사용하는 AWS EC2는 유료라는 문제가 있었고, 차선책인 cloudetype 또한 24시간 이후 서버가 다운되는 상황이 발생했었다. 무료로 사용할수있는 서버리스, 깃헙 연동 플랫폼을 찾다 보니 koyeb을 찾아서 사용해보기로 했다. koyeb은 웹 애플리케이션 및 API 배포를 지원하는 서버리스 플랫폼이다.
DB 와 서버를 같이 올리고 깃헙연동과 무료로 활용할수있어서 사용하기 편했다.

  • 배포를 하면서 mysql을 사용하고있는데 koyeb은 postgresql밖에 사용하지못해서 벡엔드 코드를 직접 수정하면서 배포를 진행했다.
  • 무료인 만큼 정해져있는 리소스가 있어서 많은 API를 못하지만 현재 프로젝트정도는 충분히 사용할수있다고 판단했다
  • DB가 멀리있으면 서버도 같은 리젼으로 보내라

배포환경을 구축하면서 느낀점

  • 무료서버, 호스팅 플랫폼은 많지만 리소스는 한정적이라 서비스를 확정짓고 제대로 활용할 생각이있다면 그떄 유료로 전환하자.
  • env는 자동이아니다 까먹지말고 직접 추가하자
  • 이름이 없다 선언이 안되어있다 에러나면 env를 확인해보자
  • 에러로그가 나올때 검색보단 생각을하고 백트래킹을 해보자
  • 이것저것 시도해보자 어차피 아직 생각 못 해본 해결방법이 더 많다.
  • 실패는 두려워하지말되 에러는 두려워해라
  • 플랫폼은 문제없다 문제는 내가짠 코드다
  • 배포하기전, push 올리기전, npm build를 미리 해보고 에러 해결후 올리자.
  • 잘 실행되면 일단 오케이다.

0개의 댓글