행복을 담는 블로그

[TIL] 240207(수) React 서버에 배포하기 / Vercel에 배포하기 본문

TIL

[TIL] 240207(수) React 서버에 배포하기 / Vercel에 배포하기

hyun0zin 2024. 2. 8. 00:20

완성된 프로젝트를 서버에 배포하는 방법에 대해서 알아보고자 한다.

로컬에서 배포 서버를 미리 확인하기.

실제 서버를 배포하기 전에 개발 서버를 통해 미리 확인을 해 보자.

🚨 개발 서버 v.s. 배포 서버
  • 개발 서버 : 실제 서버를 배포하기 전에 로컬에 바로 띄워서 확인하는 서버를 말한다. 최적화 전이라 속도가 느리다.
  • 배포 서버 : 배포 후 사용자가 볼 수 있는 실제 서버를 말한다. 빌드 과정을 통해 최적화 되었으므로 속도가 빠르다.

 

1. 빌드하기

  • 소스 코드 변환 : JSX, ES6+ 문법 등을 브라우저가 이해할 수 있는 javascript 코드로 변환한다.
  • 모듈 번들링 : 여러개의 파일과 모듈을 하나 또는 여러 개의 파일로 합친다.
  • 압축 및 최적화 : 코드 압축 및 최적화
npm run build 
또는 
yarn build

▶️ 실제 서버에 올라가도 문제가 생기지 않는지 코드에서 확인할 수 있다.

 

2. 로컬에서 배포 서버로 확인하기

🚨 배포 서버를 열기 전에는 꼭 빌드를 먼저 해야 한다.

 

CRA(create-react-app) 이용 시,

빌드 서버를 여는 방법이 따로 내장되어 있지 않다.

1) npm install serve 또는 yarn add serve 로 serve 패키지 설치하기
2) package.json에 명령어 추가

scripts에 추가
"serve" : "serve -s build"

3) npm run serve 또는 yarn serve 명령어 실행

 

Vite-react 이용 시,

Vite은 최신 기술로 빌드 서버를 여는 기능이 내장 되어 있다.
npm run preview 또는 yarn preview 명령어 실행

 

3. Vercel에 배포하기

1) Add New로 배포 시작하기

 

2) Github 연동하기 -> Repositories 연결하기

▶️ Github 계정과 연동하기

▶️ 모든 repositories에 접근할지, 선택한 repositoires에만 접근할지 선택한다.

 

3) 배포하는 프로젝트를 선택하여 import 한다.

 

4) 해당 프로젝트가 잘 import 되었으면 Deploy 한다.

 

5) Continue to Dashboard 클릭하면, 

 

6) 배포 서버 domain이 뜨면, 해당 링크로 접속하면 배포가 완료된다!

 

Vercel의 장점

1) 쉽고 빠른 배포가 가능하다.

Github, GitLab, Bitbucket과 같은 Git 저장소에 연결만 하면 자동으로 배포가 가능하다.

 

2) 자동 CI/ CD

📌 CI / CD 란?
- CI : Continuous Integration (지속적 통합)
- CD : Continuous Delivery (지속적 연동)

▶️ 즉, 깃허브 레포지토리의 내용과 실제 배포 서버 간의 지속적인 통합과 연결을 의미한다. 

Git과 통합되어 있어 commit 마다 새로운 버전의 preview를 생성한다!

또한, pull request 나 branch에 대한 실시간 preview를 제공하여, 실제 배포 전에 변경 사항을 확인 할 수 있다!

 

3) 성능 최적화

이미지와 같은 정적 자산에 대한 자동으로 최적화를 수행하며, 페이지를 로딩하는 시간을 단축한다.

** 글로벌 CDN : vercel은 전 세계에 분산된 서버를 통해 콘텐츠를 제공한다.
ex) 구글은 전세계에 글로번 CDN을 가지고 있어, 서버 로딩 시간을 단축한다.

 

4) 보안과 안정성

모든 배포에 기본적으로 https가 적용되어, 데이터 전송 시 보안을 강화할 수 있다.