# 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
```

{% file src="<https://988932576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXbqCrcU65ULbgldtjmvZ%2Fuploads%2FOlu6EGgmshto8saQruuJ%2Fcloudfront-s3-frontend.yaml?alt=media&token=a454eb1b-dd50-4a6a-85c7-2ab0996eb127>" %}

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&#x20;

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

***