[클래스 02] 내가 만든 사이트를 서비스하는 방법 : 서버, 배포
지금까지 만든 웹사이트는 개인 컴퓨터에서만 확인할 수 있는 상태입니다. 즉 만든 자신만 볼 수 있는 거죠. 하지만 웹사이트는 다른 사람도 볼 수 있어야 그 의미가 있겠죠? 보통 웹사이트를 외부에 공개하는 과정을 ‘서비스한다’ 또는 ‘배포한다’고 표현합니다.
▶ 보통 영어로는 deploy라고 합니다.
지금까지 여러분이 실행한 npm run dev와 같은 명령어 또는 채팅방에 ‘OOO 프로젝트를 실행해줘’라고 부탁한 작업은 모두 여러분의 컴퓨터를 서버로 삼아 프로젝트를 구동한 것이었습니다. 이제 한 걸음 더 나아가 배포란 무엇인지 알아보고, 내가 만든 웹사이트를 실제 주소로 접속할 수 있도록 만드는 배포 과정을 알아보겠습니다.
24시간 사용자 요청을 기다리는 컴퓨터, 서버
여기서 우리가 알 수 있는 사실은 ‘서버’가 대단하고 특별한 것이 아니라 그냥 컴퓨터라는 겁니다. 다만 일반 컴퓨터와 다른 점이라면 서버는 24시간 켜져 있으며, 대기하면서 사용자의 요청을 기다리고, 요청이 들어오면 그에 맞는 정보를 서브serve하는 역할을 합니다. 즉 서버란 사용자의 요청에 응답하기 위해 항상 대기 중인 컴퓨터라고 이해하면 됩니다.
그림을 보면 여러분이 만든 v0 서비스의 쇼핑몰 앱이 컴퓨터(서버)에서 http://localhost:3000이라는 주소로 요청을 기다리고 있습니다. 웹 브라우저에 이 주소를 입력하면 서버가 입력한 요청에 따라 알맞은 화면을 사용자에게 보여주는 것이죠. 그렇다면 localhost:3000라는 이 주소는 뭘까요? 평소에 우리가 사이트에 접속할 때 입력하는 naver.com이나 google.com과는 주소의 모습이 다른데, 어떤 것인지 살펴봅시다.
localhost가 무엇이길래
사실 localhost는 내 컴퓨터 자체를 의미하는 주소입니다. 일상생활에 비유하면 내 컴퓨터는 내가 살고 있는 아파트 정도가 되겠네요. 그래서 주소 입력창에 localhost만을 입력하면 ‘내 컴퓨터의…’라고 말하는 것과 같은 느낌입니다. 굳이 비유를 하자면 ‘너희 집 주소 어디니?’라는 질문에, ‘서울 아파트…’와 같이 대답하는 것과 같죠.
포트 번호가 무엇이길래
‘서울 아파트’라는 주소만으로는 정확하지 않겠죠? 주소를 완전하게 만드는 것이 무엇일까요? 정확한 위치를 알려면 동호수 같은 상세 주소가 필요합니다. 보통 아파트 주소를 물어보면 ‘서울 아파트 101동 101호’라고 답하죠. 그래야 완전한 주소가 되니까요. 바로 이 상세 주소 역할을 하는 것이 포트 번호입니다. 예를 들어 localhost:3000은 '내 컴퓨터의 포트 번호 3000에 구동한 웹 서버'를 뜻합니다.
내 컴퓨터에 구동한 웹 서버가 여러 개라면?
조금 더 알아봅시다. 포트 번호가 다르면 하나의 컴퓨터에서도 여러 웹 서버를 동시에 실행할 수 있습니다. 마치 아파트에 여러 집이 사는 것처럼요. 다음은 실제 컴퓨터에서 웹 서버 2개를 구동한 상태로 그림을 통해 좀 더 쉽게 접근해보겠습니다.
두 웹 서버의 주소 앞쪽은 모두 localhost로 같지만 포트 번호가 3000, 3001로 서로 다릅니다. 그래서 웹 브라우저에 localhost:3000을 입력하면 쇼핑몰 사이트를 볼 수 있고, localhost:3001을 입력하면 메모 앱 사이트를 볼 수 있죠. 이처럼 포트 번호를 달리하면, 한 컴퓨터 안에서 서로 다른 웹사이트를 동시에 운영할 수 있습니다. 포트 번호는 이렇게 서버 하나에서 여러 서비스를 구분하고 운영하기 위해 만들어진 개념입니다.
친구가 내가 만든 웹 서비스를 보려면?
여기서 중요한 점은 localhost는 나의 컴퓨터를 가리키는 주소라는 것입니다. 따라서 친구가 자신의 컴퓨터에 localhost:3000을 입력하면, 자신의 컴퓨터의 3000번 포트를 보게 되는 거죠. 즉 친구는 여러분의 웹사이트가 아닌, 자신의 컴퓨터에 실행 중인 웹 서버를 찾게 되는 것이죠. 그래서 여러분이 만든 웹 서비스를 친구는 볼 수 없습니다. 이때 필요한 것이 바로 배포입니다.
모두가 접속할 수 있는 컴퓨터에 웹 서버를 구동하기
친구, 지인 등 다른 사람도 여러분이 만든 웹사이트에 접속하게 하려면 누구나 접근할 수 있는 컴퓨터에 웹 서버를 실행해야 합니다. 이것을 배포라고 합니다. 모두가 접속할 수 있는 컴퓨터의 주소와 그 컴퓨터에서 구동하고 있는 웹 서버의 포트 번호를 알고 있다면 누구든 웹 브라우저를 통해 여러분의 웹사이트에 접속할 수 있습니다.
배포라는 개념을 설명하기 위해 조금 돌아왔지만, 이제 왜 배포가 필요한지 확실히 이해되었을 것입니다. 배포의 개념 설명과는 별도로 요즘은 배포 과정이 매우 간단합니다. 이제 개념 공부는 이쯤에서 마무리하고 [바이브 코딩 09] v0 서비스로 더 쉽게 웹사이트 만들기에서 만든 사이트를 아주 쉽게 배포해보는 실습으로 넘어가 봅시다.
[바이브 코딩 10] 버셀 서비스에 내가 만든 쇼핑몰 사이트 배포해보기
버셀vercel은 여러분의 웹사이트를 누구나 접속할 수 있도록 인터넷상에 배포할 수 있게 도와주는 서비스입니다. 쉽게 말해 언제 어디서든 접속 가능한 컴퓨터(서버)를 빌려주는 플랫폼이라고 생각하면 이해하기 쉬울 겁니다. 버셀에 여러분의 웹사이트를 배포하려면 몇 가지 단계를 거쳐야 하는데 아마 처음 시도해보면 다소 생소하고 복잡하게 느껴질 수 있습니다. 다행히 우리에게는 커서라는 도우미가 있으니 도움을 받아 배포를 해보겠습니다.
01 먼저 커서에서 [바이브 코딩 09] v0 서비스로 더 쉽게 웹사이트 만들기에서 만든 쇼핑몰 웹사이트 프로젝트를 열고, 현재 프로젝트 상태를 파악하라고 요청하세요.
커서가 프로젝트를 열고 상태를 분석하여 알려줍니다. 단순히 배포하는 방법을 알려 달라고 하기보다는 이렇게 먼저 프로젝트 구조를 한 번 인식시킨 후에 프로젝트 관련 요청을 하면 더 잘 파악하여 수행해줍니다.
02 이제 커서에게 배포하는 방법을 물어보겠습니다. 이때 무료로 배포하는 방법을 물어보면 비용 면에서 효율적인 방법을 알려줍니다.
03 그러면 대부분의 경우 가장 먼저 버셀을 추천할 것입니다. 이 방법으로 여러분의 프로젝트를 배포하는 방법을 물어보겠습니다.
그러면 커서는 가장 먼저 깃허브 계정을 준비하라고 할 것입니다. 그리고 프로젝트를 깃허브에 업로드하기 위해 git init이라는 명령어를 실행해야 한다고 알려줄 것입니다. 깃허브에 아직 가입하지 않았다면 회원가입을 마친 후 여기로 돌아오세요. 그런 다음 [Run]을 눌러서 git init을 허용하세요.
04 git init 명령어는 여러분의 프로젝트를 깃허브에 올리기 위한 기초 단계를 준비하는 과정입니다. 이미 프로젝트가 초기화되어 있다면 커서는 바로 깃허브에 업로드를 하라고 한 후 다음 안내를 해줄 겁니다.
안내에 따라 깃허브 저장소를 만들어봅시다. 다음 화면을 보고 깃허브에 로그인한 뒤 오른쪽 위의 [New]를 눌러 새 저장소를 생성하세요. 저장소 이름을 입력한 후 아래의 [Create repository]를 누르면 저장소가 생성됩니다.
05 저장소 생성을 마치면 커서로 돌아와 깃허브 저장소의 주소를 알려줘야 합니다. 마치 구글 드라이브에 파일을 업로드할 때 폴더 링크가 필요한 것처럼, 여러분이 만든 프로젝트를 깃허브 저장소에 업로드하려면 깃허브 저장소의 링크를 커서에게 알려줘야 합니다. 커서에게 링크를 알려주면서 다음과 같이 요청합니다.
커서는 깃허브 주소를 전달받은 후 코드를 업로드하기 위한 작업들을 하나하나 수행합니다. 예를 들어, 최종 단계에서 깃허브에 코드를 업로드한다던가 push를 한다는 이야기가 있으면 깃허브에 성공적으로 업로드된 것입니다.
06 계속해서 버셀 배포까지 진행해봅시다. 앞서 커서에게 먼저 버셀에서 배포하기 위한 고민을 이야기했으므로 자동으로 명령어를 통해 버셀에 배포하려고 시도할 수도 있습니다. 하지만 그러한 방법보다 처음 배포할 때는 버셀 사이트에 접속해서 직접 진행하는 것이 더 쉽습니다. 버셀 홈페이지에 접속하여 깃허브 계정으로 로그인하면 다음과 같은 화면을 볼 수 있습니다. 이미 이전에 배포한 프로젝트가 있다면 목록에 표시될 수 있지만 여러분은 거의 처음이라 아무것도 없을 것입니다. 이 화면의 오른쪽 위의 [Add New… ➝ Project]를 누르세요.
버셀 홈페이지 : vercel.com
07 그러면 Let’s build… 화면이 보입니다. 여기서 왼쪽에 있는 ‘Import Git Repsitory’ 항목에서 [Continue with GitHub]를 눌러 깃허브 계정에 접속합니다.
08 이제 조금 전 커서가 업로드한 깃허브 저장소가 보일 겁니다. 이 저장소 옆에 있는 [Import]를 누르면 New Project 화면이 나타나며 여기서 [Deploy]를 누르면 실제 배포가 시작됩니다.
09 잠시 기다리면 배포가 완료되고, 완성된 웹사이트의 미리보기 화면과 함께 [Continue to Dashboard] 버튼이 보입니다. 이 버튼을 눌러 프로젝트 대시보드로 이동합니다.
10 대시보드 화면에 ‘Domains’라는 항목이 있습니다. 여기에는 여러분이 배포한 쇼핑몰 사이트의 주소가 보입니다. 이 주소는 영문으로 구성되어 있는데, 이처럼 영어로 표현된 인터넷 주소를 도메인이라고 합니다. 웹 브라우저에 도메인 주소를 입력하면 버셀이 제공한 컴퓨터(서버)에서 실행 중인 웹사이트에 접근할 수 있는 것이죠!
이제 친구에게 이 사이트 주소를 알려주면서 접속해보라고 하세요. 어떤가요? ‘구슬이 서 말이라도 꿰어야 보배’라고 커서로 쉽고 멋지게 웹사이트를 만들었지만, 배포하지 않으면 혼자만 보는 결과물에 그칩니다. 예전에는 배포가 꽤 어렵고 복잡했지만 이제는 버셀 같은 다양한 서비스의 발달로 누구나 쉽게 배포할 수 있게 되었습니다. 이 과정을 통해 서버가 무엇인지 그리고 포트 번호가 어떤 역할을 하는지, 왜 배포가 필요한지에 대해 잘 이해했길 바랍니다.