AI 감사일기 서비스, 기획부터 개발까지 3. 서비스 배포 (Vercel)

드디어 마지막이다. 커서 덕분인지 이런 서비스를 기획하고 개발하기까지 불과 3일밖에 걸리지 않았다.

이제 이렇게 개발한 서비스를 외부로 배포하는 작업이 남았다.

그럼 나 뿐만 아니라 다른 사람들도 이 서비스를 사용할수 있게 된다.

---

 

Vercel 깃허브 로그인

Vercel은 무료 호스팅 사이트이다.

간단하게 개발한 프론트엔드 프로젝트를 빌드,배포,호스팅까지 자동화할수 있게 해준다. 

특히 깃허브와 연동해서 코드 변경이 발생하면 자동으로 빌드하고 배포까지 되는게 장점이다.

 

https://vercel.com

Dashboard – Vercel

 

 

깃허브 프로젝트 import

이제 배포하고 싶은 프로젝트를 Import 한다. 왼쪽에 install을 눌러서 나의 github와 연결을 시킨다.

 

그러면 프로젝트 명과 함께 몇가지 설정을 지정하면 Deploy를 바로 실행할수 있다.

• ProjectName: 프로젝트 이름, 보통 import한 깃허브 프로젝트 이름과 동일하게 정해주면 편함
• Framework Preset: 프로젝트 빌드할때 사용하는 프레임워크, 아무래도 환경에 필요한 빌드,배포 설정이 자동으로 구성되는듯?
• Root Directory: 프로젝트의 루트 디렉토리. 루트로 지정할 경우, 루트 디렉토리 내 파일을 모두 빌드하고 배포한다는 뜻

그리고 숨겨진 내용으로 build and output Settings이 보이는데, 빌드 및 배포설정을 지정하는 부분으로 일단 기본세팅을 해도 된다.

• Build Command: 빌드하는 커맨드. 보통 npm기반으로 빌드 
• Output Directory: 빌드 결과물이 생성되는 위치. 기본적으로 루트 디렉토리에 생성
• Development Command: 로컬에서 프로젝트를 실행할때 사용하는 명령어. 

추가적으로 환경변수 설정도 할수 있다.  API 토큰처럼 중요한 정보를 코드에 노출하지 않고 관리할수 있는 것이다. 

Add Environment Variable: 변수 이름과 값으로 새로운 환경 변수를 추가할 수 있다.

 

프로젝트 Deply 시작! 

이제 deploy 버튼을 누르면 이렇게 배포가 시작된다. 마지막 커밋과 함께 배포과정을 볼수도 있다.

실패하게 되면 요기 로깅에 찍히기도 한다. 다행히 나는 아무런 이슈 없이 배포에 성공했다.

 

이제 내 깃허브 프로젝트 배포가 완료가 되었다.

 

프로젝트 Deply 완료!

최종적으로 배포가 완료되어 파란색 체크표시들이 마음을 편하게 해준다. 

 

이제 요기로 들어가면 나의 AI감사일기 서비스를 사용할수 있다.

이제 나의 도메인을 사서 붙여야겠다. 두둥! 많관부! 

 

그리고 아무래도 깃허브랑 연결을 해서 그런지 해당 프로젝트에 가면 요렇게 배포기록도 확인할수 있다! 

 

아무튼 이렇게 만들어보고 싶었던 서비스가 단 3일만에 기획부터 개발, 그리고 배포까지 뚝딱 이루어져버렸다.

아직은 단지 초기 과정에 불과해서 대단한 기능은 아니지만, 이렇게 간단하고 금방 만들수 있다는것만으로도 값진 경험이였다!

앞으로 좀더 디벨롭 시켜서 나뿐만 아니라 여러사람도 사용해볼수 있는 서비스를 만들어봐야겠다