Jamstack은 웹 사이트 구축 방식을 혁신할 수 있습니다
웹 사이트 제작 워크플로의 재구상
모든 조직과 개발자는 웹 사이트가 빠르게 로드되고 모든 장치에서 세련되게 보이기를 원합니다. 로딩이 약간만 지연되어도 사용자가 페이지를 빠르게 종료하여 웹 사이트 전환이 줄어들 수 있습니다. 웹 사이트 속도는 검색 엔진 순위에도 영향을 미칩니다. 또한 악의적인 봇을 방어하고 사용자 데이터를 공격자로부터 보호해야 하는 위협 환경이 더욱 복잡해짐에 따라 조직에서는 사이트 보안을 개선할 방법을 찾고 있습니다.
전통적으로 속도, 보안, 가용성, 확장성을 포함하는 웹 사이트를 구축하는 것은 힘든 일이며 개발자에게는 부정적인 영향이 미칩니다. 개발자 리소스의 필요성과 가용성 간의 차이로 인해 웹 사이트 개발을 개선하는 방법을 찾아내면 조직 및 수익의 부담이 덜어 줄어들 수 있습니다.
이를 수행하는 한 가지 방법은 다음을 포함하여 개발 프로세스에서 발견되는 시간 소모적인 작업을 없애는 것입니다.
웹 사이트에서 다운타임 없이 트래픽 급증을 관리하는 동시에 인프라 또는 클라우드 서비스에 대한 지출을 최소화할 수 있도록 보장
페이지를 업데이트하고 페이지가 깨지거나 제대로 렌더링되지 않을 때 신속하게 대응해야 할 때 예상치 못한 놀라움
웹 사이트의 백엔드 부분과 프런트엔드 부분을 함께 연결
이해 관계자의 피드백 수집을 포함한 복잡한 워크플로
조직에서는 Jamstack이라고 불리는 웹 사이트 구축에 대한 새로운 아키텍처 접근 방식을 통해 이러한 모든 문제를 완화할 수 있습니다.
정적 사이트에 동적 기능 추가
Jamstack은 정적 사이트(가능한 한 많은 사이트를 미리 구축)라는 아이디어로 시작하여 동적 요소를 통합해서 공격 벡터를 줄이면서 빠른 웹 사이트를 구현합니다. 2015년에 "JAMstack"이라고 만들어진 이 용어는 다음에서 비롯됩니다.
J = JavaScript, 웹 사이트의 프로그래밍 언어
A = API, 정적인 페이지에서 동적인 콘텐츠를 사용하도록 설정하도록 해줌
M = Markup, 브라우저에 형식 지정 지침을 제공하는 HTML 및 CSS 코드
Jamstack은 이 세 가지 요소를 결합하여 개발자가 사용자에게 효율적으로 제공될 수 있는 웹 사이트를 빠르게 구축하고 유지 관리할 수 있도록 합니다.모바일, 웹, 비디오에 대해 잘 렌더링되는 정적 사이트를 시작하고 동적 기능을 위해 API에 의존하면 프로세스가 가속화됩니다.가능한 한 많은 사이트를 미리 구축한 다음 콘텐츠 전송 네트워크(CDN)를 사용하여 전 세계 사용자에게 페이지를 전달하면 페이지 속도를 높일 수 있습니다.사용자가 웹 사이트를 방문하면 전용 서버가 없는 채로 CDN에서 제공하며 미리 렌더링된 페이지가 표시됩니다.
특히 페이지의 정적 특성으로 인해 콘텐츠가 정적일 필요는 없습니다. Google 또는 Facebook의 자격 증명으로 사이트에 로그인할 수 있는 API와 같은 타사 API는 검색, 결제 처리, 실시간 데이터 등의 동적 콘텐츠를 지원합니다. 이 모듈식 접근 방식으로 유연성이 제공되고 벤더 종속이 방지되므로 기술 변화와 새로운 도구를 사용할 수 있게 됨에 따라 다양한 API를 쉽게 교체할 수 있습니다. 서버리스 기능과 통합하는 기능 덕분에 Jamstack 사이트가 더욱 동적이 될 수도 있습니다.
웹 애플리케이션 서버와 데이터베이스 서버가 필요 없고 Jamstack 페이지가 방문자가 늘어남에 따라 잘 확장되므로 방문자의 경험과 조직의 수익이 모두 개선됩니다.
본질적으로, Jamstack 사이트에는 개발자가 관리해야 하는 백엔드가 없습니다. 페이지의 정적 특성은 웹 사이트와 데이터베이스 사이에 링크가 없음을 의미하므로 보안 취약점이 줄어듭니다. 모든 사이트 요소는 CDN 또는 API에서 제공되므로 잠재적 공격자가 웹 애플리케이션 서버 또는 데이터베이스 서버에 액세스할 수 없습니다.
조직에서 이러한 접근 방식으로 웹 사이트를 구축하면 유지 관리할 서버와 스테이징 환경을 만들 필요가 없으므로 복잡한 DevOps 리소스가 덜 필요합니다. Jamstack이 단순하므로 기존 사이트보다 움직이는 부분이 적어 오류의 여지가 적어집니다. 프런트엔드와 백엔드가 이처럼 분리되어 있으므로 Jamstack 사이트는 더 빠르게 시작되고 더 안정적입니다.
정적 설정의 또 다른 장점은 이전 버전의 페이지로 되돌리는 것이 간단하다는 것입니다. 이는 전체 사이트가 한 번에 업데이트되어 새 버전을 만드는 애터믹(atomic) 배포의 개념을 통해 가능합니다. Jamstack을 사용하면 개발자는 자유롭게 더 많은 실험을 할 수 있고 기존 사이트의 지루한 시행착오를 피할 수 있습니다. 무언가가 의도한 대로 렌더링되지 않을 경우 전체 사이트를 이전 버전으로 다시 전환하는 것이 어렵지 않습니다.
Jamstack 툴킷 조립하기
Jamstack의 도구, 프로세스, 모범 사례는 빠르게 진화하고 있으며, 중요한 진행 부분은 실험을 기피하지 않고 새로운 진전 사항을 추적하는 것입니다. Jamstack을 시작하기가 간단한 이유는 기존 워크플로와 통합되고 많은 조직에서 핵심 기술에 대해 이미 벤더와 관계를 구축하여 의사 결정 프로세스가 가속화되기 때문입니다. 이러한 기술에는 다음이 포함됩니다.
CDN: 사용자와 가까운 위치에서 페이지를 전송하기. 빠른 성능을 달성하기 위한 요건.
정적 사이트 생성자(SSG): 원시 데이터 및 템플릿을 사용하여 사이트 생성하기. 페이지 코딩 프로세스 자동화 및 미리 빌드해서 사용자가 사용할 수 있도록 하기.
콘텐츠 관리 시스템(CMS): 콘텐츠 리포지토리 역할을 함.Jamstack 웹 사이트의 CMS는 "헤드리스"라고 설명되며, 이는 콘텐츠가 코드베이스 외부에 저장되고 API를 통해 전달되어 다양한 장치에서 원활하게 표시됨을 의미합니다.
Jamstack의 가치 확대
우리는 아직 Jamstack의 성숙 초기 단계에 있으며, 모든 배포가 똑같이 효과적인 것은 아닙니다. 예를 들어, 많은 Jamstack 플랫폼은 중앙 집중식 데이터 센터에서 호스팅되므로 에지에서 사이트를 제공하는 것과 비교하여 성능이 느려집니다. 일부에서는 또한 개발자 시트를 추가하는 데 더 많은 비용을 청구하므로 대규모 팀 간의 공동 작업에 지장이 있고 예측할 수 없는 가격이 책정될 수 있습니다.
Cloudflare에서는 이러한 문제를 해결하고 있으며 보호된 공유 미리 보기 링크를 사용하는 등 협업 프로세스에 더 많은 보안 기능을 도입하는 방법도 모색하고 있습니다.Cloudflare Pages는 코드를 작성하고 git push를 수행하는 것만큼 간단하게 사이트를 구축하고 호스팅하는 프로세스를 만드는 Jamstack 배포 플랫폼입니다.거기에서 Pages는 사이트가 전 세계 사용자의 몇 밀리초 이내에 실행되는 Cloudflare 글로벌 에지 네트워크에서 배포를 처리합니다.Pages는 프런트엔드 개발자를 염두에 두고 구축되었으며, 여기에는 구성을 최소화하고 협업을 개선하여 반복 속도를 높이는 것이 포함됩니다.
Cloudflare Pages의 주요 이점은 다음과 같습니다.
미리 보기에 안전하게 액세스할 수 있는 무제한 무료 공동 작업자
자동 배포를 위한 웹후크
내장된 무료 Web Analytics
자동 스케일링을 제공하는 글로벌 서버리스 플랫폼인 Cloudflare Workers의 통합을 통해 사용자 지정 API를 만드는 기능
250여 개의 도시에 데이 터 센터가 있는 글로벌 CDN
이 글은 오늘날의 기술 의사 결정자에 영향을 주는 최신 동향 및 주제에 대한 시리즈 중 일부입니다.
핵심 사항
이 글을 읽고 나면 다음을 이해할 수 있습니다.
Jamstack으로 개발자 경험을 개선하는 방법 이해하기
이 아키텍처 접근 방식으로 모바일, 웹, 비디오 전반에 걸쳐 사이트 응답성을 간소화하는 방법 설명
Jamstack 사이트가 빠르게 시작되는 이유 설명
관련 자료
이 주제에 관해 자세히 알아보세요.
Forrester New Wave™: 에지 개발 플랫폼, 2021년 4분기 보고서를 다운로드하여 Cloudflare가 다른 8개의 클라우드 에지 개발 플랫폼과 어떻게 비교되는지 확인하세요.