---
title: Cloudfront CDN
description: Configure Cloudfront as a CDN for Chatwoot assets
sidebarTitle: Cloudfront CDN
---

This document helps you to configure Cloudfront as the asset host for Chatwoot. If you have a high traffic website, we would recommend setting up a CDN for Chatwoot.

## Configure a Cloudfront distribution

**Step 1**: Create a Cloudfront distribution.

![create-distribution](/self-hosted/images/cloudfront/create-distribution.png)

**Step 2**: Select "Web" as delivery method for your content.

![web-delivery-method](/self-hosted/images/cloudfront/web-delivery-method.png)

**Step 3**: Configure the Origin Settings as the following.

![origin-settings](/self-hosted/images/cloudfront/origin-settings.png)

- Provide your Chatwoot Installation URL under Origin Domain Name.
- Select "Origin Protocol Policy" as Match Viewer.

**Step 4**: Configure Cache behaviour.

![cache-behaviour](/self-hosted/images/cloudfront/cache-behaviour.png)

- Configure **Allowed HTTP methods** to use *GET, HEAD, OPTIONS*.
- Configure **Cache and origin request settings** to use *Use legacy cache settings*.
- Select **Whitelist** for *Cache Based on Selected Request Headers*.
- Add the following headers to the **Whitelist Headers**.
![extra-headers](/self-hosted/images/cloudfront/extra-headers.png)
  - **Access-Control-Request-Headers**
  - **Access-Control-Request-Method**
  - **Origin**
- Set the **Response headers policy** to **CORS-With-Preflight**

**Step 5**: Click on **Create Distribution**. You will be able to see the distribution as shown below. Use the **Domain name** listed in the details as the **ASSET_CDN_HOST** in Chatwoot.

![cdn-distribution-settings](/self-hosted/images/cloudfront/cdn-distribution-settings.png)

## Add ASSET_CDN_HOST in Chatwoot

Your Cloudfront URL will be of the format `<distribution>.cloudfront.net`.

Set

```bash
ASSET_CDN_HOST=<distribution>.cloudfront.net
```

in the environment variables.

## Benefits of Using CDN

<Tip>
Using a CDN provides several benefits for your Chatwoot installation:
</Tip>

1. **Faster Asset Loading**: Assets are served from edge locations closer to users
2. **Reduced Server Load**: Static assets are served from CDN, reducing load on your application server
3. **Better User Experience**: Faster page load times improve user experience
4. **Global Availability**: Assets are cached globally for users worldwide
5. **Bandwidth Savings**: Reduces bandwidth usage on your origin server

## Troubleshooting

### CORS Issues

If you encounter CORS issues after setting up CloudFront:

1. Ensure the CORS headers are properly configured in CloudFront
2. Verify that your `CORS_ORIGINS` environment variable includes your CDN domain:

```bash
CORS_ORIGINS=https://yourdomain.com,https://d1234567890.cloudfront.net
```

### Cache Invalidation

To invalidate CloudFront cache after updating assets:

1. Go to CloudFront console
2. Select your distribution
3. Create an invalidation for `/*` to clear all cached assets

### SSL Certificate

For custom domain names with CloudFront:

1. Request an SSL certificate in AWS Certificate Manager (ACM)
2. Configure the certificate in your CloudFront distribution
3. Update your DNS to point to the CloudFront distribution

<Note>
SSL certificates for CloudFront must be requested in the US East (N. Virginia) region regardless of where your distribution is located.
</Note>