Static website on CDN
25 Feb 2015Serving static HTML from a web server is fast, serving from CDN is even faster :) CDN stores content on multiple servers located all over the world allowing visitors to access your website from a server closer to them.
Create distribution
Prepare a S3 website and create a CDN distribution.
CDN is enabled, not too much of an effort.
Gotchas
Index
Deploying your website on CDN might your website. S3 use “Index document” while CDN use “Default Root Object”.
S3 Index document and CDN Default Root Object are set to index.html
.
Files in bucket |
---|
/index.html |
/about/index.html |
Path | S3 will match | CDN will match |
---|---|---|
/ | /index.html | /index.html |
/about/ | /about/index.html | |
/about/index.html | /about/index.html | /about/index.html |
S3 match all 3 paths, CDN only match 2 out of 3 paths.
CDN only match paths against filenames; The exception is Default Root Object mapping /
to /index.html
.
Caching
Upload /about.html
and the new page soon becomes visible on your website. Thus, upload a new copy of /about.html
changes will only effect the S3 url, CDN url continues to serve a cached copy of the first file.
Invalidate the CDN url get a fresh copy of the file.
Automate
Uploading and invalidating CDN files manually is simply is not an option if you plan to maintain your website. You can automate your AWS console activities with s3cmd, run a single command to sync all files and invalidate old urls.
dan@binsy:~/Projects/jekyll-hello-world$ s3cmd sync _site/ s3://jekyll-web-site/ --delete-removed --cf-invalidate --cf-invalidate-default-index
WARNING: Module python-magic is not available. Guessing MIME types based on file extensions.
_site/about.html -> s3://jekyll-web-site/about.html [1 of 2]
5186 of 5186 100% in 0s 30.38 kB/s done
_site/feed.xml -> s3://jekyll-web-site/feed.xml [2 of 2]
3442 of 3442 100% in 0s 32.90 kB/s done
Done. Uploaded 8628 bytes in 1.0 seconds, 8.43 kB/s. Copied 0 files saving 0 bytes transfer.
Created invalidation request for 2 paths
Check progress with: s3cmd cfinvalinfo cf://E2418YH4DW6PVC/I2LU6LCXSAWE6L
Above command syncs local _site folder with S3’s jekyll-web-site container.
- _site folder is master copy
- Sync don’t transfer/update identical files
- New and changed files are uploaded to the container
- Updated files are uploaded to the container and
- Removed/Missing files are deleted from the container
- Updated/Deleted files are invalidated on CDN