Vercel을 이용한 웹페이지 개발

Vercel은 서버리스 방식 클라우드 컴퓨팅 서비스를 제공하는 회사입니다. 물론 상업용이 아니라면 무료로 사용할 수 있습니다.

모든 설정을 수동으로 할 필요 없이 사용하고 싶은 소스를 정하고 Deploy만 하면 나머지 빌드 과정이나 운영(스케일링 등)은 버셀이 모두 처리한다. 따라서 웹 개발자에게 특히 친화적이며, 개발자는 개발을 한 후 deploy후 결과를 받는 프로세스를 반복하며 개발을 진행할 수 있다.

 

1. 웹페이지 준비

요즘엔 AI를 이용하여 개발하기 쉽죠. 저는 Python코드에서 Google Gemini를 이용하여 문의를 하고 답변을 받는 API를 사용한 일이 있었는데, 이때 '현재 시점의 데이터를 검색하여 그 기반으로 답변해줘.' 라고 했더니 엔진이 학습된 시점(약 1년전)의 데이터를 답변에 적어주더라고요. 그래서 검색하다가 'Google Grounding' 을 사용하면 된다는 것을 찾았습니다. 그리고 Gemini에 'Google Grounding' 을 이용하여 질문을 하고 답변을 받는 페이지를 만들어줘라고 하니, html 소스코드를 만들어줬어요.이걸 github에 올렸죠. index.html 페이지입니다. 로컬에서 실행하면 이런게 나오는 페이지입니다.

 

2. GitHub에 업로드

저는 master에 올려서 진행햅니다. git에 대한 기능은 여기서 다루지 않겠습니다. 프로젝트 이름은 aisearch라고 이름 지었어요.

 

3. Vercel 가입 및 GitHub 연동

일단 상업용으로 사용할 건 아니라서 Hobby를 선택했습니다.

 

GitHub 를 이용하여 Vercel의 Deploy 기능을 사용할 것이기 때문에 GitHub를 선택했습니다.

 

이렇게 가입하고 여기서도 우측 상단쯤에 있는 Add New 의 Project를 눌러서 생성하고 GitHub의 프로젝트를 선택하니 다음과 같이 보입니다.

Project 부분의 링크를 클릭하면 아래와 같이 Deployment 화면으로 진입한다.

이제 여기서 중간의 Deployment 부분의 링크를 클릭하면 다음과 같은 화면이 출력된다. 'Deployment Detail'

역기서 화면 우측 상단의 ... 에서 Deploy, 다음부터는 Redeply 라고 되어 있는 버튼을 클릭하면 됩니다.

이렇게 배포한 후 화면 중간에 생성된 Domain 링크로 들어가면 내가 개발한 index.html 페이지가 출력되는 것을 볼 수 있습니다.

 

이렇게 웹서버, 웹개발에 대해 전혀 알지 못하는 제가 클릭 몇번으로 웹페이지를 만들고, 도메인 서비스를 이용할 수 있게 되었습니다.