Hosting Mattermost Static Assets on CloudFront

Applies to: Self-Managed and Mattermost Cloud Customers
Purpose: Improve performance and offload static asset delivery using Amazon CloudFront

Overview

You can improve client performance by hosting Mattermost’s static assets (such as images, JavaScript, and CSS) on Amazon CloudFront. Hosting static assets on a CDN (Content Delivery Network) like CloudFront decreases page load time and reduces load on your Mattermost server.

Requirements

• An Amazon Web Services (AWS) account with access to CloudFront.

• Access to your Mattermost instance configuration files and server.

Step 1: Create an S3 Bucket

1. Sign in to your AWS Management Console.

2. Open the Amazon S3 service.

3. Create a new S3 bucket (e.g., mattermost-static-assets).

4. Make the bucket public or configure it for use with a CloudFront OAI (Origin Access Identity).

Step 2: Copy Static Assets

1. Locate the Mattermost static assets.
   These are typically located in:
   /opt/mattermost/client (self-hosted installs)

2. Copy the entire contents of the client directory to the new S3 bucket.

Example command:

aws s3 sync /opt/mattermost/client s3://mattermost-static-assets

Make sure the files are publicly accessible if not using an OAI.

Step 3: Create a CloudFront Distribution

1. Open the CloudFront console.

2. Choose Create Distribution.

3. Under Origin domain, choose your S3 bucket.

4. Set Viewer protocol policy to Redirect HTTP to HTTPS.

5. Under Default cache behavior, set:

   • Cache policy: CachingOptimized

   • Origin request policy: AllViewerExceptHostHeader

6. Create the distribution and note the Distribution Domain Name (e.g., d123abcd1234.cloudfront.net)

Step 4: Configure Mattermost to Use CloudFront

1. Update your Mattermost configuration.

Using config.json:

"AssetProxySettings": {
  "Enable": true,
  "CloudFrontURL": "https://d123abcd1234.cloudfront.net"
}

Or using System Console:

• Go to System Console > Environment > File Storage > Asset Proxy

• Enable the asset proxy

• Set the CloudFront URL

Step 5: Restart Mattermost

After updating the configuration, restart your Mattermost server for the changes to take effect.

Example:

sudo systemctl restart mattermost

Verification

1. Open your Mattermost site in a browser.

2. Open the browser’s developer tools (F12 or right-click > Inspect).

3. Go to the Network tab.

4. Refresh the page and look for assets loading from your CloudFront domain (e.g., d123abcd1234.cloudfront.net/static/...).