DEV Community

Cover image for Deploy React App to AWS S3 Bucket with GitLab Pipeline
Ali Ogun for AWS Community Builders

Posted on • Originally published at Medium

Deploy React App to AWS S3 Bucket with GitLab Pipeline

How to deploy React App into AWS S3 Bucket?

In this article step by step I will try to explain how to deploy a basic React App on AWS S3 bucket and how to automate this process with GitLab CI/CD pipeline.

I have prepared a simple primitive React App. With Dockerfile, I dockerize my React App. I try to keep this docker image as small as possible with .dockerignore file. I deploy my React App on to AWS S3 bucket. In order to improve the efficiency, I built a CI/CD pipeline on GitLab.


  • Static Web Page — I have a one single static page built with React App.

  • **AWS Account — **This little deployment will be in free-tier limits.

  • GitLab Account — We need this to build a CI/CD pipeline.

📦 Dockerize

In order to keep my docker image as small as possible, I’ve done 2 things:

  • I’ve used .dockerignore file to excluded unnecessary files

  • I’ve used node:slim as base image. As the word "slim" imply, this image is slim version of node image. I've used node image to be able to use npm package manager.

In my Docker image, I’ve used two main commands. First, I’ve build the artifact form the files with:

$ npm run build
Enter fullscreen mode Exit fullscreen mode

Then, I’ve run the artifact with:

$ npm start
Enter fullscreen mode Exit fullscreen mode

🚀 Deployment

I use a GitLab CI/CD pipeline to carry out the deployment which I will cover in upcoming section more detailed.

♾️ CI/CD Pipeline

For pipeline, I use GitLab CI/CD. In order to provision my pipeline, I use .gitlab-ci.yml file.

It looks like this:

IMPORTANT: Before use of this file, please remember to add those:


  • AWS_ACCESS_KEY (I added as Masked Variables)

  • AWS_SECRET_KEY (I added as Masked Variables)

⚙️ Pipeline Architecture

I designed my pipeline on GitLab CI/CD with 4 stages and 4 jobs as seen in the figure:

For more information, you can click here. Anyway, my CI/CD pipeline’s stages are like down below:

  • Build — Here I build the artifact.

  • Test — Here I do tests with npm test command. One important thing is, npm test requires an interactive use. In order to turn this off, I've used CI=true parameter.

  • **Image-push — **In this stage I dockerize my React App. And then I push the image to the AWS ECR.

  • **Deploy — **In deploy job, I am deploying my React App to AWS S3. By this way I am hoping to access my React App and represent a demo. You can click here to check how it looks like.

Here is the link of my React App, if you would like to take a look at it:

If you are not willing to click the link, let me leave here an image for you to see how it works:)

☁️ Amazon Web Services

I use AWS as Cloud Provider in this projet. I tried to use Free-tier services. Anyway, it is always good practice to set an alert threshold in budget. Watch out your money!


Hosting a static website using Amazon S3
GitLab CI/CD | GitLab

Top comments (0)