Vercel로 React 프로젝트를 배포해 보자 - (1) Vercel 배포 기본

👩🏻‍🚀 moonshot 👩🏻‍🚀 사이트의 프론트엔드를 배포하면서
React 프로젝트를 배포하고, 커스텀 도메인을 붙이고, 개발(테스트)환경과 운영 환경을 분리하여 배포하기까지의 과정을 경험할 수 있었습니다.
위 시리즈들을 통해 프론트엔드 배포를 위한 A-Z의 전반적인 과정들을 기록하면서 제가 겪었던 경험들을 공유하고자 합니다.

---

1️⃣ 서론 | 프론트엔드 배포와 그 종류

vercel 배포 프로세스에 대한 설명에 앞서, 프론트엔드 배포에 대한 짧은 정보들을 요약했습니다. 이미 프론트엔드 배포에 대해 알고 계시다면, 스킵하셔도 좋습니다😊

▷ 1. 프론트엔드 배포는 왜 필요할까?

필자는 처음 웹을 배울 때 💭 : 배포는 다 백엔드에서 하는거 아냐?라는 안일한 생각을 가졌던것 같습니다.
저와 비슷한 경험이 있으실 초포 개발자 분들을 위해 프론트엔드 배포에 대한 짧은 정의를 먼저 언급하자면, 아래와 같이 정리할 수 있습니다.

📌 프론트를 배포한다.
=== 사용자에게 보여지는 웹사이트에 사용자 인터페이스를 누구나 접근할수 있도록 인터넷에 공개한다.

즉, 프론트엔드를 배포하는 프론트엔드 서버는 웹 페이지를 렌더링하는 데에 필요한 HTML, CSS, JS 파일을 브라우저로 전송하는 역할을 하고,
백엔드 서버는 웹페이제 필요한 동적 데이터(API)를 생성하고 전송하는 역할을 하기 때문에
웹 사이트 배포를 위해서는 프론트엔드와 백엔드 두 방향에서 모두 배포가 필요합니다.

또한, 로컬 환경과 실제 배포 환경에서 발생하는 이슈가 다르기 때문에, 배포 환경에서의 트러블 슈팅 경험을 쌓기 위해서도 프론트엔드 배포 경험을 해보는 것이 중요하다 생각합니다.

▷ 2. 프론트엔드를 배포하는 방법에는 무엇이 있을까?

📌 (1) Netlify, Vercel, Cloudflare와 같은 서버리스 플랫폼 사용하기

• 🙆🏻‍♀️ 장점 :
  서버리스 플랫폼을 사용하면 자체 서버를 구성하지 않아도 플랫폼에서 제공해 주는 클라우드를 사용해 프론트엔드를 간편히 배포할수 있습니다.
  배포 자동화 기능(CI/CD) 또한 자동으로 제공해주며 빌드, 배포, 호스팅 서비스 등 다양한 서비스들을 쉽게 사용할 수 있다는 장점이 있습니다.
• 🙅🏻‍♀️ 단점 :
  * 메모리, 실행시간, 페이로드 제한이 있을 수 있으며 사용 플랜에 따라 비용이 부과될 수 있습니다.
  • 간편한만큼, 자유도가 낮습니다.

💭 Netlify vs. Vercel vs. Cloudflare
세 플랫폼 모두 사용 해 본 입장에서 개인적으로 느낀점들을 간략히 남겨보자면,

(1) netlify vs vercel :
두 플랫폼은 상당히 유사하나, 좀 더 큰 프로젝트는 vercel이 좋을것 같다고 느꼈습니다. vercel은 하루 빌드 최대 갯수를 제한하고, nelify는 한 달 빌드의 최대 시간을 제한하기 때문입니다. (개인적 의견) / 또한 vercel은 Next.js 개발 팀에서 만든 서비스이므로, Next.js의 배포인 경우 vercel을 더 추천드립니다.

(2) Cloudflare :
무료로 사용이 가능하다는 장점이 있어 추천 받아 사용하였는데, 관련 자료가 vercel, netlify보다 많지 않아 꽤 어려움을 겪었습니다. 다른 플랫폼보다 부가적인 기능이(상세한 analytic 등) 많다고 느껴져 추천하나, 초보자의 경우 다른 플랫폼을 먼저 경험한 후 겪어봐도 좋을것 같습니다.

