Nodejs 서버리스 Vercel 배포 사용 방법

Nodejs 서버리스 Vercel 배포 사용 방법

별도의 서버 설정 없이 프론트엔드와 백엔드를 자동 배포해 주는 것이 서버리스입니다.
코드만 올리면 클라우드 제공업체가 알아서 실행과 배포를 처리해 주는 방식입니다.
그중 하나가 Next.js를 오픈 소스로 개발한 Vercel입니다.
Git 서버와 연동하여 서버에 파일을 업데이트하면 자동으로 Vercel에서 배포가 시작됩니다.
간단한 프론트엔드 작업이라면 Vercel이 최고의 선택이 됩니다.

 

---

Vercel

Vercel는 서버리스 방식 클라우드 컴퓨팅 서비스를 제공합니다.

 

Vercel
압도적인 편리	Git 저장소만 연결하면 빌드, 배포, SSL 등의 설정이 자동으로 완료됩니다.
강력한 엣지 네트워크	전 세계적으로 분산된 서버를 통해 빠른 사이트 로딩 속도를 제공합니다.
Next.js 최적화	SSR, ISR, 이미지 최적화, 미들웨어 등 최신 기능을 완벽하게 지원합니다.
개인 무료 플랜	무료 플랜으로 거의 모든 핵심 기능을 이용할 수 있습니다. 학습이나 소규모 프로젝트에 매우 유리합니다.
높은 상업 비용	무료 사용량을 초과하거나 상업 사이트로 전환 시 비용이 크게 증가합니다.
서버리스 콜드 스타트	오랫동안 요청이 없던 페이지는 처음 접속 시 딜레이가 발생할 수 있습니다.
벤더 종속성	Vercel 전용 기능을 많이 사용할 경우 다른 플랫폼으로 이전하기가 힘듭니다.
백엔드 제약	장시간 실행되는 작업이나 특수한 서버 설정이 필요한 경우에는 부적합할 수 있습니다.

 

 

Vercel

 

---

사용

파일을 GitHub에 올리고 Vercel에 연동한 후 도메인에 연결합니다.

이 후로는 GitHub에 파일이 업데이트될 때마다 자동으로 배포가 됩니다.

1. GitHub에 신규 저장소를 만듭니다.
https://github.com/new

GitHub · Change is constant. GitHub keeps you ahead.

GitHub New repository

GitHub New repository

 

2. 만든 파일을 GitHub에 올립니다.

GitHub New repository Add Files

GitHub New repository Add Files

 

 

3. Vercel에 접속하여 로그인합니다.

회원이 아니면 가입을 합니다. 전화번호 인증을 합니다.

무료 플랜으로 선택합니다.

반응형

https://vercel.com

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

 

 

Vercel Verification

Vercel Verification

Vercel Plan

Vercel Home

 

 

4. Vercel에서 GitHub 계정으로 로그인합니다.

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

 

5. 신규로 만든 저장소를 import 합니다.

Vercel Import Git Repository GitHub Account

 

6. Deploy 버튼을 클릭합니다.

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

 

7. 페이지를 확인합니다.

Vercel Import Git Repository GitHub Account

Vercel Import Git Repository GitHub Account

 

 

8. 도메인에 연결합니다.
Vercel 프로젝트 대시보드에서 [Settings] -> [Domains]로 이동합니다.
도메인을 입력하고 Add를 누릅니다.

Vercel Import Git Repository GitHub Account Domain

Vercel Import Git Repository GitHub Account Domain

Vercel Import Git Repository GitHub Account Domain

 

 

9. Vercel이 알려주는 값을 본인의 도메인 구입처( 가비아, 후이즈 등 )에서 DNS 설정에 입력합니다.

Vercel Import Git Repository GitHub Account Domain

Vercel Import Git Repository GitHub Account Domain

Vercel Import Git Repository GitHub Account Domain

 

 

10. 연결된 도메인을 확인합니다.

Vercel Import Git Repository GitHub Account Domain

 

 

---

ads.txt

구글 에드센스의 연결된 사이트인 경우 루트에 ads.txt 파일이 있어야 합니다.
Vercel에 배포된 사이트에 ads.txt를 적용하려면 루트 폴더가 아닌 public 폴더 내부에 ads.txt 파일을 생성해야 합니다. 
Vercel은 빌드 시 public 폴더의 파일들을 루트(/) 경로로 그대로 복사합니다.

---

요약

1. Git 저장소 업로드 > Vercel 연동 후 배포
2. 루트 폴더 = pullic
3. https://vercel.com