📝
How we work (org handbook)
  • Home
  • Onboarding
  • Code of Conduct
  • Project Management
    • Project Initiation
      • Documentation and Checklists
      • Aligning with OpenUp's Mission and Vision
      • Getting Partners and Stakeholders on Board
      • Defining Project Parameters and Limitations (scope)
      • Product Management during the Project Initiation Phase
      • DRAFT COPY
    • Project Implementation
      • Project Planning
      • Agile, Scrum, and the Lean Startup Method
      • Stakeholder Management
      • Meetings
      • Communication
      • Team Management
      • Roles and responsibilities
    • Project Close-out
      • The Close-Out Report
      • Retrospective
      • Donor thanks
      • One page write-up
      • Blog article
      • Maintenance plan (if necessary)
    • Project overviews
      • Citizen Engagement App
      • Our Project List
      • Local Gov Programme
        • Business Portal
      • Tech Infrastructure
    • Project boards
  • How we work
    • Preferred tools
      • Tool sponsorships
    • Budgets & Finance
      • Taxes
        • VAT
        • PAYE and UIF
        • Workmen's compensation
        • Annual PAYE reconciliation
      • The Types of Budgets Used By OpenUp
      • When to Start Planning a Budget
      • Planning a Budget
      • How to Create a Budget
      • How to Spend a Budget
      • How to Adjust a Budget
      • Expense claims
      • Invoicing OpenUp
      • Capturing and approving invoices for payment
      • Allocating AWS costs to a project
      • Allocating Upwork transactions to projects
      • Software, Services and Hosting
      • Downloading Webflow invoices
    • Tool Development
      • Coding Roles
      • Tools For Coding
      • DESIGN
      • The Design Process: Step-By-Step
      • Tools Used In The Design Process
      • Quality Metrics: Design
      • Webflow export rules
      • CONTENT, WRITING, AND MEDIA
      • Creating Substance: The Role of Content in Tool Development
      • Creating Content: Step-By-Step
      • What Goes In Social Media
      • TRAINING & EVENTS
      • Event Planning
      • When, Where, and How to Hold a Training Session
      • Tools Used By Training and Events
      • User testing
      • Making government accessible
    • Outsourcing & Contracting
      • Why do we contract external workers?
      • Platforms We Use To Find Contractors
      • Contracting people for work
      • UpWork Contracting
    • Monitoring & Evaluation
    • Communications & Branding
      • Resizing images
      • Creating an email newsletter
      • Posting a blog
      • Sharing a blog post
      • Marketing Q &A
      • Official communications
      • Tracking app and campaign web traffic sources
    • Human Resources
      • Recruitment
      • Recruitment template: Project lead developer
      • DRAFT Recruitment template: Product owner
      • One-on-ones (1:1s)
    • Organisational Decision Records
      • ODR1: Organisational Decision Records
      • ODR2: Building dynamic web frontends using Webflow
    • Personal Information
    • Password management
  • Tech
    • Development guidelines
    • Preferred tech stack
    • Webflow project guide
      • How to build pages in Webflow so that content can be added using Javascript
    • Setting up a new server
    • Hosting on dokku
    • CDN in front of S3
    • Setting up a new Domain
    • CKAN
  • Product management
    • Our product design process
  • Codebridge
    • Codebridge - the space
Powered by GitBook
On this page
  • Bucket name matches hostname
  • Bucket name does not match hostname
  • Use CloudFront to serve the files from S3 instead of S3 directly
  • Point your CDN at cloudfront
  • Cloudflare

Was this helpful?

  1. Tech

CDN in front of S3

PreviousHosting on dokkuNextSetting up a new Domain

Last updated 4 years ago

Was this helpful?

A CDN in front of S3 can reduce the cost of transfers to the internet from user requests if files are served from the CDN cache at least some of the time.

Cloudfront doesn't have this benefit, as its egress cost is very close to that of S3. To get this cost saving, you have to use a cache outside AWS.

Bucket name matches hostname

This is the intended way to do this. S3 uses the hostname to identify the bucket that files should be served from.

Bucket name does not match hostname

If the bucket name does not match the hostname, e.g. because it's an old bucket and you don't want to move all data and integrations to a different bucket name and your CDN doesn't allow sending a custom hostname in the Host header, you can use the following setup. This is a bit complex, so consider whether it is the simplest to set up and maintain, or if you're just better off moving to a bucket that matches the domain.

Cloudflare's free tier doesn't allow sending a custom Host header, so we need another way to serve the files from the correct bucket. We use Cloudfront for that.

Use CloudFront to serve the files from S3 instead of S3 directly

  1. Start creating a cloudfront distribution

  2. Instead of writing a hostname, select the bucket name in the Origin field

  3. Leave cache settings to ignoring cookies, headers and query strings

  4. Select the cheapest Price Class (US, Canada, Europe)

  5. Add the intended hostname to the CNAMEs field.

    1. CloudFlare sends forwards the hostname to the upstream server, and we want the upstream (cloudfront) to know that it can serve content for this hostname.

    2. Cloudfront doesn't forward the host header by default, and knows how to server content directly from S3, so this host header won't be a problem for S3.

  6. Create a custom certificate using the AWS certificate manager

    1. Copy the ARN from the certificate manager into the custom certificae field as the suggestions don't refresh without reloading the page

  7. Save the distribution and copy the Distribution Name e.g. d14277ixqps6n1.cloudfront.net

Point your CDN at cloudfront

Point your CDN at the Distribution Name, NOT the intended hostname.

Point the intended hostname at your CDN.

Cloudflare

If you are using cloudflare as your CDN and DNS server, you can set it up as follows

  1. Create a CNAME for your static files, e.g. static.myapp.com

  2. Enter your CloudFront Distribution Name in the content field for the CNAME

  3. Leave Proxy Status on Proxied so that CloudFlare's servers cache and serve the content