위대함의 가장자리에서 성과 향상
사용자 가까이에서 네트워크 가장자리에서 JavaScript 코드를 실행할 수 있다고 상상해 보십시오. Edge 기능을 통해 바로 이러한 작업을 수행할 수 있습니다! 이러한 멋진 기능은 네트워크의 모든 POP(Point of Presence)에 배포되므로 전 세계의 전략적 위치에 분산되어 운영됩니다. Edge Functions는 이러한 PoP에서 요청과 응답을 로컬로 처리함으로써 지연 시간을 대폭 줄이고 성능을 높이며 사용자 경험을 개선하고 개인 맞춤형 콘텐츠와 향상된 보안을 제공합니다. 엣지에서 인증 및 리디렉션과 같은 작업을 처리함으로써 원래 서버로의 앞뒤로 이동하는 시간을 줄여 서비스 속도를 크게 높일 수 있습니다.
이제 CDN-as-Code로 한 단계 더 나아가 보겠습니다. IAC(Infrastructure-as-Code)가 작동하는 방식과 마찬가지로 코드를 통해 CDN(콘텐츠 전송 네트워크) 구성을 관리하는 것으로 생각하십시오. CDN-as-Code를 사용하면 CDN 설정을 버전 제어 시스템에 저장하고 CI/CD 파이프라인을 통해 배포를 자동화하며 모든 단계에서 일관된 환경을 보장할 수 있습니다. 이 접근 방식은 CDN 관리를 간소화하고 오류를 줄이며 CDN 동작을 프로그래밍 가능한 동적 제어가 가능합니다. 그 결과는? 효율적이고 유연하며 안정적인 컨텐트 딜리버리를 통해 손쉽게 확장하고 전반적인 서비스를 향상시킬 수 있습니다.
Edgio는 컨셉을 한 차원 높은 수준으로 끌어올리는 강력한 CDN-as-Code 플랫폼을 제공합니다. Edgio 플랫폼 내에서 EdgeJS를 사용하여 애플리케이션 코드에 포함된 파일(routes.[js|ts])에 CDN 동작을 정의할 수 있습니다. 이러한 긴밀한 통합은 손쉬운 협업을 위해 소스 제어의 장점을 활용하고 CDN 구성을 웹 앱의 특정 버전에 맞춥니다. 따라서 CDN 관리가 나머지 개발 워크플로우와 마찬가지로 효율적이고 간소화됩니다.
이에 대한 자세한 내용과 당사 플랫폼에 자체 사이트를 설정하려면 코드로서의 CDN 문서를 방문하십시오.
자바스크립트 프레임워크 기반 웹사이트가 Edgio에 배포되었으므로 이제 Edge Functions를 설정할 차례입니다. 이 기사에서는 Edge Functions를 효과적으로 활용할 수 있는 몇 가지 사용 사례를 살펴보겠습니다. Edgio를 사용하면 CLI를 통해 또는 Edgio 콘솔 내에서 직접 Edge Functions를 생성하고 관리할 수 있습니다. 먼저 CLI를 통해 Edge 기능을 배포하는 방법을 살펴보겠습니다.
아직 설치하지 않은 경우 Edgio CLI를 설치합니다. 이 예에서는 프로젝트에 npm 패키지 관리자를 사용했습니다.
npm i -g @edgio/cli@latest
자세한 내용은 Edgio CLI 설치 방법 에서 확인할 수 있습니다.
CLI(edgio init)를 사용하여 프로퍼티를 초기화하면 자동으로 routes.js와 edgio.config.js라는 두 개의 필수 파일이 생성됩니다. 그러나 웹 응용 프로그램이 TypeScript를 지원하고 TypeScript 구현이 가능한 프레임워크를 사용하는 경우 CLI는 routes.js 대신 routes.ts를 만듭니다.
EDGE 기능은 수신 요청이 지정된 경로와 일치할 때 활성화됩니다. 각 배관은 하나의 모서리 기능만 가질 수 있습니다. 여러 경로가 요청과 일치하면 마지막 일치하는 경로에 할당된 Edge 기능이 트리거됩니다.
여기에서 route.ts 파일에 추가된 경로를 볼 수 있습니다.
이 코드 스니펫은 edge 함수가 언제 실행되어야 하는지를 결정하기 위해 .match() 메소드를 사용하여 규칙을 정의합니다. 본질적으로, 들어오는 요청이 특정 기준을 충족하는지, 예를 들어 특정 경로(‘/’)를 가지고 있고 특정 헤더를 포함하지 않는지 확인합니다(‘x-ef-request’를 ‘true’로 설정). 이러한 조건이 충족되면 관련 edge 함수는 ‘./edge-functions/redirectpage.js‘가 트리거되어 요청을 다른 페이지로 리디렉션하거나 다른 지정된 작업을 수행합니다.
여러 가지 방법으로 이 작업을 수행할 수 있지만 한 가지 방법은 다음과 같습니다.
위 코드는 쿼리 매개 변수 “edgredirect“의 값에 따라 사용자를 “/can” 페이지로 리디렉션합니다. 이 기능을 더욱 개선하기 위해 위치 기반 검사를 통합하여 페이지를 사용자 지정하고 사용자 환경을 개선할 수 있습니다. 예를 들어, 사용자의 국가에 따라 다른 언어로 페이지를 표시하여 사용자 경험을 향상시킬 수 있습니다.
코드를 배포한 후에는 CLI에서 – edgio dev를 실행하여 이 변경 사항을 로컬로 테스트하고 Edge 함수가 예상대로 실행되고 있는지 확인할 수 있습니다.
Edgio Platform에 배포할 준비가 되면
edgio 배포 –property= <속성 이름 > –organization=<조직 이름>
배포가 완료되면 경로 로직이 규칙 섹션에 원활하게 통합됩니다.
모든 해당 기능은 Edge Functions(가장자리 기능) 섹션에 저장됩니다.
물론 콘솔에서도 이러한 Edge 기능을 직접 만들 수 있습니다.
이 예에서는 오리진 cache-control 지시어를 무시하고 응답을 10분 동안 캐시에 저장하도록 하는 함수를 생성합니다. 동일한 경로에 대한 후속 페치 요청은 지정된 기간 동안 캐시에서 처리됩니다.
Edge 기능을 만든 후에는 콘솔에서 이 기능을 트리거하는 규칙을 설정합니다.
또한 콘솔은 특정 기간에 대한 주요 통찰력을 제공하는 대시보드를 제공하여 함수 호출 빈도, 실행 기간, 함수별 메모리 할당 및 각 요청을 처리하는 데 소요된 전체 시간을 표시합니다.
Edge Functions의 기능을 보여주는 몇 가지 간단한 예에 불과합니다. Edgio는 다양한 사용 사례를 지원하며, 각 사례는 공통적인 과제에 대한 실용적인 솔루션을 제공하도록 맞춤화되어 있습니다. 이러한 예제는 에지 기능을 프로젝트에 손쉽게 통합하여 프로세스를 단순화하고 응용 프로그램의 기능을 향상시킬 수 있도록 제작되었습니다.
AWS 서비스와의 안전한 상호 작용부터 여러 소스의 콘텐츠를 원활하게 통합하고, HTTP 헤더를 조작하고, JSON 응답을 최적화하는 등 Edge Functions는 개발자가 다양한 문제를 효율적으로 해결할 수 있도록 지원합니다. Edge Functions는 Optimizely를 사용한 실험 구성을 기반으로 응답을 맞춤화하거나 대기실 기능을 사용하여 피크 시간 동안 트래픽을 관리하는 등 웹 애플리케이션을 개선하기 위한 다양한 실용적인 솔루션을 제공합니다.
결론적으로 Edgio의 Edge 기능은 웹 애플리케이션을 최적화하는 방법에 혁명을 일으켰습니다. JavaScript 코드를 네트워크 엣지에서 실행하여 사용자와 가까운 곳에서 실행함으로써 가능성의 영역을 열어줍니다. 직관적인 CLI 및 콘솔을 통해 엣지 기능을 원활하게 관리하고 배포할 수 있으며 CDN 동작을 정확하게 조정할 수 있는 유연성을 제공합니다.
Edge 기능을 자세히 살펴보면 다양한 사용 사례를 발견할 수 있습니다. AWS 요청 서명을 통한 보안 강화부터 콘텐츠 스티칭 및 언어 기반 리디렉션을 통한 개인화된 사용자 경험 구축에 이르기까지 그 가능성은 무궁무진합니다. 또한 대시보드에서 제공하는 통찰력을 통해 각 기능이 애플리케이션의 성능과 사용자 상호 작용에 미치는 영향을 명확하게 파악할 수 있습니다.
여기서는 표면만 긁었을 뿐입니다. 이 문서는 Edge 기능을 최대한 활용하는 방법에 대한 포괄적인 지침을 제공합니다. 다양한 예제 및 자습서를 살펴보고 Edgio Edge Functions의 민첩성, 효율성 및 신뢰성으로 응용 프로그램을 강화하십시오. 함께 웹 개발의 미래를 만들어 봅시다.
V7 플랫폼 설명서를 살펴보십시오.