> ## Documentation Index
> Fetch the complete documentation index at: https://docs.airys.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Cloudfront CDN

> Configure Cloudfront as a CDN for AirysChat assets

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

## Configure a Cloudfront distribution

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

<img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/create-distribution.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=138039580c3b5c9f8a7bd6dc9792af96" alt="create-distribution" width="3104" height="1978" data-path="self-hosted/images/cloudfront/create-distribution.png" />

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

<img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/web-delivery-method.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=9675f80ca1687c361f8aa31b71d1a762" alt="web-delivery-method" width="3104" height="1978" data-path="self-hosted/images/cloudfront/web-delivery-method.png" />

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

<img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/origin-settings.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=2dd8e0b4a3e1eba86e00e8c6516ac671" alt="origin-settings" width="3104" height="1978" data-path="self-hosted/images/cloudfront/origin-settings.png" />

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

**Step 4**: Configure Cache behaviour.

<img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/cache-behaviour.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=44fd485ed99816be51c03a785591e574" alt="cache-behaviour" width="3104" height="1978" data-path="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**.
  <img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/extra-headers.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=7ca439481e75e0807fc9bee4025f0b27" alt="extra-headers" width="1684" height="398" data-path="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 AirysChat.

<img src="https://mintcdn.com/airys/1FWn-RJM-8Ky_sbQ/self-hosted/images/cloudfront/cdn-distribution-settings.png?fit=max&auto=format&n=1FWn-RJM-8Ky_sbQ&q=85&s=f6a5acde916a1ccabb881f89231d3972" alt="cdn-distribution-settings" width="3104" height="1978" data-path="self-hosted/images/cloudfront/cdn-distribution-settings.png" />

## Add ASSET\_CDN\_HOST in AirysChat

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

Set

```bash theme={null}
ASSET_CDN_HOST=<distribution>.cloudfront.net
```

in the environment variables.

## Benefits of Using CDN

<Tip>
  Using a CDN provides several benefits for your AirysChat 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 theme={null}
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>