NextJs 로 개발한 프로젝트를 Vercel 배포하는 방법

Iaas, Faas 란

내가 개발한 프로젝트를 서버에 올려서 웹으로 표현하고자 할때 우선 어떻게 구현이 되는지 살펴보자

클라우드 서비스가 발달하기 이전에는 직접 서버컴퓨터를 구성하고, 서버를 실행시켜서 웹사이트를 배포했다. 이는 하드웨워나 운영체제 등 모든 부분을 직접 관리해야했기 때문에 배포를 위한 비용과 시간이 많이 소요되었다.

클라우드 서비스가 발달한 이후로는 서버를 실행시키는 인프라스트럭처를 클라우드 서비스로 제공하게 되었다. 웹사이트 배포에 필요한 네트워크, 서버, 데이터 스토리지 등의 IT 인프라를 가상화하여 사용자에게 제공한다. 사용자는 필요한 만큼 인프라를 선택할수 있고, 사용한 만큼만의 비용을 지불할수 있으며, 대표적인 예로는 AWS의 EC2, Google Cloud의 Compute Engine 등이 있다.

더 나아가 서버리스라는 개념이 등장하였고, 함수로 서비스를 제공하는 FaaS(Function as a Service)라고 한다. 사용자는 애플리케이션의 개별 함수를 클라우드에 배포하고, 이 함수는 특정 이벤트에 의해 실행이 된다. 이 내용을 좀더 자세히 설명해보면, NextJs의 프로젝트가 어떻게 FaaS로 웹 페이지로 보여지는지 살펴보았다.

FaaS는 이벤트 기반으로 함수를 실행시킨다. 웹 요청이라는 이벤트가 발생하면, 미리 정의해둔 함수가 실행되어 웹 서버처럼 동작하게 된다. 이렇게 해서 Next.js 애플리케이션의 페이지를 렌더링하고, 결과를 사용자에게 반환하는 방식으로 구현이 된다.

FaaS의 장점으로는 서버, 운영체제, 런타임 등의 인프라를 직접 관리하지 않아도 되며, 함수가 실행되는 시간만큼만 비용을 지불하기 때문에 사용자 수가 많아지면 자동으로 함수를 더 많이 실행시켜 처리능력을 늘리고, 사용자 수가 줄면 함수 실행을 줄여 비용을 절약하게 되어 트래픽이 변동하는 웹 어플리케이션에 적합하다. FaaS의 대표적인 예로는 AWS Lambda, Google Cloud Functions 등이 있다.

Vercel 이란

Vercel은 AWS Lambda 기반으로 하는 FaaS 플랫폼이다.

이제 Vercel에 배포 하는 방법을 알아보자.

1. 먼저 Vercel에 로그인하고, Project를 생성한다.

   

2. 그리고 난후에 나의 깃허브와 연결을 시켜준다.

   

3. 깃허브를 연결하고, 나의 저장소에 접근을 허용시켜주는데 난 내가 선택한 저장소만 연결되도록 설정했다.

   

4. 연결이 완료되면 나의 저장소를 import 시켜주자

   

5. import를 진행하면서 프로젝트 프레임워크를 nextJs로 선택하고, 빌드 커맨드를 vercel-deploy 로 지정해준다.(빌드 명령어는 자유롭게 입력해도 상관없다.) 빌드 커맨드는 반드시 NextJs 프로젝트의 package.json에 추가 시켜야 한다.

   

6. 그리고 빌드가 성공적으로 완료되면 아래와 같이 화면과 나의 웹페이지가 보여진다.

   

7. 완료된 나의 프로젝트 대시보드