Anpassade felsidor

Standardfelsidor

Varifrån felsidor hanteras

• AEM servicetyp - författare, publicera, förhandsgranska
• Adobe-hanterad CDN

Alternativ för att anpassa felsidor

• Direktivet ErrorDocument Apache
• ACS AEM Commons - Felsidhanterare
• CDN-felsidor

Den lokala AEM-utvecklingsmiljön eller AEM as a Cloud Service-miljön. Alternativet CDN-felsidor kan användas i AEM as a Cloud Service-miljön.

AEM WKND-projektet för att anpassa felsidor.

Klona och distribuera AEM WKND-projektet till din lokala AEM-utvecklingsmiljö genom att följa stegen nedan:

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

I AEM as a Cloud Service-miljö ska du distribuera AEM WKND-projektet genom att köra pipelinen i full stack. Se exemplet med icke-produktionspipeline.

Kontrollera att WKND-webbplatssidorna återges korrekt.

Modulen ui.content.sample innehåller profilerade felsidor @ /content/wknd/language-masters/en/errors. Granska dem i din lokala AEM - eller AEM as a Cloud Service https://author-p<ID>-e<ID>.adobeaemcloud.com/ui#/aem/sites.html/content/wknd/language-masters/en/errors -miljö.

Filen wknd.vhost från modulen dispatcher innehåller:

• Direktivet ErrorDocument som pekar på de ovanstående felsidorna.
• Värdet DispatcherPassError är satt till 1, så att Apache kan hantera alla fel.

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

Granska WKND-platsens anpassade felsidor genom att ange ett felaktigt sidnamn eller en felaktig sökväg i miljön, till exempel https://publish-p105881-e991000.adobeaemcloud.com/us/en/foo/bar.html.

Skapa ett nytt React-projekt genom att köra följande kommando:

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

Öppna projektet i din favoritkodredigerare och uppdatera filerna nedan:

• src/App.js: Det är huvudkomponenten som återger felsidans innehåll.

  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: Formatera felsidans innehåll.

  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; }

• Lägg till filen wknd-logo.png i mappen src. Kopiera filen som wknd-logo.png.

• Lägg till filen favicon.ico i mappen public. Kopiera filen som favicon.ico.

• Kontrollera innehållet på WKND-felsidan för CDN genom att köra projektet:

  code language-none
  $ npm start

  Öppna webbläsaren och gå till http://localhost:3000/ för att visa innehållet på CDN-felsidan.

• Skapa projektet för att generera statiska filer:

  code language-none
  $ npm run build

  De statiska filerna genereras i mappen build.

Följ den officiella dokumentationen för Azure Blob Storage för att skapa en behållare och överföra de statiska filerna.

Kontrollera att de statiska filerna är tillgängliga för allmänheten. Mina WKND-demonstrationsspecifika lagringskontoinställningar är följande:

• Lagringskontonamn: aemcdnerrorpageresources
• Behållarnamn: static-files

I behållaren ovanför static-files överförs filer under filerna från mappen build:

• error.js: build/static/js/main.<hash>.js-filen har bytt namn till error.js och offentligt tillgänglig.
• error.css: build/static/css/main.<hash>.css-filen har bytt namn till error.css och offentligt tillgänglig.
• favicon.ico: Filen build/favicon.ico överförs som den är och är tillgänglig för alla.

I webbläsaren navigerar du till AEM as a Cloud Service publicerings-URL:en, lägger till cdnstatus?code=404 i URL:en, till exempel https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404 eller använder anpassad domän-URL

Följande koder stöds: 403, 404, 406, 500 och 503.

Kontrollera webbläsarens nätverksflik för att se de statiska filerna läses in från Azure Blob Storage. HTML-dokumentet som levereras av Adobe-hanterat CDN innehåller det minsta tillåtna innehållet och JavaScript-filen skapar dynamiskt det varumärkesanpassade felsidans innehåll.

Konfigurera CDN-felsidor

Cloud Manager - Konfigurera pipelines