Vercel이란?

Vercel은 ZEIT가 제공하는 호스팅 서비스입니다.

기능으로는 Global CDN과 Serverless Functions가 있으며, Google Cloud나 GitHub와의 Integration 기능이 있거나 다양한 것이 있습니다.

또한 설치가 매우 쉽고 Next.js를 사용하면 SPA, SSR, SSG, ISR 프런트 엔드를 쉽게 만들 수 있습니다.

Netlify와 마찬가지로 빌드와 호스팅 등을 함께 제공합니다.

무료 플랜 그대로도 100회/일까지 배포할 수 있다.

즉시 배포해 봅시다.

사전 준비

GitHub에서 미리 Next.js로 만든 앱을 푸시합니다.
이번에는 pages/index를 아래와 같이 해 hello world를 표시하고 싶습니다.

pages/index.js

export default function Index({current}) {
  return (
    <div>
       Hello World
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
  };
}

Vercel 설정

1. 오른쪽 상단의 로그인 버튼을 클릭합니다.


2. 이번에는 GitHub과의 integration을 실시하고 배포하려고 하므로 GitHub 계정으로 로그인합니다.


3. 로그인하면 아래와 같은 화면이 된다고 생각하므로 New project에서 프로젝트를 작성한다.


4. import Git Repository에서 [Add GitHub org or Account 선택]


5. Github측의 설정 화면으로 이동하므로 [only select repositories]에서 배포하고 싶은 코드의 리포지토리를 선택한다.


6.5의 설정이 끝나면, 아래와 같이 import하는 리포지토리의 정보를 취할 수 있게 되므로 import 해 본다.


7.Scope의 설정이 요구되므로, 이번은, personal account아래를 선택합니다.


8. 아래의 화면에서 Build 설정이나 환경 변수 설정 등을 할 수 있습니다. 이번에는 특별히 설정 사항이 없기 때문에, 그대로 Deploy 해 나가려고 생각합니다.


9.Deploy를 누르면 아래와 같이 Build가 시작됩니다.


10.Build가 성공하면 아래와 같이 [STATE]가 Ready가 되므로, 이렇게 되면 Deploy가 무사히 완료됩니다.
오른쪽 상단에 있는 [Vist]를 눌러 배포한 앱에 연결할 수 있습니다.

동작 확인

기대하고 있던, Hello World가 확인할 수 있었습니다!
배포 완료입니다!

요약

Vercel에 Next.js의 앱을 배포해 보았습니다. 어떻습니까?
너무 간단하고 콧물이 나온 곳에서 끝내고 싶습니다!
고마워요! 🙇‍♂️

참고

Netlify 살인자 Vercel에서 웹사이트를 호스팅하면 너무 쉬워서 미소가 되었다