How We Run Decoupled Websites with 110 Million Hits per Month

better sit on the left side of the room, there is gonna be a lot of goodies on the screen :)

Michael Schmid

@Schnitzel

CTO Amazee Group

This is not your standard session

Please ask questions right away

The Projects

  • Ringier Axel Springer
    • Started end 2016
    • Multiple Frontends, single Backend
    • beobachter.ch
    • handelszeitung.ch
    • bilanz.ch
    • schweizer-illustrierte.ch
    • gaultmillau.ch
  • Swiss Paraplegic Center
    • 2018
    • Single Frontend
    • paraplegie.ch
  • Infrastructure
  • Platform
  • Code
  • People
  • Learnings

Infrastructure

  • AWS, could be anywhere:
    • Azure
    • Google Cloud
    • Custom
  • Autoscaled
  • Multi AZ

Platform

  • Completely Dockerized
  • Lagoon, Kubernetes, OpenShift
  • Fully Autoscaled

First: Drupal only

Decoupled Drupal

Multi Decouple Drupal

  • Single Drupal Backend
  • Multiple Frontends (Monorepo)
  • All using the same GraphQL API

Multi Decoupled Drupal

Code

  • Monorepo
  • Drupal Backend
    • GraphQL
    • nothing more
  • React Frontend
    • React & Apollo (Next.js)
    • Server Side Rendering

CI/CD

  • Individual Environments for every
    • Branch
    • Pull Request
  • Frontend can point to any Backend
    • PRs Targets
    • Customized
  • TravisCI/CircleCI for Unit Tests, Behat, etc.

People

  • Strict PR based deployments
  • Pagerduty Schedule with Developers
    • 1. Developers
    • 2. amazee.io 24/7 Engineers
  • Chat Communication ChatOps

Learnings

NodeJS as a WebServer is hard

  • Developers coming from a Drupal World
    • Concept of NodeJS as a Webserver is not fully understood
    • Issues with Image Cache Headers, Redirects, Basic Auth
  • Implement small nginx container with nodejs container

Learnings

Persistent GraphQL

  • Allow POST GraphQL queries in PR and DEV environments
  • Ensure to have tests for them :)

Learnings

Crisis Communication is Key

  • Dedicated communication engineer during incidents
  • Chat & ChatOps helps tremendous
  • Internal Statuspage for Stakeholders

Questions?

Caching GraphQL

  • GraphQL Requests sometimes too big for GET
  • POST is by standard cacheable! 😱
  • Many CDN & Cache Systems can't cache POST
  • Solution: Persistent GraphQL

Persistent GraphQL

  1. Frontend creates Query Map
    • JSON file of all possible GraphQL queries
  2. Each Query has an ID in the JSON file
  3. Frontend sends QueryMap to Backend
  4. Requests are sent via GET and just the Query ID instead of whole Query

This also makes your GraphQL endpoint secure! 🎉

How We Run Decoupled Websites with 110 Million Hits per Month - DrupaCon Seattle 2019

By Michael Schmid

How We Run Decoupled Websites with 110 Million Hits per Month - DrupaCon Seattle 2019

  • 1,344