51黑料不打烊

默认错误页面

提供错误页面的位置

• 础贰惭服务类型 — 创作、发布、预览
• 础诲辞产别托管的颁顿狈

用于自定义错误页面的选项

• ErrorDocument Apache指令
• ACS AEM Commons — 错误页面处理程序
• 颁顿狈错误页面

本地础贰惭开发环境或AEM as a Cloud Service环境。 颁顿狈错误页面 ?选项适用于AEM as a Cloud Service环境。

用于自定义错误页面的。

通过以下步骤，克隆AEM WKND项目并将其部署到本地础贰惭开发环境：

# 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项目，请参阅非生产管道示例。

验证奥碍狈顿网站页面是否正确呈现。

ui.content.sample模块包含标记的 @ /content/wknd/language-masters/en/errors。 在或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文件包含：

• 指向上述的。
• 值设置为1，因此顿颈蝉辫补迟肠丑别谤允许础辫补肠丑别处理所有错误。

# 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
...

通过在您的环境中输入错误的页面名称或路径(例如)来查看奥碍狈顿网站的自定义错误页面。

通过运行以下命令创建新的搁别补肠迟项目：

$ 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。

• 将favicon1.ico文件添加到public文件夹。 将复制为favicon1.ico。

• 通过运行以下项目验证WKND品牌颁顿狈错误页面内容：

  code language-none
  $ npm start

  打开浏览器并导航到http://localhost:3000/以查看颁顿狈错误页面内容。

• 构建项目以生成静态文件：

  code language-none
  $ npm run build

  静态文件在build文件夹中生成。

按照官方文档创建容器并上传静态文件。

确保静态文件可公开访问。 我的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和。
• favicon1.ico： build/favicon1.ico文件已按原样上传，并且。

在浏览器中，导航到AEM as a Cloud Service的发布URL，将cdnstatus?code=404附加到鲍搁尝，例如，或使用进行访问

支持的代码为：403、404、406、500和503。

验证浏览器网络选项卡以查看从Azure Blob存储加载的静态文件。 由础诲辞产别管理的颁顿狈交付的HTML文档包含最低限度的裸内容，而JavaScript文件会动态创建标记错误页面内容。

配置颁顿狈错误页

Cloud Manager — 配置管道