Compose v4: Multi-Component Applications

Compose v4: Multi-Component Applications

Real-world applications are rarely a single container. A typical web app consists of a frontend, an API backend, a database, and possibly a cache or message queue. Flux's Compose v4 specification allows you to deploy up to 5 components in a single application, with automatic internal DNS for inter-component communication.

How Compose v4 Works

In a Compose v4 spec, each component is defined as a separate entry in the compose array. Each component has its own Docker image, ports, environment variables, resources (CPU, RAM, HDD), and persistent storage. All components within the same app can communicate with each other using Flux's internal DNS system.

Internal DNS Communication

When you deploy a multi-component app, Flux automatically sets up internal DNS entries for each component. Components can reach each other using the component name as a hostname. For example, if your app has a component named api and another named db, the api component can connect to the database at db:5432 (for PostgreSQL) using the component name as the DNS hostname.

Complete Multi-Component Example

Here is a complete Compose v4 specification for a typical 3-component web application: React frontend + Node.js API + MongoDB database.

{
  "version": 4,
  "name": "mywebapp",
  "description": "Full-stack web application",
  "owner": "YOUR_ZELID",
  "instances": 3,
  "compose": [
    {
      "name": "frontend",
      "description": "React frontend",
      "repotag": "yourusername/myapp-frontend:latest",
      "ports": [80],
      "containerPorts": [80],
      "domains": ["www.myapp.com"],
      "environmentParameters": ["REACT_APP_API_URL=http://api:3000"],
      "commands": [],
      "containerData": "/usr/share/nginx/html",
      "cpu": 0.5,
      "ram": 256,
      "hdd": 1
    },
    {
      "name": "api",
      "description": "Node.js API backend",
      "repotag": "yourusername/myapp-api:latest",
      "ports": [3000],
      "containerPorts": [3000],
      "domains": ["api.myapp.com"],
      "environmentParameters": [
        "NODE_ENV=production",
        "MONGODB_URI=mongodb://db:27017/myapp",
        "PORT=3000"
      ],
      "commands": [],
      "containerData": "/appdata",
      "cpu": 1,
      "ram": 512,
      "hdd": 2
    },
    {
      "name": "db",
      "description": "MongoDB database",
      "repotag": "mongo:7",
      "ports": [],
      "containerPorts": [27017],
      "domains": [],
      "environmentParameters": [],
      "commands": [],
      "containerData": "/data/db",
      "cpu": 1,
      "ram": 512,
      "hdd": 5
    }
  ]
}

Component Configuration Fields

Key Design Patterns

1. 1

   Database components: no public ports

   Set ports to an empty array [] for database components. They should only be accessible via internal DNS from other components, never from the public internet.

2. 2

   Frontend proxy to API

   Configure the frontend to communicate with the API using the internal DNS hostname (e.g., api:3000). For client-side requests, use a public API domain.

3. 3

   Separate domains per component

   Assign different domains to each public-facing component: www.myapp.com for frontend, api.myapp.com for the API.

4. 4

   Resource allocation

   Allocate resources based on workload. Databases need more storage (hdd) and RAM; APIs need more CPU; frontends are lightweight.