[오픈 미션] 10. 프론트엔드 vercel로 배포하기

[이전 포스트]

[오픈 미션] 9. 리팩토링2 - 악의적으로 반복해서 보내는 요청을 방어하기

 

✅ 전체 아키텍처

---

전체 시스템 아키텍처는 다음과 같다.

여기서 프론트엔드를 Vercel로 배포해보도록 하자.

 

 

✅ Vercel이란?

---

Vercel은 프론트엔드 배포 및 서버리스 기능을 제공하는 플랫폼으로, Next.js 공식 지원 및 빠른 CI/CD 기능이 특징이다.

무료 플랜으로 소규모 프로젝트 배포 가능해 현재 상황에서 아주 적합하다고 판단했다.

 

✅ 배포하기

---

Vercel: Build and deploy the best web experiences with the AI Cloud – Vercel

 

해당 링크로 들어가서 로그인을 하면 다음과 같은 화면이 나오게 된다.

 

 

1️⃣ 배포할 Git 리포지토리 선택

 

2️⃣ 프로젝트 셋팅

Vite를 통해 리액트를 구현했기 때문에 ‘Framework Preset’을 ‘Vite’로 설정하였다.

 

Build and and Output Settings은 Vite의 기본설정대로 하였다.

 

마지막으로 환경변수(서버 URL) 추가까지 한 뒤 Deploy 버튼을 누르면 된다.

 

이러면 배포가 끝난다.

 

✅ CI/CD

---

Vercel은 별다른 코드를 작성하지 않고도 기본적으로 CI/CD 기능을 제공한다.

간단한 테스트를 위해 해당 부분의 느낌표를 지워보겠다.

 

대략 30초정도만 기다리면 다음과 같이 업데이트 사항이 빠르게 변경되는 것을 볼 수 있다.

 

참고자료

Vercel 로 간단하게 React 웹 사이트 무료 배포하기