diff --git a/docs/deployment/frontend/cloudfront-cdn.md b/docs/deployment/frontend/cloudfront-cdn.md new file mode 100644 index 000000000..efeda194f --- /dev/null +++ b/docs/deployment/frontend/cloudfront-cdn.md @@ -0,0 +1,52 @@ +--- +path: "/docs/deployment/cdn/cloudfront" +title: "Configuring Cloudfront with Chatwoot" +--- + +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](./images/cloudfront/create-distribution.png) + +**Step 2**: Select "Web" as delivery method for your content. + +![web-delivery-method](./images/cloudfront/web-delivery-method.png) + +**Step 3**: Configure the Origin Settings as the following. + +![origin-settings](./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](./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](./images/cloudfront/extra-headers.png) + - **Access-Control-Request-Headers** + - **Access-Control-Request-Method** + - **Origin** + +**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](./images/cloudfront/cdn-distribution-settings.png) + +### Add ASSET_CDN_HOST in Chatwoot + +Your Cloudfront URL will be of the format `.cloudfront.net`. + +Set + +```bash +ASSET_CDN_HOST=.cloudfront.net +``` + +in the environment variables. diff --git a/docs/deployment/frontend/images/cloudfront/cache-behaviour.png b/docs/deployment/frontend/images/cloudfront/cache-behaviour.png new file mode 100644 index 000000000..638f2b492 Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/cache-behaviour.png differ diff --git a/docs/deployment/frontend/images/cloudfront/cdn-distribution-settings.png b/docs/deployment/frontend/images/cloudfront/cdn-distribution-settings.png new file mode 100644 index 000000000..4ffc9ad7d Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/cdn-distribution-settings.png differ diff --git a/docs/deployment/frontend/images/cloudfront/create-distribution.png b/docs/deployment/frontend/images/cloudfront/create-distribution.png new file mode 100644 index 000000000..dc8bad84c Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/create-distribution.png differ diff --git a/docs/deployment/frontend/images/cloudfront/extra-headers.png b/docs/deployment/frontend/images/cloudfront/extra-headers.png new file mode 100644 index 000000000..8fe2f0490 Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/extra-headers.png differ diff --git a/docs/deployment/frontend/images/cloudfront/origin-settings.png b/docs/deployment/frontend/images/cloudfront/origin-settings.png new file mode 100644 index 000000000..fce365d27 Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/origin-settings.png differ diff --git a/docs/deployment/frontend/images/cloudfront/web-delivery-method.png b/docs/deployment/frontend/images/cloudfront/web-delivery-method.png new file mode 100644 index 000000000..84a5cd1a3 Binary files /dev/null and b/docs/deployment/frontend/images/cloudfront/web-delivery-method.png differ diff --git a/docs/development/project-setup/environment-variables.md b/docs/development/project-setup/environment-variables.md index b77ca33ca..d9ae9542c 100644 --- a/docs/development/project-setup/environment-variables.md +++ b/docs/development/project-setup/environment-variables.md @@ -179,3 +179,7 @@ vapid_key.private_key ``` Or you can generate a VAPID key from https://d3v.one/vapid-key-generator/ + +### Using CDN for asset delivery + +With the release v1.8.0, we are enabling CDN support for Chatwoot. If you have a high traffic website, we recommend to setup CDN for your asset delivery. Read setting up [CloudFront as your CDN](/docs/deployment/cdn/cloudfront) guide.