How to Set up Amazon S3 Upload Provider Plugin for Your Strapi App

Strapi - Sep 5 '22 - - Dev Community

In this tutorial, you will set up the Amazon S3 Upload Provider Plugin for your Strapi App to work with an Amazon S3 storage bucket

Author: Mark Munyaka

In this tutorial, I will show you how to set up the Amazon S3 Upload Provider Plugin for your Strapi App. You will first set up and configure an S3 storage bucket for your app. Then, you'll create a Strapi App using one of the starters provided by the Strapi Team. Next, you will install and configure the Amazon S3 Upload Provider Plugin. Finally, you will test the plugin by uploading some images to your Strapi backend. By the end of this tutorial, you should be able to use the Amazon S3 Upload Provider Plugin with any Strapi project.

What is Strapi?

Strapi is the leading open-source headless Content Management System (CMS). It is 100% Javascript, based on Node.js, and used to build RESTful APIs and GraphQL.

Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tools. Content teams use Strapi to autonomously manage all types of content and distribute it from one CMS to any channel be it websites, mobile apps, or connected devices.

A powerful feature of Strapi is its flexibility and extensibility. This is provided through plugins hosted on the Strapi Market. Plugins help add more functionality to your Strapi app. One of such features is uploading your media assets to a cloud provider using the Strapi dashboard.

Sometimes, you may want to host your app's media files in a different location from where your Strapi app is hosted. This is useful to save on storage, memory, and compute resource usage. Also, you can leverage cloud-based solutions like Content Delivery Networks (CDN) and cloud storage buckets for faster and more reliable loading of your media assets.

What is Amazon S3?

Amazon AWS is the biggest cloud provider. It offers Amazon S3, a cloud storage service you can use to host your media assets. Amazon S3 is scalable, reliable, secure, and performant. The Strapi Team built an Amazon S3 Upload Provider Plugin to help with uploading your media assets to your S3 storage bucket.

Prerequisites

To follow along with this tutorial you need the following:

A. Knowledge Prerequisites:

B. Software Prerequisites:

  • Operating System (Any of the following are supported):

    • Ubuntu >= 18.04 (LTS-Only)
    • Debian >= 9.x
    • CentOS/RHEL >= 8
    • macOS Mojave or newer (ARM not supported)
    • Windows 10 or 11
    • Docker - docker repo I used Ubuntu 20.04 LTS for this tutorial.

  • Node v14.x.x or v16.x.x

    Odd-number releases of Node are not supported (e.g. v13, v15). Download Node from the Download | Node.js page. I used Node v16.14.2.

  • npm or yarn

    I used npm v8.5.0. npm ships with your Node installation. If you prefer yarn, install it as an npm package. Check Installation | Yarn.

  • Strapi v4.x.x

    I used Strapi v4.3.2. You will install Strapi using npm or yarn.

  • A text editor of your choice

  • Git for Version control [Download Git from the Git - Downloads page]

  • Git Bash (for Windows users)

    Git Bash ships with your Git download. The tutorial uses Unix shell commands. Git Bash can run UNIX shell commands in Windows.

  • Web Browser (any Chromium-based browser)

Hardware Prerequisites

  • At least 1 CPU core (Highly recommended at least 2)
  • At least 2GB of RAM (Moderately recommended 4)
  • Minimum required storage space recommended by your OS or 32 GB of free space

Additional Prerequisites

You will also need an AWS Account. A credit card is required to open one. AWS offers a 12-month free trial to test out the Amazon S3 bucket with 5GB of free storage.

Set up Strapi

We will start off by creating a Strapi app using one of the templates provided by the Strapi Team.

NOTE: If you prefer testing the ready-made app, you can clone the Github repo.

We will use the blog template. The template is installed using npm.

  1. Open up your terminal and navigate to your home folder. 
    $ cd ~
Enter fullscreen mode Exit fullscreen mode
  1. Create a directory to store your project, name it strapi-aws-s3. 
    ~$ mkdir strapi-aws-s3
Enter fullscreen mode Exit fullscreen mode
  1. Change the directory to the newly created directory, strapi-aws-s3. 
    ~$ cd strapi-aws-s3
Enter fullscreen mode Exit fullscreen mode
  1. Enable source control for your project by initializing a git repository. 
    ~/strapi-aws-s3 $ git init
Enter fullscreen mode Exit fullscreen mode
  1. Create your Strapi app using the blog template. 
    ~/strapi-aws-s3 $ npx create-strapi-app backend --quickstart --template @strapi/template-blog@1.0.0 blog

    # OR

    ~/strapi-aws-s3 $ yarn create strapi-app backend --quickstart --template @strapi/template-blog@1.0.0 blog
Enter fullscreen mode Exit fullscreen mode

