개인 프로젝트나 팀 프로젝트를 진행하면, 작업의 결과물을 배포하여 다른 사람들이 볼 수 있도록 해야 한다.

사실 프론트엔드 신입으로 입사할 때 이미 서비스 중인 제품이 있는 회사에서는 배포 업무는 대부분 시니어가 담당하게 될 것이다. 또한 서비스를 앞두고 있어도 갓 입사한 신입에게 배포 업무를 맡기지는 않을 것이다.

• 더구나 신입 수준에서 혼자 배울 수 있는 배포 기술과 실제 회사에서 실무진들이 사용하는 배포 기술이 동일하지도 않을 것이고..

따라서 프론트엔드 신입이 배포에 대한 부분을 배울 때는 우선 자기 프로젝트를 제대로 표현할 수 있는 수준에 도달하는 것이 첫 번째 목표이다. 그 다음으로는:

유저가 어떤 절차를 거쳐 내가 만든 HTML과 자바스크립트 파일에 접근하는가에 대한 이해

내가 작성한 코드가 어떤 환경에서 어떤 절차를 거쳐 결과물을 유저에게 전달하는가에 대한 이해

로컬 환경이 아닌 실제 배포 환경에서 발생할 수 있는 이슈에 대한 트러블 슈팅 경험이 있는지에 대한 확인

인프라적인 문제 발생 시 롤백, 재배포 등 서비스 유지를 위한 적절한 대응이 가능한지에 대한 확인

이런 내용들을 학습하는 것을 목적으로 여러 배포 방법들을 알아가는게 올바른 방향이라고 생각했다.

1. 로컬 환경이 아닌 실제 배포 환경에서 발생할 수 있는 이슈에 대한 트러블 슈팅 경험

지금까지 진행했던 프로젝트들은 규모도 작고 복잡한 로직을 갖고있는 것도 아니었기에 배포 환경에서만 발생하는 이슈라고하고 할 만한 상황이 발생하지 않았다. 그래도 경험한 일들을 떠올려보자면..

Vercel 배포 환경에서 에러는 나지 않지만 배포가 제대로 이루어지지 않은 문제.

package.json에서 homepage 속성을 사용하여 프로젝트 시작시 최초 URL을 변경했더니 vercel 환경에서 프로젝트가 제대로 배포되지 않았다.

Vercel은 기본적으로 프로젝트를 프로젝트 루트(/)에서 호스팅하려고 시도한다. homepage 속성으로 인해 빌드된 정적 파일들의 경로가 변경되면, Vercel 환경에서는 해당 파일들을 찾을 수 없어 배포가 제대로 이루어지지 않았다.

Firebase 배포 환경에서 navigate(-1) 함수가 제대로 동작하지 않은 문제.

로컬 환경에서는 localhost:3000 같은 주소로 앱을 시작하지만, 배포 환경에서는 제공되는 자체 주소로 앱에 접근하게 되어 브라우저의 히스토리가 다르게 쌓이기 때문이다.

2. 데이터베이스, 백엔드단이 별도로 존재하지 않는 프로젝트의 배포는..

프론트엔드단만 존재하는 프로젝트의 배포는 상대적으로 간단하다. Netlify, Vercel, GitHub Pages, Google Firebase 등을 사용해볼 수 있는데 이들 모두 정적 웹사이트나 문서를 배포하는데 최적화되어 있지만 자잘한 차이점들이 존재한다.

• 정적 웹사이트나 문서?
  서버 측에서 별도의 데이터베이스 조회, 계산, 동적 컨텐츠 생성과 같은 작업 없이 그대로 사용자에게 전달되는 웹 콘텐츠.

자동화된 CI/CD가 제공되는가?

Netlify, Vercel만 제공된다. 나머지 둘은 빌드와 배포, 테스트 모두 본인이 알아서 해야한다. 다만 Firebase의 경우 해당 서비스를 제공하고 있어서 사용자가 사용법만 알아서 추가해주면 된다.

데이터베이스나 백엔드 기능도 제공하는가?

Google Firebase만 제공한다. 사용자 인증 시스템, 데이터베이스를 포함해서 스토리지에 공식적으로 확장 프로그램까지 제공해주고 있다.

Netlify와 Vercel의 차이점?

모두 정적 웹사이트와 서버리스 함수를 호스팅하는 데 사용되는 플랫폼이지만..

Vercel의 경우 일단 Next.js에 가장 최적화 되어있는 서비스를 제공하는 것을 목표로 만들어졌다. (물론 다른 프레임워크에도 잘 호환되도록 개발되었다.)

서버리스 함수의 경우 Netlify는 AWS Lambda 기반의 서비스를, Vercel는 자체 환경을 제공한다고 한다.

플러그인이나 확장 기능에서는 Netlify는 공식적인 플러그인을 제공하지만, Vercel은 공식적이진 않고 Next.js의 플러그인 및 설정을 사용할 수 있다고 한다.

간단한 프로젝트면 뭘 써도 상관 없지만, 그게 아니라면 Next.js 기반의 프로젝트를 개발 중일 때는 Vercel을 쓰고 다양한 정적 사이트 생성 도구나 다른 통합 기능을 활용하려는 경우 Netlify를 사용하는게 적합할 것 같다.

3. 제일 중요한 사용 비용은?

Netlify, Vercel, GitHub Pages, Google Firebase 모두 기본적으로 무료로 제공된다. (다만 GitHub Pages의 경우 public Repo일 때만 무료.)

사용량이 많거나, 추가적인 기능들을 사용하려면 유료 결제를 하는 것 정도. 계정을 등록할 때 신용카드 정보 등록을 강제하는 것도 아니라서 마음 편하게 사용하면 된다.

• Netlify
  트래픽과 기능에 따른 단계적인 유료 플랜을 제공.

• Vercel
  팀과 기업을 위한 다양한 플랜이 있음. 가격은 트래픽, 팀 멤버 수, 추가 기능에 따라 변동됨.

• GitHub Pages
  프라이빗 저장소를 사용하려면 GitHub Pro 계정이 필요하며, 그에 따른 비용이 발생.

• Google Firebase
  사용한 만큼 비용 지불. 다양한 서비스에 대한 개별 가격이 존재한다. 트래픽 종류에 따라 사용량을 지정할 수 있다.