Anpassade felsidor

Standardfelsidor

Varifrån felsidor hanteras

• AEM - författare, publicera, förhandsgranska
• CDN som hanteras av Adobe

Alternativ för att anpassa felsidor

• Direktivet ErrorDocument Apache
• ACS AEM Commands - 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 den lokala AEM utvecklingsmiljön 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ö distribuerar du AEM WKND-projektet genom att köra pipelinen för fullständig 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.

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

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.

Öppna webbläsaren och gå till Publish-URL:en, lägg till cdnstatus?code=404 i URL:en, till exempel https://publish-p105881-e991000.adobeaemcloud.com/cdnstatus?code=404 eller använd URL:en för den anpassade domänen

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. Det HTML-dokument som levereras av det Adobe-hanterade 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