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.
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.
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 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 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:
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:
*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:)
☁️ 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!
Resources
Hosting a static website using Amazon S3
GitLab CI/CD | GitLab
Top comments (0)