> ## 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 o Cloudfront como um CDN para os assets do AirysChat

Este documento ajuda você a configurar o Cloudfront como o host de assets para o AirysChat. Se você tiver um site de alto tráfego, nós recomendaríamos configurar um CDN para o AirysChat.

## Configure uma distribuição do Cloudfront

**Passo 1**: Crie uma distribuição do Cloudfront.

<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" />

**Passo 2**: Selecione "Web" como método de entrega para seu conteúdo.

<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" />

**Passo 3**: Configure os Origin Settings (Configurações de Origem) da seguinte forma.

<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" />

* Forneça a URL de Instalação do seu AirysChat em Origin Domain Name.
* Selecione "Origin Protocol Policy" como Match Viewer.

**Passo 4**: Configure o Cache behaviour (Comportamento do cache).

<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** para usar *GET, HEAD, OPTIONS*.
* Configure **Cache and origin request settings** para usar *Use legacy cache settings*.
* Selecione **Whitelist** em *Cache Based on Selected Request Headers*.
* Adicione os seguintes cabeçalhos a **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**
* Defina a **Response headers policy** para **CORS-With-Preflight**

**Passo 5**: Clique em **Create Distribution**. Você poderá ver a distribuição como mostrado abaixo. Use o **Domain name** listado nos detalhes como o **ASSET\_CDN\_HOST** no 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" />

## Adicione ASSET\_CDN\_HOST no AirysChat

A sua URL do Cloudfront terá o formato `<distribution>.cloudfront.net`.

Defina

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

nas variáveis de ambiente.

## Benefícios do Uso de CDN

<Tip>
  O uso de um CDN fornece vários benefícios para a sua instalação do AirysChat:
</Tip>

1. **Carregamento de Assets Mais Rápido**: Os assets são servidos de localizações de borda mais próximas aos usuários
2. **Carga Reduzida no Servidor**: Assets estáticos são servidos a partir da CDN, reduzindo a carga no seu servidor de aplicação
3. **Melhor Experiência do Usuário**: Tempos de carregamento de página mais rápidos melhoram a experiência do usuário
4. **Disponibilidade Global**: Os assets são cacheados globalmente para usuários no mundo todo
5. **Economia de Largura de Banda**: Reduz o uso de largura de banda no seu servidor de origem

## Solução de problemas

### Problemas de CORS

Se você encontrar problemas de CORS após a configuração do CloudFront:

1. Certifique-se de que os cabeçalhos de CORS estejam devidamente configurados no CloudFront
2. Verifique se a sua variável de ambiente `CORS_ORIGINS` inclui o seu domínio de CDN:

```bash theme={null}
CORS_ORIGINS=https://yourdomain.com,https://d1234567890.cloudfront.net
```

### Invalidação de Cache

Para invalidar o cache do CloudFront após atualizar os assets:

1. Vá para a console do CloudFront
2. Selecione a sua distribuição
3. Crie uma invalidação para `/*` para limpar todos os assets cacheados

### Certificado SSL

Para nomes de domínio personalizados com o CloudFront:

1. Solicite um certificado SSL no AWS Certificate Manager (ACM)
2. Configure o certificado na sua distribuição do CloudFront
3. Atualize o seu DNS para apontar para a distribuição do CloudFront

<Note>
  Certificados SSL para o CloudFront devem ser solicitados na região US East (N. Virginia), independentemente de onde sua distribuição esteja localizada.
</Note>