📌 (2) S3 + Cloudfront 사용하기

• S3(Amazon Simple Storage Service) : 객체 스토리지 서비스로, 정적 웹사이트 호스팅을 지원합니다. 데이터를 버킷이라고 불리는 리소스에 객체로 저장합니다. / S3 웹사이트 엔드포인트는 HTTPS를 지원하지 않고, 성능과 보안 강화를 위해, 그리고 빠른 전송 속도를 위해 cdn인 Cloudfront와 함께 사용합니다.

• Amazon Cloudfront : 직접 만들 수 있는 CDN(Content Delivery Network) 서비스로, 세계 이곳저곳에 중계 서버를 놓아 웹 자원을 대신 전달하여 빠르게 데이터를 전송합니다.

• 🙆🏻‍♀️ 장점 :
  * 플랫폼을 사용할 때보다 자유도가 높습니다. (세부적으로 컨트롤 할 수 있는 부분이 많아집니다)

• 🙅🏻‍♀️ 단점 :
  * SSR 활용이 어렵습니다. (ex. Next.js S3+Cloudfront로 배포 -> SSG 결과물 배포)
  -> SSR은 내부적으로 인스턴스를 동적으로 만들기 때문에, 정적 웹사이트 호스팅인 S3+Cloudfront 사용을 할 수 없는것!
  

📌 (3) Amplify 사용하기

• Amplify :
  AWS에서 제공하는 서버리스 배포 서비스로, 보다 쉽게 인증, 스토리지, 배포 등을 설정할수 있습니다.
  내부적으로 S3, Cloudfront를 사용해 배포합니다.
• 🙆🏻‍♀️ 장점 :
  * 빌드, 배포 자동화 구축을 따로 할 필요 없이 프로젝트를 생성하면 완성됩니다.
  • SSR도 지원합니다. (업로드 후 빌드, 배포 과정을 거치기 때문에)
• 🙅🏻‍♀️ 단점 :
  * 프로젝트 비용 발생에 주의해야 합니다.
  • cloudfront를 내부적으로 이용하나, 관련 설정을 세부적으로 하기엔 어렵습니다.

---

2️⃣ 적용 | Vercel로 React 배포하기

▷ 1. Vercel을 선택한 이유

• 본래 moonshot 서비스는 cloudflare를 사용해 배포 했습니다. 그러나 앞서 언급했듯이 cloudflare를 사용해 react를 배포한 자료들이 비교적 많이 없었고, 그 결과 지속적인 서버와의 연결 불안정 이슈가 있었지만 이를 해결하지 못했습니다.
• 따라서 안정적인 서비스 배포 환경 유지를 위해 타 플랫폼으로 이관을 결정했습니다.
• 또한 배포 환경과 개발 환경을 분리하면서, 환경 분리가 더 용이하다며 가장 간편히 배포할 수 있다고 느낀, vercel로 재배포 하게 되었습니다.

▷ 2. Vercel로 React 프로젝트 배포하기

• 현재 필자의 프로젝트 환경은 다음과 같습니다 : React| Typescript | yarn | vite

⓵ step 1: 가입하고, 깃허브 연동해서 레포지토리 선택하기

• 좌측 상단에 계정 정보(ex. Yeonseo-Jo)를 누르면, 원하는 organization의 repository도 선택이 가능합니다.
• Import 버튼을 누르면, 다음 단계로 넘어갑니다

⓶ step 2: 배포할 project 설정하기

• Project Name : 배포 될 프로젝트의 이름을 지정하는 곳.
  -> 여기서 지정한 프로젝트 이름대로 사이트 url이 생성 됩니다. (ex. project name.vercel.app)
  -> vercel.app은 자동으로 붙는 url이며, 이외에 다른 도메인을 붙이고 싶으면 커스텀 도메인을 붙여야 합니다.
• Framework Preset : 프로젝트를 빌드, 배포 하는데 사용할 프레임워크 또는 런타임 환경(ex. CRA, vite, Vue, Next.js...).
  -> 자동으로 선택 된 환경에 최적화 되어 빠르게 배포할수 있는 설정을 적용 해줍니다.
  -> 해당 프로젝트가 있는 루트 디렉토리를 찾아 바꿔주면, 보통 자동으로 설정 됩니다.
