버셀 서비스에 내가 만든 쇼핑몰 사이트 배포하기

버셀은 여러분의 웹사이트를 누구나 접속할 수 있도록 도와주는 서비스입니다. 쉽게 말해 언제 어디서든 접속 가능한 컴퓨터(서버)를 빌려주는 플랫폼이라고 생각하면 이해하기 쉬울 겁니다. 버셀에 여러분의 웹사이트를 배포하려면 몇 가지 단계를 거쳐야 하는데 아무 처음 시도하면 다소 생소하고 복잡하게 느껴질 수 있습니다. 다행히 우리에게 커서라는 도우미가 있으니 도움을 받아 배포를 해보겠습니다.

 

01 먼저 커서에서 만든 웹사이트 프로젝트를 열고, 현재 프로젝트 상태를 파악하라고 요청합니다.

현재 프로젝트 상태를 파악해봐.

 

커서가 프로젝트를 열고 상태를 분석하여 알려줍니다. 단순히 배포하는 방법을 알려 달라고 하기 보다는 이렇게 먼저 프로젝트 구조를 한 번 인식시킨 후에 프로젝트 관련 요청을 하면 더 잘 파악하여 수행해줍니다.

 

02 이제 커서에게 배포하는 방법을 물어보겠습니다. 이때 무료로 배포하는 방법을 물어보면 비용 면에서 효율적인 방법을 알려줍니다.

이 프로젝트를 무료로 배포하는 방법이 있어?

 

03 그러면 대부분의 경우 가장 먼저 버셀을 추천할 것입니다. 이 방법으로 여러분의 프로젝트를 배포하는 방법을 물어보겠습니다.

Vercel로 배포하려면 어떻게 해야 해? 나는 완전 초보라서 차근차근 알려줘.

 

그러면 커서는 가장 먼저 깃허브 계정을 준비하라고 할 것입니다. 그리고 프로젝트를 깃허브에 업로드하기 위해 git init이라는 명령어를 실행해야 한다고 알려줄 것입니다. [Run]을 눌러 git init을 허용합니다.

 

04 git init 명령어는 여러분의 프로젝트를 깃허브에 올리기 위한 가초 단계를 준비하는 과정입니다. 이미 프로잭트가 초기화되어 있다면 커서는 바로 깃허브에 업로드를 하러고 한 후 안내를 해줄 겁니다.

 

안내에 따라 깃허브 저장소로 만듭니다. 저장소 이름을 입력한 후 Create repository를 누르면 저장소가 생성됩니다.

 

05 저장소 생성을 마치면 커서로 돌아와 깃허브 저장소의 주소를 알려줘야 합니다. 마치 구글 드라이브에 파일을 업로드할 때 폴더 링크가 필요한 것처럼, 여러분이 만든 프로젝트를 깃허브 저장소에 업로드하려면 깃허브 저장소의 링크를 알려줘야 합니다. 커서에게 링크를 알려주면서 다음과 같이 요청합니다.

내 깃허브 주소는@https://github.com/Jangchaeyun/myawesomeshoppingmall.git 이거야. 여기에 업로드하기 위한 작업을 알려줘.

 

커서는 깃허브 주소를 전달받은 후 코드를 업로드하기 위한 작업들을 하나하나 수행합니다. 최종 단계에서 깃허브에 코드를 업로드하거나 push를 한다는 이야기가 있다면 깃허브에 성공적으로 업로드된 것입니다.

 

06 버셀 홈페이지에 접속하여 깃허브 계정으로 로그인하면 다음과 같은 화면을 볼 수 있습니다. 화면의 오른쪽 위의 [Add New... -> Project]를 누릅니다.

버셀 홈페이지: vercel.com

 

07 그러면 Let's build something new.라는 화면이 보입니다. 여기서 왼쪽에 있는 'Import Git Repository' 항목에서 [Continue with GitHub]를 눌러 깃허브 계정에 접속합니다.

 

08 이제 조금 전 커서가 업로드한 깃허브 저장소가 보일 겁니다. 이 저장소 옆에 있는 [Import]를 누르면 New Project 화면이 나타나며, 여기서 [Deploy]늘 누르면  실제 배포가 시작됩니다.

 

09 잠시 기다리면 배포가 완료되고, 완성된 웹사이트의 미리보기 화면과 함께 [Continue to Dashboard] 버튼이 보입니다. 이 버튼을 눌러 프로젝트 대시보드로 이동합니다.

 

10 대시보드 화면에 'Domains'라는 항목이 있습니다. 여기에는 여러분이 배포한 쇼핑몰 사이트의 주소가 보입니다. 웹 브라우저에 도메인 주소를 입력하면 버셀이 제공한 컴퓨터(서버)에서 실행 중인 웹사이트에 접근할 수 있습니다.