AWS Amplify S3 Storage Integration

Happy devSecOps

(λx.x)eranga

Published in

Effectz.AI

5 min readJul 26, 2022

Background

Amazon Simple Storage Service (Amazon S3) is a scalable, high-speed, web-based cloud storage service. The service is designed for online backup and archiving of data and applications on Amazon Web Services (AWS). It can stores computer files(which known objects) up to 5 terabytes in size. The objects are stored in containers called buckets. Basically, bucket is a container for objects. To store data in Amazon S3, we first need to create a bucket and specify a bucket name and AWS Region. There are three different types of access levels for the buckets public, protected or private. I have discussed more details about these access level in the final part of this blog. S3 provides it’s storage through a web services interface and was designed with a minimal feature set and created to make web-scale computing easier for developers. It is durable and available store, ideal for storing application content like media files, static assets, and user uploads. While designed for developers for easier web-scale computing, it provides 99.999999999 percent durability and 99.99 percent availability of objects.

AWS Amplify Storage module provides a simple mechanism for managing user content for the Amplify apps in public, protected or private storage buckets. The Storage category comes with built-in support for Amazon S3. In this post I’m goanna discuss about integrating S3 storage features into AWS Amplify app. All the source codes which related to this post available in the gitlab. Please clone the repo and continue the post.

Scenario

I’m designing simple image upload application with AWS Amplify. Following figure shows the architecture of the application. The uploaded images are stored in the AWS S3. A simple image upload frontend of the application built with React. Following are the main steps to follow.

1. Setup Amplify Project

First I have installed and configured the Amplify. Then created react frontend app and enabled Cognito auth in the project. In my previous post I have discussed detailed information about this steps. Please follow that post and setup the Amplify project first.

2. Enable Storage in Amplify Backend

Next I have added Storage for AWS Amplify app with amplify add storage. In here, I have selected the storage type as Content (Images, audio, video, etc.). The read, write, delete permission of the storage bucket only gave for Auth users. The friendly name of the Storage resources defined as rahasakstorage. The name of the S3 bucket popup as rahasakappd0b36f487b634febb526f987dc1a4f03. When setup is completed, it will create Amplify backend storage module in amplify/backend/storage/. The Amplify backend configurations which defined in the amplify/backend/backend-config.json file updated with the S3 storage.

3. Create S3 Storage Bucket

I can deploy the backend changes(with S3 integration) with the amplify push. When deploying it will create a S3 bucket with the name given rahasakappd0b36f487b634febb526f987dc1a4f03.

Now I can browse the S3 storage in AWS Console and view the created bucket and its configurations. Still there is not objects in the S3 storage bucket.

4. Integrate S3 Storage in Frontend Web

Finally I have created simple image upload frontend app with React. The uploaded images are saved in the S3 storage bucket. Following is the source of the React App.js file with file upload functions.

When run the React app with npm start it will launch the image upload web app. I can select the image and upload from it. The uploaded images will be published in the S3 bucket. All the images in that bucket will be fetched and displayed in the frontend as well.

5. Modify Bucket Access Level

There are three different access levels for the storage buckets, public, protected or private. Default access level for Storage module is public. Unless you configure Storage otherwise, all uploaded files will be publicly available for all users.

Public - Accessible by all users of your app. Files are stored under the public/ path in your S3 bucket.
Protected - Readable by all users, but writable only by the creating user. Files are stored under protected/{user_identity_id}/ where the user_identity_id corresponds to the unique Amazon Cognito Identity ID for that user.
Private - Only accessible for the individual user. Files are stored under private/{user_identity_id}/ where the user_identity_id corresponds to the unique Amazon Cognito Identity ID for that user.

In above scenario I did not specifically mentioned the access level, so all the saved files goes to public access level. Access level can be modified on Storage object as below.

As mentioned above, when files saved with private access level, they will be stored under private/{user_identity_id}/ directory where the user_identity_id corresponds to the unique Amazon Cognito Identity ID for that user. In following scenario I have uploaded files with two different users, there are two different folders created inside the /private bucket.