how the request flow for a docker compose web app

tags: learning programming networking

content

docker-compose-web-app-workflow.excalidraw

⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠ You can decompress Drawing data with the command palette: ‘Decompress current Excalidraw file’. For more info check in plugin settings under ‘Saving’

Excalidraw Data

Text Elements

browser

my misconception:

frontend container

backend container

docker compose

user

  1. enter domain.com/coffees

  2. request based on url

  3. sends /api/coffees

  4. send json response

browser

actually

frontend container

backend container

docker compose

  1. request based on url

user

  1. enter domain.com/coffees

  2. sends coffee.js and other static files

  3. send json response

  4. browser executes js and sends /api/coffees

browser

with cloudflare tunnel and nginx

cloudflare

backend container

docker compose

  1. request based on url, DNS resolved to cloudflare tunnel

user

  1. enter domain.com/coffees

  2. sends coffee.js and other static files

  3. send json response

  4. browser executes js and sends /api/coffees

frontend container (nginx)

  1. forward request to get coffee.js

  2. forward request to /api/coffees

  3. forward request to /api/coffees

Link to original

up

down

reference