DEV Community

Cover image for AWS S3: A great way to share files through your browser!
Tom Spencer
Tom Spencer

Posted on • Edited on

AWS S3: A great way to share files through your browser!

This article forms part of a series of articles about the range of services that are available on AWS! In an earlier article I described why AWS Power Hour is such a great resource for learning about the wide range of AWS services. In this article I am continuing the theme of AWS dopeness by using S3 to share files.

WTF is S3?

Amazon Simple Storage Service (Amazon S3) is a safe, secure and highly scalable solution for object storage in the cloud. It is used for backup and storage, application or media hosting, high traffic website hosting or software delivery. To really understand S3 we need to clarify a few simple concepts. So let's get some points clear before we start:

  • AWS S3 stores data as objects within buckets. An object contains a file and optionally any metadata that describes the file.
  • In order to store objects in S3 you need to upload to a bucket. When you upload to your bucket you can set permissions on each of the objects within your buckets as well as any metadata.
  • You can also control access to your bucket, defining who can create, delete and list objects in the bucket.

Why is S3 good for me?

Everyone deserves a good series of holiday pics after busting their guts over Christmas.
Remote_Holidays_lzkzce
Send it through S3!

Publishing data on Amazon S3

You are on holiday and want to share some of your pictures with the world. How would you share if you forgot your web server?
server
Amazon S3 is a perfect means by which to store and retrieve any files from anywhere on the internet. Amazon S3 is a web server for your data but save you from paying for keeping a web server. When you store pictures or data on S3 you are only charged for data storage and requests and data transfer.
In this article we are going to show you how to share your holiday pics on Amazon S3!

In this article I presume you have set up your own AWS account. If you haven't done this check out the instructions here.

Create an AWS S3 Bucket

First create your bucket
Screenshot 2021-01-21 at 14.33.27
Then upload files:
Screenshot 2021-01-21 at 14.35.29

footprint-bucket

Screenshot 2021-01-21 at 14.45.18

Screenshot 2021-01-21 at 14.47.02

Screenshot 2021-01-21 at 14.47.09

Screenshot 2021-01-21 at 14.48.10

Screenshot 2021-01-21 at 14.48.18

Screenshot 2021-01-21 at 14.54.48

add-files

Grant access to the bucket

Go into your bucket and choose edit under block public access. Deselect the Block all public access option and then leave all the options unselected.
You will also need to add a bucket policy under bucket policy:
Screenshot 2021-02-19 at 20.06.34

You should add the correct configuration for your bucket then save the changes.

Configure static website hosting

Next you should choose edit on static website hosting and enable static website hosting. You will then have options to configure the index document and error document.

Enable Cross-Origin Resource Sharing

Finally, you should enable CORS with the following policy under CORS configuration:
Screenshot 2021-02-19 at 20.08.42

Top comments (1)

Collapse
 
brianhhough profile image
Brian H. Hough

This is awesome, Tom!! A great resource for anyone looking to plug S3 into their web development!