Multi-tenant Angular deployments: CloudFront vs Cloudflare Pages

The article discusses two approaches to deploying multi-tenant Angular applications using CloudFront and Cloudflare Pages: a shared build with hostname routing versus independent deployments per tenant. Both models have their advantages and considerations.

The shared build model involves a single Angular build that serves multiple hostnames, with the edge identifying the host and passing tenant context to the application. This approach is suitable when tenants share a product, code, and release calendar. The CDN routes requests based on hostnames and serves the same frontend with tenant-specific configuration.

However, it relies on the backend to validate tenant and user identity on every call, as the frontend only receives tenant context at startup. Clear rules must be set to avoid trusting browser-supplied hostnames and to handle variations in API responses, HTML, or redirects based on the host.

In contrast, the independent deployment model involves a separate Angular deployment for each tenant. Each tenant has its own project, domain, and version, allowing for release independence, rollback, and freeze of individual tenants without affecting others. This model requires more pipelines, artifacts, and configuration but provides greater operational flexibility. It is suitable when tenants need independent artifact changes or when specific tenants require distinct validation, integration, or cache behavior.

The choice between the two models depends on the specific operational needs of the tenants. A shared build is appropriate when all tenants can accept the same version simultaneously, and differences lie in data, permissions, and server-validated configuration. Conversely, independent deployments are better when release, rollback, or freeze capabilities are required for specific tenants, or when tenant-specific configurations must be validated before publishing.

Regardless of the chosen model, several key factors must be verified before publishing. The backend must authorize both user and tenant identity, as hostname alone is not sufficient. Angular internal routes should remain functional after a browser refresh. Index.html and update files should not be trapped in long cache periods. Hashed assets should be able to reuse cache without hiding new shell versions.

Every custom domain should serve the expected artifact, and rollbacks should have identifiable artifacts or publications with post-rollback checks.

In summary, the decision between CloudFront and Cloudflare Pages for multi-tenant Angular deployments hinges on the boundary that matters: shared build with hostname routing versus independent deployment per tenant. The shared build simplifies the platform but requires careful tenant isolation through backend validation. Independent deployments offer greater operational flexibility but come with increased operational overhead.

By carefully considering the operational requirements and following the release checklist, developers can effectively choose the appropriate model for their multi-tenant Angular applications.