This command creates your Strapi app in the folder named backend. The --quickstart flag sets up your Strapi app with an SQLite database. The --template flag retrieves the specific template to install in your app. In this case, we retrieved the template-blog version 1.0.0, hosted by strapi on GitHub.

Your folder structure in strapi-aws-s3 after installing Strapi should look similar to this:

    ~/strapi-aws-s3 $ tree -L 2 -a
    .
    ├── backend
    │   ├── build
    │   ├── .cache
    │   ├── config
    │   ├── data
    │   ├── database
    │   ├── .editorconfig
    │   ├── .env
    │   ├── .env.example
    │   ├── .eslintignore
    │   ├── .eslintrc
    │   ├── favicon.ico
    │   ├── .gitignore
    │   ├── node_modules
    │   ├── package.json
    │   ├── public
    │   ├── README.md
    │   ├── src
    │   ├── .strapi-updater.json
    │   ├── .tmp
    │   └── yarn.lock
    ├── .git
    ├── LICENSE
    └── README.md
Enter fullscreen mode Exit fullscreen mode

After installation, your app should start automatically. Visit http://localhost:1337/admin in your browser and register your details in the Strapi Admin Registration Form.

Strapi Admin Registration

NOTE: If Strapi did not start automatically, run these commands:

    ~/strapi-aws-s3 $ cd backend

    ~/strapi-aws-s3/backend $ npm run develop 
    # OR
    ~/strapi-aws-s3/backend $ yarn develop
Enter fullscreen mode Exit fullscreen mode

npm run develop starts your Strapi project development server in watch mode. Watch mode changes in your Strapi project will trigger a server restart.

Creating a new user logs you into the Strapi Dashboard.

Strapi Dashboard

The blog template for our Strapi project comes preloaded with the following:

  • Content-Type Builder Plugin
    • 4 Collection types (Article, Category, User and Writer)
    • 2 Single types (Global and Homepage)
    • 2 Components (Sections and Shared)
  • Media Library Plugin
    • 10 image assets
  • User-Permissions Plugin (Public Roles)
    • The permissions for the Collection-types and Single-types are already configured to allow READ access to any Public unauthenticated user.

The left-hand side of the Strapi dashboard lists the Content Manager containing your content types. The PLUGINS option lists the plugins installed in your project. Content-Type Builder Plugin and Media Library Plugin are installed by default in your Strapi app. Select Media Library to see the image assets loaded with the blog template.

Media Library Upload Plugin

The Media Library Plugin is what you will use to upload images to your Amazon S3 bucket. If the Amazon S3 Upload Provider Plugin is working, images you upload in the Media Library should appear in your S3 bucket automatically.

Install '@strapi/provider-upload-aws-s3' Plugin

Stop your strapi server by pressing Ctrl plus C in your terminal. Install @strapi/provider-upload-aws-s3:

    ~/strapi-aws-s3/backend $ npm install @strapi/provider-upload-aws-s3 --save
    # OR
    ~/strapi-aws-s3/backend $ yarn add @strapi/provider-upload-aws-s3
Enter fullscreen mode Exit fullscreen mode

Configure Plugin

A. Provider Configuration

Create a file named plugins.js in your config folder

    ~/strapi-aws-s3/backend $ touch config/plugins.js
Enter fullscreen mode Exit fullscreen mode

Add this configuration code to plugins.js:

    // ~/strapi-aws-s3/backend/config/plugins.js

    module.exports = ({ env }) => ({
      upload: {
        config: {
          provider: 'aws-s3',
          providerOptions: {
            accessKeyId: env('AWS_ACCESS_KEY_ID'),
            secretAccessKey: env('AWS_ACCESS_SECRET'),
            region: env('AWS_REGION'),
            params: {
              Bucket: env('AWS_BUCKET'),
            },
          },
          actionOptions: {
            upload: {},
            uploadStream: {},
            delete: {},
          },
        },
      },
    });
Enter fullscreen mode Exit fullscreen mode

This enables the plugin to work in your app. AWS_ACCESS_KEY_ID, AWS_ACCESS_SECRET, AWS_REGION and AWS_BUCKET are environment variables. You will later assign their values in the .env file for your Strapi project after setting up the Amazon S3 bucket.

B. Security Middleware Configuration
Due to the default settings in the Strapi Security Middleware, you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object below instead as explained in the middleware configuration documentation.

