GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
엣지에서 동적 콘텐츠를 전략적으로 캐싱하는 방법에 대한 입문서: 동적 콘텐츠의 작동 방식과 기존 CDN보다 우수한 이유
성능 측면에서 대부분의 CDN은 정적 파일을 빠르게 전송하고 트래픽 피크 시간에 네트워크 오버헤드를 제공하며 네트워크 수준의 DDoS 공격을 방어합니다. 이전에는 이미지, 비디오 및 기타 정적 콘텐츠와 같은 자산의 성능과 보안이 눈에 띄게 향상되었습니다. 웹 기술이 진화함에 따라 앞서 언급한 이점은 CDN이 주류 웹 전송 솔루션의 일부가 되었을 때 형성된 중요한 요소일 뿐입니다.
문제는 CDN 아키텍처가 몇 년 전에 개발되었다는 것입니다. 웹 사이트 아키텍처는 도약과 경계에 따라 변화했지만 대부분의 CDN은 변화하는 환경에 적응하지 못했습니다.
이 글을 읽고 있다면 서버측 렌더링된 동적 콘텐츠의 일부로 구성된 사이트가 있는 것입니다. 레거시 CDN을 사용하는 경우 브라우저의 개발자 도구를 가져올 때 응답 헤더에 이와 같은 내용이 표시되는 데 익숙할 것입니다.
CDN 캐시: 통과
제공업체에 따라 이 쌍의 값을 통과, 누락 또는 동적 콘텐츠로 대체합니다. 그것은 모두 같은 것을 의미합니다.
“이 응답은 너무 복잡했기 때문에 당신의 기원에서 나온 것입니다.”
사이트 성능에 어떤 영향을 미칩니까? 동적 콘텐츠는 거의 항상 오리진에서 간단하고 평범하게 제공되므로 속도를 떨어뜨릴 수 있습니다. 카테고리 및 제품 페이지, 기사 및 API 요청은 거의 100% 오리진으로 직접 전송됩니다. 대부분의 CDN은 동일한 장애를 겪습니다. 운이 좋다면 서버의 동적 응답의 약 10-11%를 에지 캐시에 저장할 수 있습니다. 즉시 로드되고 네이티브 앱처럼 느껴지는 웹 사이트를 만들기 위해 캐싱 규칙을 세밀하게 조정할 수 있을 만큼 세밀한 제어력이 없다는 사실을 금방 알게 될 것입니다.
Edgio에 오신 것을 환영합니다.
Edgio는 전 세계적으로 300개 이상의 PoP와 250TB의 용량을 갖춘 세계에서 두 번째로 큰 CDN을 자랑합니다. 우리는 안전하고, 성능이 뛰어나며, 전 세계 어디서나 존재합니다. 그러나 앞서 말했듯이, 그것은 단지 테이블 스테이크입니다. Edgio는 CDN 문제에 대해 다른 관점에서 접근하고 있습니다. 20년 된 규칙에 얽매이지 않고, 향후 20년 및 그 이후에도 대응력이 뛰어나고 유연한 CDN을 구축했습니다. Akamai는 개발자와 DevOps 팀원에게 1초 이내에 웹 사이트를 전송하는 데 필요한 유연성과 세밀한 제어 기능을 제공하는 세계 최초의 코드 구성 가능 CDN을 개발했습니다.
마술이 아니라 CDN의 미래입니다. 지금 바로 사용할 수 있습니다.
이 시점에서, 당신은 아마 마법처럼 들릴 것입니다, 글쎄, 그렇게 느낄 수 있지만, 그것은 아니에요, 그것은 웹 애플리케이션 전송의 미래입니다. DevOps 팀과 엔지니어링 팀을 분리하는 대신 CDN 로직을 로컬, 스테이징 및 프로덕션 환경에 통합할 수 있도록 지원함으로써 팀을 하나로 모으고 있습니다.
원하는 모든 것을 원하는 기간 동안 쉽게 캐싱
모든 Edgio 구성은 사용자가 소유하고 제어하는 코드 리포지토리에서 시작됩니다. 모든 배포는 고유하고 원자적이므로 1분 이내에 모든 버전으로 롤백할 수 있습니다. 프로젝트와 함께 구성을 배포하거나 별도의 워크플로에서 유지 관리할 수 있습니다. 대부분의 고객은 CDN 규칙을 CI/CD 파이프라인과 정상적인 개발 흐름에 통합합니다. 결과적으로 성능과 제어력을 저하시키지 않으면서 개발자 속도를 높일 수 있습니다. 코드 베이스를 수행하는 것처럼 CDN을 관리합니다.
포털에 구성 변경 사항을 게시하거나 API 요청을 하는 데 익숙합니다. 에디는 어떻게 다를까?
걱정하지 마십시오. API 엔드포인트와 기존 사용자 인터페이스를 원할 때 사용할 수 있습니다. 하지만 캐시 적중률, 사이트 성능, 개발자 속도를 최대화하려면 EdgeJS를 사용하는 것이 좋습니다. 들어가 봅시다.
프로젝트가 초기화되면 권장 규칙 집합이 포함된 간단한 구성 파일로 시작합니다. 구성은 세계에서 가장 널리 사용되는 개발 언어인 JavaScript로 작성되며 CLI를 사용하여 몇 초 만에 배포됩니다. 하나의 파일이 오리진 서버를 정의합니다.
module.exports = {
backends: {
origin: {
domainOrIp: "example.com",
hostHeader: "example.com",
},
},
API 엔드포인트, 미디어 버킷 또는 필요한 기타 오리진을 추가합니다. 간단하고 몇 줄의 코드로 가능합니다.
이러한 캐싱 유연성은 어떻습니까?
좋은 질문, 재미가 시작되는 곳입니다. 경로를 구성하고 일부 캐싱 규칙을 작성할 수 있도록 다른 파일을 추가합니다. 콘텐츠에 대한 규칙을 생성하고 엣지, 브라우저 및 서비스 작업자 캐싱 규칙을 적절하다고 판단되는 대로 설정합니다.
CDN이 잘 처리하는 정적 자산부터 살펴보겠습니다.
.match(
'/:path*/:file.:ext(js|css|png|svg|jpg|woff)',
({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24,
staleWhileRevalidateSeconds: 60 * 60
},
browser: {
maxAgeSeconds: 60 * 60 * 24,
},
})
proxy('origin')
}
)
하나의 규칙으로 우리는 모든 요청에 대해 다음과 같은 것을 설정했습니다.
“일치하는 파일 확장자를 가진 요청이 표시되면 Edgio와 클라이언트의 브라우저에 24시간 동안 캐시합니다.”
집에서 이것을 시도하는 경우 로컬로 사이트를 클릭하고 이미지, 이미지, 글꼴, CSS 및 JS를 캐시하고 전달하는 것을 볼 수 있습니다. 브라우저 캐시가 비어 있는지 확인하고 로컬에서 캐시 히트를 볼 수 있도록 시크릿 창을 표시합니다. 예, 로컬. 작동하는지 확인하기 위해 배포할 필요가 없습니다. 여러분은 여러분의 코드가 CDN과 어떻게 상호작용하는지 정확히 알고 있습니다.
말씀하신 동적 콘텐츠는 어떻습니까?
오, 우리가 잊지 않았다고 걱정하지 마세요. 이제 10분밖에 걸리지 않았으며 이러한 레거시 CDN을 연결하고 있습니다. 이제 애프터버너를 켜서 먼지 속에 버려두겠습니다. 일부 동적 콘텐츠에 대한 경로를 추가한다고 가정해 보겠습니다.
router.match('/products/:productId', ({ cache, proxy }) => {
cache({
edge: {
maxAgeSeconds: 60 * 60 * 24
staleWhileRevalidateSeconds: 60 * 60
}
})
proxy('origin')
})
번역하면 다음과 같은 의미가 있습니다.
“모든 제품 페이지를 하루 동안 캐시합니다.
캐시가 만료되면 새 버전을 찾는 동안 이전 캐시를 1시간 동안 서비스합니다.”
이제 유연성을 확인하고 기본 사항을 이해했습니다. Edgio에 CDN을 배포하는 것이 사이트의 속도와 성능에 어떤 영향을 미칠 수 있는지 상상해 보십시오. 자신의 경로를 쉽게 정의하고 캐싱 규칙을 할당할 수 있습니다. 그러나 Edgio의 응용 프로그램 플랫폼과 EdgeJS로 무엇을 할 수 있습니까?
- 오리진의 다른 경로로 요청을 전달합니다.
- 요청 변경
- 응답 변경
- 쿠키 조작
- 정적 파일 서비스
- 서버리스 함수로 라우팅
- 서버 쪽 렌더링으로 대체
- 리디렉션
- 트래픽 차단
- 사용자 지정 캐시 키를 사용한 선택적 삭제
- 또는 오리진의 응답을 완전히 변환할 수 있습니다.
Edgio의 차세대 기술을 어떻게 활용할지 결정하는 것은 여러분의 몫이며 위의 예는 빙산의 일각에 불과합니다. 실제로 Edgio는 성능을 지속적으로 추구하기 때문에 고유한 HTML 및 자산 프리페칭 솔루션을 통해 에지를 넘어 방문자의 브라우저로 한 걸음 더 나아가기로 결정했습니다.
네트워크 응답 시간을 가상으로 없애고 웹 사이트에 네이티브 애플리케이션의 느낌을 주어 웹 사이트를 완전히 변화시키는 방법을 알아보려면 Edgio의 예측 프리페칭으로 이탈률 감소 및 사이트 경험 개선 후속 기사를 확인하십시오.
