Create S3 Bucket and CloudFront Distribution

Web Application Bucket Configuration

FinOps Center delivers its web application frontend through a secure Amazon S3 + Amazon CloudFront distribution. This component provisions the frontend hosting layer using a customer-owned custom domain and SSL/TLS certificate, ensuring compliance with AWS security best practices and enterprise DNS requirements.

This step is mandatory and must be completed before any users access FinOps Center.

---

Overview

This CloudFormation stack deploys:

• A private, encrypted S3 bucket to store the FinOps Center frontend assets • A CloudFront distribution secured by your custom domain • An ACM-issued SSL certificate for HTTPS • Secure access using CloudFront Origin Access Control (OAC) • SPA routing support for modern web application frameworks • Centralized tagging for governance and cost allocation

The stack provisions the public entry point to FinOps Center.

---

Required Prerequisites

Before launching this stack, complete the following:

Requirement	Description
Custom domain	A DNS name you control (for example: finops.company.com)
ACM Certificate	Must be issued in us-east-1 for your domain
Route 53 or external DNS access	Required to create the DNS alias to CloudFront
IAM permissions	Permissions to create CloudFront, S3, ACM, and IAM resources

---

CloudFormation Parameters

Parameter	Description
Custom Domain Name	Public DNS name for FinOps Center (for example finops.company.com)
S3 Bucket Name	Globally unique bucket for frontend assets
ACM Certificate ARN	ARN of SSL certificate in us-east-1
Default Root Object	Default document (normally index.html)
SPA Error Page Path	SPA routing handler (/index.html)
CloudFront Price Class	Determines CloudFront edge locations
HTTP Version	HTTP protocol version
Enable Compression	Enables Brotli/Gzip
Minimum TLS Version	Enforces TLS security baseline
Enable IPv6	Enables IPv6
Error Caching TTL	TTL for error response caching
Environment	Tagging (dev/stage/prod)

These parameters map directly to the FinOps Center CloudFormation template

---

Deployment Steps

Step 1 – Launch the CloudFormation Stack

From the AWS Console:

CloudFormation → Create stack → With new resources
Upload template → cloudfront-s3-frontend.yaml

9KB

cloudfront-s3-frontend.yaml

Open

Provide your custom domain name, SSL certificate ARN, and bucket name.

---

Step 2 – Validate Stack Completion

After the stack completes:

• Confirm CloudFront distribution is Enabled

• Confirm S3 bucket is private and encrypted

• Confirm ACM certificate is attached to the distribution

---

Step 3 – Create DNS Alias

Create a DNS record:

Record	Value
finops.company.com	CloudFront Distribution Domain Name

This is required to activate HTTPS access.

---

Step 4 – Upload Frontend Assets

Upload FinOps Center UI files to the S3 bucket provisioned by the stack.

---

Step 5 – Invalidate CloudFront Cache

Use the CLI output provided by the stack:

aws cloudfront create-invalidation --distribution-id <ID> --paths "/*"

---

Security Architecture

Control	Implementation
Private S3 bucket	Public access blocked
Origin Access Control	Only CloudFront can read S3
Encryption at rest	AES-256
Encryption in transit	TLS 1.2+
DNS validation	ACM validated certificates
SPA routing	Custom CloudFront error handling

---

Outputs with Notation

Output	Purpose	Need for FinOps Center Installation
S3BucketName	Frontend bucket	YES
CloudFrontDistributionId	Cache invalidation	YES
CloudFrontDomainName	DNS mapping
WebsiteURL	Public FinOps Center URL

---