Deploy React App to AWS S3 Bucket with GitLab Pipeline
Tags: react, aws, cloud, cicd
Published: 2023-09-09 12:56:07

## 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.

![](https://cdn-images-1.medium.com/max/2400/1*k5VWvcq6ia_-Xu1TKTxZGA.png)

I have prepared a simple primitive React App. With [Dockerfile](https://github.com/byaliego/Final_Project-DevOps_Bootcamp/blob/main/react-app/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.

## Prerequisites

* **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.

![](https://cdn-images-1.medium.com/max/2800/1*XtK2paaaILS3rDSUhaGFqA.png)

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

    $ npm run build

Then, I’ve run the artifact with:

    $ npm start

## 🚀 Deployment

I use a GitLab CI/CD [pipeline](https://github.com/byaliego/Final_Project-DevOps_Bootcamp/edit/main/kubernetes/README.md#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](https://docs.gitlab.com/ee/ci/). In order to provision my pipeline, I use .gitlab-ci.yml file.

![](https://cdn-images-1.medium.com/max/2000/1*5_RENgafvH9j6OPh_CSnNQ.png)

It looks like this:

![](https://cdn-images-1.medium.com/max/4412/1*uCLlAjeZSm2OmFn_J6qo3g.png)

![](https://cdn-images-1.medium.com/max/3868/1*q6-xr5tCS4EPvshLeKGNgA.png)

![](https://cdn-images-1.medium.com/max/2472/1*RHG6tkqzWUE_pafSM-rcog.png)

![](https://cdn-images-1.medium.com/max/4496/1*w7blwdRugLIa_JH5gc5tJw.png)

![](https://cdn-images-1.medium.com/max/4260/1*qT4cBST0hGRoijKsJLCM7Q.png)

![](https://cdn-images-1.medium.com/max/4224/1*d2fj2pDQW4sJ2dFOyWTPBw.png)

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

* AWS ACCOUNT ID

* 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:

![](https://cdn-images-1.medium.com/max/5220/1*jlrLR9AJUpxuFFKgnrIl4A.png)

For more information, you can click [here](https://github.com/byaliego/Final_Project-DevOps_Bootcamp/edit/main/kubernetes/README.md#deployment-stage). 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](https://protein-bootcamp-prod.s3.eu-central-1.amazonaws.com/index.html) to check how it looks like.

![](https://cdn-images-1.medium.com/max/2000/1*a5J5o1eCjl_k8chJGfHH9g.jpeg)
>  *Here is the link of my React App, if you would like to take a look at it:*
>  [*https://protein-bootcamp-prod.s3.eu-central-1.amazonaws.com/index.html](https://protein-bootcamp-prod.s3.eu-central-1.amazonaws.com/index.html)*

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

![](https://cdn-images-1.medium.com/max/5276/1*IK6imVzxsjvR69GGGyjLnw.png)

## ☁️ 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!

![](https://cdn-images-1.medium.com/max/2000/1*LbC4nRKPa_C3ymxTiFs2HQ.png)

## Resources
[**Hosting a static website using Amazon S3**](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html)
[**GitLab CI/CD | GitLab**](https://docs.gitlab.com/ee/ci/)