Edit the middlewares.js file in your config folder:

    // ~/strapi-aws-s3/backend/config/middlewares.js

    module.exports = [
      'strapi::errors',
      /* Replace 'strapi::security', with this snippet */
      /* Beginning of snippet */
      {
        name: 'strapi::security',
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              'connect-src': ["'self'", 'https:'],
              'img-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'yourBucketName.s3.yourRegion.amazonaws.com',
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'yourBucketName.s3.yourRegion.amazonaws.com',
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      /* End of snippet */
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];
Enter fullscreen mode Exit fullscreen mode

Later you will replace 'yourBucketName.s3.yourRegion.amazonaws.com' with the link to your S3 bucket. Refer to AWS S3 | Strapi Market for more information on configuring the plugin.

Set up AWS

The next step here is to set up AWS as part of our project.

Create AWS Account

Sign up for an AWS account on the AWS Console - Signup page if you don’t have one already. Refer to the Create and activate an AWS account guide for additional information related to the AWS account creation process.

Create Administrator IAM Admin User and Group

Best practices for using AWS Amazon services state to not use your root account user and to use instead the IAM (AWS Identity and Access Management) service. Your root user is therefore only used for a very few select tasks. For example, for billing, you create an Administrator user and Group for such things. Other routine tasks can also be done with a regular IAM User.

Follow the “Creating your first IAM admin user and user group - AWS Identity and Access Management” guide to create an IAM admin user and user group using your AWS root account in the AWS Management Console.

Create an IAM User for your Strapi App

A. Set User Details:

  • Sign out of your root user account and sign in to your Administrator user account you just created.

Sign in as IAM Administrator user

  • Visit the IAM Console by selecting Services then All services, scroll down and select IAM or go here to IAM Console.

Go to IAM Console

  • Click on Users in the left-hand menu and select Add User.

Select Add users in Users IAM Console

  • Provide a Username. I used Strapi-Admin.
  • Access Type: Check both Programmatic access and AWS Management Console access.
  • Autogenerate a password or click Custom password and provide one.
  • OPTIONAL: For simplicity, uncheck the Require password reset.
  • Click Next: Permissions.

Set user details for Strapi Admin

Set up Permissions for Amazon S3

Follow the steps below to set up permissions for Amazon S3.

  • Click Create group and name it. Then, choose appropriate policies under Policy Name:
    • Search for s3 and check AmazonS3FullAccess.
    • Click Create group.
  • Click to Add user to group and check the Developers group to add the new user.
  • Click Next: Tags.

Enable Access to Amazon S3

  • Click Add user to group and check the Developers group to add the new user.

Check newly added user group

Add Tags

This step is **optional and based on your workflow and project scope.** To begin, click Next: Review.

Retrieve Credentials 'Access Key ID' and 'Secret Access Key'

A. Review:
Review the information and ensure it is correct. Use Previous to correct anything. If satisfied, click Create user.

Review User Information

B. Take note of the credentials related to your account:
If you do not do these steps, you will have to reset your Access key ID and Secret access key later.

  • Download the .csv file and store it in a safe place. This contains the username, login link, access key ID and secret access key.

You can decide to keep these details in your password manager.

Retrieve User Credentials

  • Click on the AWS Management Console Access sign-in link. This will log you out of Administrator.

For more information, check out creating a regular user for the creation and management of your Strapi project.

Create Amazon S3 Storage Bucket

Log into your AWS Management Console as the new user you just created Strapi-Admin.

Sign in as Strapi-Admin IAM user

Go to Services, click All services, scroll down, and select S3 Scalable Storage in the Cloud to open up the Amazon S3 Console.

Select S3 in Services Menu

Click on Create bucket in the Amazon S3 console.

Create bucket

Give your bucket a unique name. I named mine strapi-aws-s3-images-bucket. Select the most appropriate region for your bucket.

Name your bucket

For Object Ownership, select ACLs enabled to enable access to the S3 bucket from your Strapi backend. Select Bucket owner preferred for the plugin to work.

S3 Bucket Object Ownership

Under Block Public Access settings for this bucket, do the following:

  • Uncheck Block all public access and set the permissions as follows:
    • Uncheck Block public access to buckets and objects granted through new access control lists (ACLs) (Recommended)
    • Uncheck Block public access to buckets and objects granted through any access control lists (ACLs)
    • Check Block public access to buckets and objects granted through new public bucket policies
    • Check Block public and cross-account access to buckets and objects through any public bucket policies
  • Check I acknowledge that the current settings might result in this bucket and the objects within becoming public under the Turning off block all public access might result in this bucket and the objects within becoming public warning. Block Public Access settings for this bucket

Leave the rest of the settings as is and click Create bucket. Your new bucket should now be listed in the Amazon S3 Console.

Newly created bucket listed in the console

Test Demo App

The next stage involves testing the demo app.

Update Strapi Backend

Update your Strapi backend with new credentials from your newly created S3 bucket. Update .env with the following:

    /* ~/strapi-aws-s3/backend/.env */
    /* Add this after the last line */

    AWS_ACCESS_KEY_ID=<Access Key ID>
    AWS_ACCESS_SECRET=<Secret access key>
    AWS_REGION=eu-west-2
    AWS_BUCKET=strapi-aws-s3-images-bucket
Enter fullscreen mode Exit fullscreen mode

NOTE: Replace and with the credentials in the .csv file you downloaded after creating an IAM role for your S3 bucket. For AWS_REGION input the region where your bucket is hosted. My bucket is hosted at eu-west-2.

Update the middlewares.js file in your config folder by replacing yourBucketName.s3.yourRegion.amazonaws.com with the link to your S3 bucket. In my case the link becomes strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com like so:

    // ~/strapi-aws-s3/backend/config/middlewares.js

    module.exports = [
      'strapi::errors',
      {
        name: 'strapi::security',
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              'connect-src': ["'self'", 'https:'],
              'img-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com', // change here
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com', // change here
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];
Enter fullscreen mode Exit fullscreen mode

Build your backend and start your server.

    ~/strapi-aws-s3/backend $ npm run build
    ~/strapi-aws-s3/backend $ npm run develop

    #OR

    ~/strapi-aws-s3/backend $ yarn build
    ~/strapi-aws-s3/backend $ yarn develop
Enter fullscreen mode Exit fullscreen mode

Upload An Image

Visit the Media Library plugin page, http://localhost:1337/admin/plugins/upload. Click + Add new assets. Browse for an image you want to add from your computer and select Upload 1 asset to the library and watch the magic happen.
Upload image to Amazon S3 bucket using Strapi Admin

In a few moments, you should see your newly uploaded image in your Media Library as well as your Amazon S3 Bucket.

Newly Uploaded Image in Media Library

Visit https://s3.console.aws.amazon.com/s3/buckets/*?region=* to see the newly uploaded image in your S3 bucket.

Newly Uploaded Image in Amazon S3 Bucket

Delete an Image

Delete the image from the Media Library. The image is automatically deleted form the Amazon S3 bucket.

Delete image in Strapi Admin Dashboard

Confirm the deletion by refreshing the link to your bucket. The bucket is now empty. Deleting the image from the Strapi Admin Dashboard worked.

No objects in Amazon S3 Bucket

You have successfully set up the Amazon S3 Upload Provider Plugin.

Conclusion

In this tutorial, we created a Strapi project from a blog template. With just one command, our backend was already set as a REST API endpoint.

We installed and configured the AWS S3 provider for Strapi uploads (@strapi/provider-upload-aws-s3) plugin in our Strapi project folder. Then, we created an Amazon S3 bucket with the recommended IAM policies to manage it.

Finally, we tested our app and saw the ease with which we can upload and delete images in the Amazon S3 bucket using the Strapi Admin Media Library. Check out the Github project repo.

What Next?

Check out Deploying Strapi to your own VPS and other deployment options to see how you can deploy your app. If you are interested in building a frontend for this app checkout Build a blog with Next (React.js) and Strapi.

I hope this tutorial has provided enough information and insight to help you set up the Amazon S3 provider with full confidence. If you have any issues, feel free to comment. The Strapi community is always available for any issues.

Image
Buy verified BYBIT account

webdev, javascript, beginners, programming
Image
12 Companies Are Leading The Way In Bifold Repairs Near Me
Image
Crushed Hacktoberfest 2024! 🚀 Earned My Level 4 Badge and Here's What I Learned 🦥💻

opensource, hacktoberfest, github, hacktoberfestchallenge
Image
What is Aws Macie ? How to discover data with Macie ?

aws, macie, awssec, security
Image
Test Coverage Tools: A Complete Guide

webdev, javascript, programming, tutorial
Image
The Full Guide To Assessment ADHD
Image
A Peek In Assessed For ADHD's Secrets Of Assessed For ADHD
Image
A silly contraption using a JavaScript physics engine

javascript, webdev, programming, tutorial
Image
Jak stworzyć wymarzone mieszkanie: od inspiracji do realizacji
Image
Vwoollo Hoodie

fashion, hoodies
Image
Collaboration with Microsoft Teams: Best Practices for 2024

microsoft, microsoft365, azure, cloud
Image
Carsicko Hoodie: The Perfect Fusion of Fashion and Function
Image
Local SEO Strategies That Will Shine in 2025

seo, seocompany, seoserviceprovider, seoagency
Image
A Step-by-Step Guide to Getting Your Certificate in Content Writing
Image
🧟‍♂️ Software Engineering Postmortem: Zombie Rampage

softwareengineering, unrealengine, gamedev
Image
JSON Simplified Explanation

json, webdev, javascript, react
Image
Can I retrieve funds from a crypto scammer? GrayHat Hacks Contractor claims it's possible.

webdev, beginners, opensource, discuss
Image
11 Creative Methods To Write About Bi Fold Door Repair Near Me
Image
ETH完美套利

codepen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .