저는 사용자가 시카고 음악 콘서트를 찾는 데 도움이 되는 개인 프로젝트를 진행하고 있습니다. 아키텍처 관점에서 볼 때 이 프로젝트의 주목할만한 측면 중 하나는 전체 웹 애플리케이션이 완전히 무료로 호스팅된다는 것입니다.

아래 이미지는 아키텍처 구성요소를 보여줍니다.

면책조항: 저는 여기서 언급한 어떤 서비스의 후원도 받지 않습니다. 나는 그것들이 유용하다고 생각하기 때문에 강조하고 있습니다.

프로젝트 코드베이스 저장소

GitHub는 코드베이스를 무료로 호스팅하는 가장 인기 있는 플랫폼입니다. 또한 Bitbucket 및 GitLab과 같은 대안도 시도해 보았는데 모두 잘 작동했습니다. 솔직히 말해서, 이러한 옵션 중 어느 것이든 충분할 것입니다. 하나를 선택하고 지나치게 생각하지 말고 앞으로 나아가십시오.

프런트엔드 워크플로 오케스트레이션

전문적인 환경에서는 일반적으로 AWS 또는 다른 클라우드 서비스 공급자와 직접 협력하여 배포, 알림 및 모니터링을 완벽하게 제어할 수 있습니다. 그러나 이 방법에는 더 많은 시간과 노력이 필요합니다. 다행히 Netlify 및 Vercel과 같은 서비스는 많은 마찰을 제거하여 이 프로세스를 단순화합니다. 빠른 배포가 가능하지만 생태계에 대한 종속성이 있습니다. 사이트에 상당한 트래픽(방문 횟수 수천 건)이 들어오기 시작하면 예상치 못한 비용이 발생하지 않도록 무료 등급 한도를 확인하는 것이 좋습니다. 개인 프로젝트의 경우, 지금까지 아무런 문제 없이 여러 번 이 서비스를 사용해 왔습니다.

즉, Netlify는 기본적으로 여러 가지 기능을 제공합니다. 아키텍처 이미지에서는 세 가지 구성 요소가 Netlify에 의해 자동으로 제공됩니다:

• GUI 통합:

Netlify의 GUI를 사용하면 코드베이스 저장소(제 경우에는 GitHub)를 통합할 수 있습니다. Netlify는 Next.js 애플리케이션의 기본 설정을 이해하고 이를 사용하여 코드를 원활하게 배포합니다.

• 정적 사이트 호스팅:

chicagomusiccompass.com은 정적 웹 애플리케이션이므로 관련 서버가 없습니다. 배포가 트리거되면 앱은 S3 버킷에 저장되는 정적 자산(HTML, JS 및 CSS)을 생성합니다. 그런 다음 Netlify는 CloudFront로 구성을 처리하여 즉시 사용할 수 있는 URL을 제공합니다.

• 람다 함수:

정적 사이트는 종종 다른 도메인에서 데이터를 가져와야 합니다. 이를 위해서는 일반적으로 "BFF(프런트 엔드용 백엔드)"라고 알려진 프록시가 필요합니다. 기본적으로 클라이언트 애플리케이션은 서버가 CORS를 통해 명시적으로 허용하지 않는 한 다른 도메인에 액세스할 수 없습니다. 이는 항상 일반적인 관행은 아닙니다. 이 프로젝트에서는 프록시를 사용하여 다른 도메인에서 JSON 파일

Netlify는 모든 배포 조정을 관리하고 사용자 친화적인 URL을 위해 도메인에 연결할 수 있는 URL(하위 도메인)을 제공합니다.

예를 들어, 내 프로젝트의 Netlify URL은 다음과 같습니다.

https://clinquant-chebakia-f64a5b.netlify.app/

그런 다음 www가 Netlify URL을 가리키도록 CNAME 레코드로 내 도메인을 구성했습니다.

사용자가 https://www.chicagomusiccompass.com/을 방문하면 DNS는 도메인을 최종 목적지인 Netlify URL ?로 확인합니다.

여기서 많은 일이 일어나고 있지만 대부분은 대시보드(GUI)를 통해 구성됩니다. 핵심은 모든 것이 어떻게 연결되어 있는지 이해하는 것입니다. 나머지는 UI를 탐색하는 것뿐입니다.

자동화된 예약 작업(Cron 작업)

cron-job.org는 크론 작업을 무료로 실행할 수 있는 서비스입니다. 이 설정에서 작동하는 방법은 다음과 같습니다.

a) Netlify 배포 후크:
Netlify는 트리거되면 사이트를 다시 배포하는 구성 가능한 웹훅(URL 엔드포인트)을 제공합니다. 이렇게 하면 필요할 때마다 Chicagomusiccompass.com이 자동으로 업데이트될 수 있습니다.

b) cron-job.org 통합:
cron-job.org를 사용하면 cron 작업을 예약할 수 있습니다. 이 경우 매일 실행되도록 설정합니다. 이 작업은 단순히 Netlify 배포 후크를 트리거하여 Netlify가 매일 사이트를 재배포(업데이트)하도록 유도합니다.

참고: Chicagomusiccompass.com에는 백엔드 구성 요소도 있지만 이 게시물은 프런트엔드 아키텍처에만 중점을 둡니다.

요약

chicagomusiccompass.com은 구축 시 몇 가지 Lambda 함수와 함께 정적 사이트(서버 없음)를 생성하는 Next.js 애플리케이션입니다. GitHub 저장소는 Netlify와 통합되어 있으므로 저장소에 푸시할 때마다 새로운 배포가 트리거됩니다. 이 프로세스는 정적 사이트의 새 버전을 생성하고 Lambda 함수를 업데이트합니다. Netlify는 이러한 파일의 배포를 처리하고 필요한 네트워크 인프라를 자동으로 프로비저닝하여 하위 도메인을 통해 웹 애플리케이션에 대한 액세스를 허용합니다. 또한 Netlify를 가리키도록 사용자 정의 도메인인 Chicagomusiccompass.com을 구성했습니다. 사이트는 Netlify 배포 후크를 트리거하는 일일 cron 작업을 통해 최신 상태로 유지됩니다.

사이트를 운영한 지 몇 달이 지났고 현재는 트래픽이 많지 않지만 인프라 비용은 한 푼도 내지 않고 있습니다.

전문적인 환경에서는 프로젝트 요구 사항에 따라 특히 초기 단계에서 유사한 솔루션을 선택할 수도 있습니다. 나중에 비즈니스가 성장하고 요구 사항이 발전함에 따라 특정 구성 요소를 마이그레이션할 수 있었습니다.

요즘 프론트 엔드 아키텍처는 매우 흥미로워졌습니다. 특히 무료 서비스를 활용할 수 있는 경우에는 더욱 그렇습니다. 하지만 서비스가 무료라면 귀하가 제품일 수도 있다는 점을 기억하세요.