vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기

vercel

vercel은 AWS처럼 클라우드 시스템 위에서 Next.js(SSR, SSG 모두 가능) 혹은 React 프로젝트를 무료로 호스팅할 수 있게 도와주는 서비스 입니다. 그리고, Next.js도 같이 개발을 하고 있어서 어떤 클라우드 서비스보다 원활한 Next.js 호스팅이 가능합니다.

 

직접 사용해본 결과 AWS Amplify와 비교했을때, 훨씬 지원되는 기능도 많고 안정적입니다. Next.js 프로젝트를 한다면 vercel을 사용하는게 좋을거 같습니다.

 

Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel

 

Next.js 프로젝트 생성 및 git 업로드

우선 호스팅을 위한 Next.js 프로젝트를 생성합니다. 자세한 프로젝트 생성은 아래 글을 참고해주세요.

[Next.js] 14 버전 설치 및 프로젝트 생성하기

 

프로젝트 생성이 끝났으면, git과 연동하여 배포를 하기 위해 자신의 git에 저장소를 만들고 소스를 업로드합니다. (필수적으로 필요한 부분이므로 진행하고 다음 단계로 넘어가주세요)

 

vercel 호스팅

vercel 사이트를 들어가고, 회원가입을 합니다. 그리고, 아래 화면에서 Import Project를 클릭합니다.

첫 무료 프로젝트 생성

 

처음에는 연결해둔 git repository가 없기 때문에 아무것도 안나올텐데 아래 Adjust GitHub App Permissions → 를 눌러서 git repository와 연결을 합니다.

Adjust GitHub App Permissions 클릭하여 git repo 연결

 

아래 스크린샷 참고하여 git repo 연결하는 작업을 진행해줍니다.

 

연결할 프로젝트를 입력하고 추가한 뒤 Save 버튼을 클릭

git repo 선택 후 저장

 

다시 확인해보면 추가한 repository가 추가된 것을 확인 할 수 있고, import를 눌러서 설정을 마무리합니다.

git repo 연결 완료

 

원하는 대로 빌드 스크립트나 환경변수를 설정할 수 있으나, 지금은 호스팅이 되는 방법만 확인할 예정이므로 따로 설정은 안하고 넘어가겠습니다.

 

Deploy를 누르면 빌드 및 배포가 시작됩니다.

빌드 및 배포 시작

 

배포가 완료되면 배포 화면을 왼쪽에 보여줍니다. 상단에 Continue to Dashboard를 클릭하면 프로젝트의 상세 정보를 볼 수 있습니다.

 

Domains에 있는 주소를 클릭하면 호스팅 된 서비스를 띄어줍니다.

 

기본적으로는 도메인을(vercel.app) 바꿀 수 없습니다. 직접 도메인을 구입하여 따로 설정을 해주셔야 합니다. 그래서 일단 개발하고 서비스하기 전에 도메인 구입하여 설정하면 됩니다.