• Roote Directory : 프로젝트의 루트 디렉토리(모든 파일들의 최상위 폴더).

• Build and Output Settings
  * Build Command : 프로젝트를 빌드하기 위해 실행 되는 커맨드

  • Output Directry : 빌드 결과물(빌드 된 파일들)이 생성되는 위치
  • Install Command : dependecy들을 설치하기 위해 실행 되는 커맨드
    -> 기본 설정은 npm command (npm run build, npm install)입니다. 그러나 yarn 패키지 매니저를 사용한 프로젝트에서도 기본 npm command를 사용해도 잘 배포 됩니다.

• Environment Variables
  * 빌드 및 배포 시에 필요한 환경 변수들(api base url, rest api key, redirect uri 등)

  • env 파일을 복붙 해와도 자동으로 완성시켜 줍니다.

⓷ step 3: 배포 끝!

• ✨ 이제 Deploy 버튼을 누르면, Vercel이 빌드와 배포를 자동으로 진행 합니다.
• ✨ 아래와 같은 축하 페이지가 나오고 링크창을 클릭하며 배포가 완료됩니다.
  

▷ 3. 추가 Vercel 이용 팁

(1) 빌드 로그, 에러 로그 확인 하는 법

• 해당 프로젝트의 Deployment > Devpolyment Details를 확인하면 빌드, 배포 로그를 확인할 수 있습니다.
• 에러 시 해당 로그에 나오는 에러 사항들(ex. 빌드 에러, 타입 에러 등)을 확인하고 수정 후에 재배포 하면 됩니다.
  
  
  

(2) 배포 브랜치 main이 아닌 다른 브랜치로 설정하는 법

• 초기 배포시에는 자동으로 배포 브랜치가 main으로 잡힙니다.
• main이 아닌 다른 분기 브랜치에서 배포 되기 원하면, Settings > Git > Production Branch를 main이 아닌 다른 브랜치 명으로 변경 해주면 됩니다!
  
  
  

(3) 배포 사이트 이름(도메인) 바꾸기

• settings > General > Project Name을 바꿔주면 반영 됩니다.
  
  
  

(4) 재배포 시점, 방법

• vercel은 배포 브랜치에 push(or merge)가 이루어질 때 재배포 됩니다. 따라서 env 등을 바꿔도 재배포가 되지 않으면 배포 된 사이트에 적용이 되지 않음을 주의 해야 합니다.
• 만약 강제 재배포를 하고 싶을 때는 Deployment > Visit 옆 점 3개 > Redeploy로 가능합니다.
  
  
  

(5) 🔥 url 접근 시 404 NOT FOUND 문제 해결하기

• SPA 프로젝트를 배포한 뒤 동적으로 라우팅 접근시, (즉 라우트 이동 후 중간에 새로고침하거나, 하위 url(ex. moonshot/dashboard)로 접근했을 경우 vercel에서는 다음과 같은 404 Not_Found 에러를 뱉습니다.
  

• SPA의 라우팅 처리가 아닌 방식으로 해당 리소스를 찾으려고 하기 때문에 404 에러가 발생하게 됩니다.

• 이는 vercel 문서의 rewrites 부분을 참고하여 해결할수 있습니다.

  • (1) 최상위 디렉토리 아래에 vercel.json이라는 배포 설정 파일을 만듭니다.
  • (2) 다음과 같은 라우팅 rewrites 설정을 명시해줍니다.

      {
      "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
      }	

---

해당 글에서는 가장 쉽게 프론트엔드 프로젝트를 배포할 수 있는, Vercel 플랫폼을 활용 해 React-Vite 환경을 배포하는 기본 과정에 대해 다뤘습니다.
Vercel은 이 외에도 커스텀 도메인 설정, preview-production 환경 분리 등 다양하게 활용할 수 있는 기능들이 다수 있습니다.

이어지는 글에서 Vercel을 보다 유연하게 다룰 수 있는 방안들에 대해 다뤄보겠습니다.