カスタムエラーページ

デフォルトのエラーページ

エラーページの提供元

• AEM サービスタイプ - オーサー、パブリッシュ、プレビュー
• アドビが管理する 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 では Apache にすべてのエラーを処理させます。

# In `wknd.vhost` file:

...

## ErrorDocument directive
ErrorDocument 404 ${404_PAGE}
ErrorDocument 500 ${500_PAGE}
ErrorDocument 502 ${500_PAGE}
ErrorDocument 503 ${500_PAGE}
ErrorDocument 504 ${500_PAGE}

## Add Header for 5XX error page response
<IfModule mod_headers.c>
  ### By default, CDN overrides 5XX error pages. To allow the actual response of the backend to pass through, add the header x-aem-error-pass: true
  Header set x-aem-error-pass "true" "expr=%{REQUEST_STATUS} >= 500 && %{REQUEST_STATUS} < 600"
</IfModule>

...
## DispatcherPassError directive
<IfModule disp_apache2.c>
    ...
    DispatcherPassError        1
</IfModule>

# In `custom.vars` file
...
## Define the error page paths
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 Storage ドキュメントに従います。

静的ファイルがパブリックアクセス可能であることを確認します。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 ファイルがそのままアップロードされ、パブリックにアクセス可能になりました。

ブラウザーで、AEM as a Cloud Service のパブリッシュ URL に移動し、URL（例：https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404）に cdnstatus?code=404 を追加するか、カスタムドメイン URL を使用してアクセスします

サポートされているコードは、403、404、406、500 および 503 です。

ブラウザーのネットワークタブを確認して、静的ファイルが Azure Blob Storage から読み込まれていることを確認します。アドビが管理する CDN によって配信される HTML ドキュメントには最小限のコンテンツが含まれ、JavaScript ファイルによってブランドのエラーページのコンテンツが動的に作成されます。

CDN エラーページの設定

Cloud Manager - 設定パイプライン