In this screencast we look into how we can host files on Amazon S3 (Simple Storage Service) in such a way that we can link to an use those assets, but not make them entirely public. Only make them accessible for logged in, subscription having users in The Lodge.

At the time I recorded this screencast, the plan was to use HTML5 <video> and have the <source> elements inside link to Amazon hosted (and protected) video. Since then I switched to using Vimeo to display the videos (protected only to this site via Vimeo PRO. But, the idea is still relevant, especially because we still offer the directly downloads through S3.

Why S3? Hosting the files on my own web server for download is totally impractical. Far too much bandwidth for regular hosting, and I don't want the same server in charge of displaying my website being busy serving up enormous files with super long connections. S3 is perfect for this kind of thing.

We accomplish these "secure" links by:

  1. Uploading the files to S3 (via a Mac app Transmit, which has easy S3 support)
  2. Create a custom field on the Lodge video pages with the file name
  3. Generate an expiring link from the file name
  4. Use link where needed in the template

We end up making the link generator a separate file so we can just include it on any page that needs to do this. Kind of nice that it's PHP and not JavaScript, so our secret keys needed to generate these links are inherently protected.

Comments

  1. Max
    Permalink to comment#

    I was waiting for this video the whole time, finally I know how to work with files from S3 buckets without making the whole bucket public with some weird policy stuff. Thanks!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.