사용자 지정 오류 페이지

기본 오류 페이지

오류 페이지가 제공되는 위치

• AEM 서비스 유형 - 작성자, 게시, 미리보기
• Adobe 관리 CDN

오류 페이지를 사용자 지정하는 옵션

• ErrorDocument Apache 지시문
• ACS AEM Commons - 오류 페이지 핸들러
• CDN 오류 페이지

로컬 AEM 개발 환경 또는 AEM as a Cloud Service 환경입니다. CDN 오류 페이지 옵션은 AEM as a Cloud Service 환경에 적용할 수 있습니다.

오류 페이지를 사용자 지정하는 AEM WKND 프로젝트.

아래 단계에 따라 AEM WKND 프로젝트를 로컬 AEM 개발 환경에 복제 및 배포합니다.

# For local AEM development environment
$ git clone git@github.com:adobe/aem-guides-wknd.git
$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage -PautoInstallSinglePackagePublish

AEM as a Cloud Service 환경의 경우 전체 스택 파이프라인을 실행하여 AEM WKND 프로젝트를 배포하려면 비프로덕션 파이프라인 예를 참조하십시오.

WKND 사이트 페이지가 올바르게 렌더링되는지 확인합니다.

ui.content.sample 모듈에 브랜드 오류 페이지 @ /content/wknd/language-masters/en/errors이(가) 있습니다. 로컬 AEM 또는 AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors 환경에서 검토하십시오.

dispatcher 모듈의 wknd.vhost 파일에 다음이 포함되어 있습니다.

• 위의 오류 페이지를 가리키는 ErrorDocument 지시문.
• DispatcherPassError 값이 1로 설정되어 Dispatcher에서 모든 오류를 처리할 수 있습니다.

...
# ErrorDocument directive in wknd.vhost file
ErrorDocument 404 ${404_PAGE}
ErrorDocument 500 ${500_PAGE}
ErrorDocument 502 ${500_PAGE}
ErrorDocument 503 ${500_PAGE}
ErrorDocument 504 ${500_PAGE}

...
# DispatcherPassError value in wknd.vhost file
<IfModule disp_apache2.c>
    ...
    DispatcherPassError        1
</IfModule>

# Custom error pages path in custom.vars file
Define 404_PAGE /content/wknd/us/en/errors/404.html
Define 500_PAGE /content/wknd/us/en/errors/500.html
...

https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html과 같이 환경에 잘못된 페이지 이름이나 경로를 입력하여 WKND 사이트의 사용자 지정 오류 페이지를 검토하십시오.

다음 명령을 실행하여 새 React 프로젝트를 만듭니다.

$ npx create-react-app aem-cdn-error-page

즐겨 찾는 코드 편집기에서 프로젝트를 열고 아래 파일을 업데이트합니다.

• src/App.js: 오류 페이지 콘텐츠를 렌더링하는 기본 구성 요소입니다.

  code language-javascript

  import logo from "./wknd-logo.png"; import "./App.css"; function App() { return ( <> <div className="App"> <div className="container"> <img src={logo} className="App-logo" alt="logo" /> </div> </div> <div className="container"> <div className="error-code">CDN Error Page</div> <h1 className="error-message">Ruh-Roh! Page Not Found</h1> <p className="error-description"> We're sorry, we are unable to fetch this page! </p> </div> </> ); } export default App;

• src/App.css: 오류 페이지 콘텐츠의 스타일을 지정합니다.

  code language-css

  .App { text-align: left; } .App-logo { height: 14vmin; pointer-events: none; } body { margin-top: 0; padding: 0; font-family: Arial, sans-serif; background-color: #fff; color: #333; display: flex; justify-content: center; align-items: center; } .container { text-align: letf; padding-top: 10px; } .error-code { font-size: 4rem; font-weight: bold; color: #ff6b6b; } .error-message { font-size: 2.5rem; margin-bottom: 10px; } .error-description { font-size: 1rem; margin-bottom: 20px; }

• wknd-logo.png 파일을 src 폴더에 추가합니다. 파일을(를) wknd-logo.png(으)로 복사합니다.

• favicon.ico 파일을 public 폴더에 추가합니다. 파일을(를) favicon.ico(으)로 복사합니다.

• 프로젝트를 실행하여 WKND 브랜드 CDN 오류 페이지 콘텐츠를 확인합니다.

  code language-none
  $ npm start

  브라우저를 열고 http://localhost:3000/(으)로 이동하여 CDN 오류 페이지 콘텐츠를 봅니다.

• 프로젝트를 빌드하여 정적 파일을 생성합니다.

  code language-none
  $ npm run build

  정적 파일이 build 폴더에 생성됩니다.

공식 Azure Blob 저장소 설명서에 따라 컨테이너를 만들고 정적 파일을 업로드하십시오.

정적 파일을 공개적으로 액세스할 수 있는지 확인하십시오. 내 WKND 데모별 저장소 계정 설정은 다음과 같습니다.

• 저장소 계정 이름: aemcdnerrorpageresources
• 컨테이너 이름: static-files

위의 static-files 컨테이너에서 build 폴더의 아래 파일이 업로드됩니다.

• error.js: build/static/js/main.<hash>.js 파일의 이름이 error.js(으)로 변경되고 공개적으로 액세스할 수 있음.
• error.css: build/static/css/main.<hash>.css 파일의 이름이 error.css(으)로 변경되고 공개적으로 액세스할 수 있음.
• favicon.ico: build/favicon.ico 파일이 그대로 업로드되고 공개적으로 액세스할 수 있음.

브라우저를 열고 Publish 환경 URL로 이동하고 URL에 cdnstatus?code=404을(를) 추가합니다(예: https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404). 또는 사용자 지정 도메인 URL을(를) 사용하여 액세스합니다

지원되는 코드는 403, 404, 406, 500 및 503입니다.

Azure Blob 저장소에서 정적 파일이 로드되었는지 확인하려면 브라우저 네트워크 탭을 확인하십시오. Adobe 관리 CDN에서 전달하는 HTML 문서에는 최소한의 콘텐츠가 포함되어 있으며 JavaScript 파일은 브랜딩된 오류 페이지 콘텐츠를 동적으로 만듭니다.

CDN 오류 페이지 구성

Cloud Manager - 파이프라인 구성