가이드

이 가이드는 고성능 Next.js 풀스택 애플리케이션 구축과 코드 품질이나 애플리케이션 속도를 저하시키지 않으면서 개발 워크플로우를 최적화하는 데 중점을 둡니다.다음 섹션에서는 프로젝트 아키텍처, 환경 설정, 라우팅 전략, 효율적인 데이터 페칭 기법을 철저히 살펴보겠습니다. 이러한 모범 사례를 통해 EdgeOne Pages에서 Next.js 풀스택 애플리케이션을 원활하게 배포하고, 뛰어난 성능과 전 세계적인 접근성을 위해 엣지 컴퓨팅 능력을 활용할 수 있습니다.다음 디렉토리 구조는 권장하는 Next.js 하이브리드 렌더링 템플릿을 나타냅니다. 이 신중하게 구성된 아키텍처는 확장 가능한 풀스택 애플리케이션을 구축하는 개발자들을 위한 최적의 기반 역할을 합니다:

Ethan Mercer

EdgeOne Pages의 고급 기능 중 하나는 리버스 프록시 역할을 하여 클라이언트 요청을 백엔드 서버로 안전하고 효율적으로 전달할 수 있는 기능입니다. 이 글에서는 edgeone.json 구성 파일을 사용하여 EdgeOne Pages를 리버스 프록시로 구성하는 과정을 안내해 드리겠습니다.EdgeOne Pages는 "edgeone.json" 구성 파일을 제공하여 프로젝트 빌드 및 배포 동작(예: 빌드 명령)을 사용자 정의하고 라우팅 전략(리다이렉트, 리라이트 및 HTTP 응답 헤더 포함)을 관리할 수 있습니다.리라이트를 사용하면 브라우저에 표시되는 URL을 변경하지 않고 사용자 요청을 다른 URL로 투명하게 라우팅할 수 있습니다. 리라이트를 통해 요청이 백엔드 서버에 도달하기 전에 URL 경로, 쿼리 매개변수 및 요청 헤더를 수정할 수 있습니다.

Ethan Mercer

교차 출처 리소스 공유(CORS)는 웹 애플리케이션이 다른 출처의 리소스와 상호작용하는 방식을 제어하기 위해 브라우저에 의해된 보안 메커니즘입니다. 기본적으로 동일 출처 정책은 웹 페이지가 자신의 도메인이 아닌 서버에 요청을 할 수 없도록 제한합니다. CORS는 서버가 HTTP 헤더를 통해 리소스에 접근할 수 있는 출처를 지정함으로써 이러한 제한을 완화합니다p>비슷하지 않은 요청(non-simple request)(사용자 정의 헤더나 GET/POST 이외의 메서드를 사용하는 요청)을 고려할 때, 브라우저는 자동으로 서버에 프리플라이트 OPTIONS 요청을 보냅니다. 서버는 적절한 CORS 헤더를 반환해야 하며, 그렇지 않으면 브라우저는 실제 요청을 차단합니다.페이지 기능은 EdgeOne 엣지 노드에서되는 서버리스 코드 실행 환경을 제공합니다. 개발자는 비즈니스 로직을 작성하고 트리거 규칙을 구성하기만 하면 됩니다. 서버 인프라 관리는 필요하지 않습니다. 코드는 최종 사용자와 가까운 엣지 노드에서 유연하고 안전하게 실행됩니다>

Benjamin Carter

모든 개발자는 이런 느낌을 알고 있습니다: CodePen에서 놀라운 것을 만들었을 때—아마도 멋진 CSS 애니메이션, 인터랙티브한 JavaScript 위젯, 또는 아름다운 랜딩 페이지 프로토타입일 수도 있습니다. 이제 그것을 단지 Pen으로서가 아니라 실제 독립형 웹사이트로 세상과 공유하고 싶을 것입니다.전통적인 배포는 종종 Git과의 씨름, 빌드 도구 구성 또는 복잡한 호스팅 플랫폼 탐색을 포함합니다. 그러나 EdgeOne Pages를 사용하면 CodePen에서 단 30초 만에 라이브 프로덕션급 사이트로 전환할 수 있습니다.세부 사항에 들어가기 전에, 이 과정이 얼마나 간단한지 살펴보겠습니다. 전체 워크플로는 단 세 가지 작업으로 구성됩니다: 내보내기 → 끌어다 놓기 → 배포.

Ethan Mercer