Setup CDN on Cloud Front

Using a CDN

These are the steps I used to setup up a cloud front distribution, and adjusting this template to use the CND.

Distribution

1. Go to https://console.aws.amazon.com/cloudfront/
2. Click Create Distribution
3. On the following, click "Get Started" under the Web Option.
4. Configure Distribution:

• Add your domain to "Origin Domain Name"
• Leave Origin Path blank (You can use this if pointing to an S3 bucket
• Give it an Origin Id (anything you want to identify this origin)
• Set Origin Protocol Policy to "Match Viewer" (your domain might require different settings)
• Leave everything else as is.
• Click "Create Distribution"

Use Distribution in production:

On your vue.config.js file, edit the baseUrl to point to your CDN in production:

    baseUrl: process.env.NODE_ENV === 'production'
       ? 'https://d24xbrclkiXXXX.cloudfront.net' //  Edit this with your distribution url
       : '/',

This will setup your build js files to fetch from the CND, and in local development to fetch from your domain. Django will serve the static assets to the CDN once, but then it will be cached on the CDN and served directly from there on all subsequent requests.

Additional Resources:

• http://whitenoise.evans.io/en/stable/django.html?highlight=cloudfront#instructions-for-amazon-cloudfront
• Restrict Cloudfront to Static Files

Screenshots