Custom error pages

Modify the ingress configuration

To configure the default backend service, the ingress configuration needs to be altered in the webapp deployment’s values.yaml file.

values.yml
# Values for Magnolia Helm chart...
ingress:
  enabled: true
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/proxy-body-size: 512m
    cert-manager.io/cluster-issuer: "letsencrypt-prod"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      more_set_headers "X-Robots-Tag: noindex, nofollow";
    nginx.ingress.kubernetes.io/default-backend: {{ .Env.DEPLOYMENT }}-magnolia-error-page-svc (1)
    nginx.ingress.kubernetes.io/custom-http-errors: "503" (2)
1 The default backend, specified by environment, e.g., {{{ .Env.DEPLOYMENT }}-magnolia-error-page-svc.
We recommend that you use an environment variable here like so: {{ .Env.DEPLOYMENT }}-magnolia-error-page-svc. However, you can hardcode the environment name like so: integration-magnolia-error-page-svc. Environments refer to the backend environment such as Integration, UAT, or Production.
2 By default every error code (>= 300 and < 600) is redirected to the default backend service.
It is possible to filter them out by whitelisting the error codes surrounded with ".

Project structure

Start with cloning our template repository.

This must be a completely separate project from your webapp.
Console
git clone git@gitlab.com:magnolia-major-tom/developer-artifact/error-page-template.git (1)
rm -Rf .git (2)
mv error-page-template YOUR_REPOSITORY (3)
1 Clones the template from our repository.
2 Removes the .git settings so you can start fresh.
3 Moves the error-page-template to your repository.
The Kubernetes deployment files are provided by Magnolia PaaS and just need to be present in the frontend application folder.
Kubernetes deployment files
your_app_folder
├── .gitignore
├── .gitlab-ci.yml
├── README.md
└── src
    └── index.html (1)
1 The index.html is the file where the custom error page HTML content must be dropped. It needs to include the Javascript and CSS code.

The .gitlab-ci.yml file

It’s important that you configure the .gitlab-ci.yml file correctly so that your frontend development changes are picked up and deployed.

Magnolia PaaS automatically picks up the changes when using this approach.
.gitlab-ci.yml
stages:
  - deploy

sync:
  stage: deploy
  image: registry.gitlab.com/magnolia-major-tom/developer-artifact/error-page:1.0.0
  environment:
    name: $NAME
  before_script:
    - export KUBECTL_NAMESPACE=$NAME
    - export MAGNOLIA_RELEASE=$NAME
  script:
    - cp /k8s/base/* .
    - envsubst < kustomization-template.yaml > kustomization.yaml ; kustomize build .
    - kubectl -n $NAME apply -k .
  rules:
    - if: $CI_COMMIT_BRANCH == "develop"
      variables:
        NAME: integration
    - if: $CI_COMMIT_BRANCH == "master"
      variables:
        NAME: prod

Kubernetes cluster

Don’t forget to create your Kubernetes cluster in GitLab.

You can use the same steps provided in the Add Cluster to GitLab Project for your custom error page project.
Feedback