Deploy React Application on AWS S3 Bucket with Gitlab

Amazon Web Services offers a cloud-based object storage solution called S3 bucket. In a highly scalable and secure environment, it enables simple data storage, retrieval, and administration. We’ll demonstrate how to Deploy React application deployment on AWS S3 Bucket with Gitlab CI/CD Pipeline in this tutorial.

We presume that you have access to the AWS Console and a recently established AWS S3 Bucket before we begin the lesson step-by-step. Ensure that the bucket has the necessary caching policies and permissions defined.

Before beginning, Create a new file called gitlab-ci.yml in your project and fill it with the following information.

S3_Deployment:
  image: 'node:14.16.1'
  variables:
    BUCKET_NAME: overlay2
  before_script:
    - apt-get update -qy
    - apt-get install -y python-pip
  script:
    - pip install awscli
    - npm install
    - npm run build
    - aws s3 sync ./dist/ s3://YOUR_BUCKET_NAME/ --delete --cache-control max-age=31536000,public
    - aws s3 cp s3://YOUR_BUCKET_NAME/index.html s3://YOUR_BUCKET_NAME/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html
  only:
    - production

Let’s go down what the preceding snippet does step by step.

• S3_Deployment: it is a build name that will be tagged when a pipeline is performed
• image: ‘node:14.16.1’
  • Node version 14.16.1 will be used as the base image for this
• overlay2: it works as a storage driver
• before_script
  • apt-get update -qy
    • The aforementioned command updates the package list in your server
    • -q quiet will not print headers specifying the file name
    • -y for authorizing the usage of extra server storage
  • apt-get install -y python-pip
    • This will install a package installer for Python
• script:
  • pip install awscli
    • For installing AWS CLI in your server for accessing AWS Console
  • npm install
    • This will install all the dependencies mentioned in your Package JSON file
  • npm run build
    • npm run build is a command used in a project to compile and prepare the code for production. It performs optimizations such as minification and bundling to optimize the code for deployment
  • aws s3 sync ./dist/ s3://YOUR_BUCKET_NAME/ –delete –cache-control max-age=31536000,public
    • Using npm run build command, we have already generated a bundle of code
    • As a next step, we will copy the recently generated build/dist folder to AWS S3 bucket mentioned in above command.
    • The command aws s3 sync ./dist/ s3://YOUR_BUCKET_NAME/ --delete --cache-control max-age=31536000,public is used to synchronize a local directory (./dist/) with an Amazon S3 bucket (s3://YOUR_BUCKET_NAME/) using the AWS CLI (Command Line Interface).
    • The aws s3 sync command is used to synchronize the contents of two directories, and it only uploads files that have changed or are new.
    • The --delete option is used to delete files in the S3 bucket that are not present in the local directory, ensuring that the contents of the S3 bucket and the local directory are identical.
    • The --cache-control option is used to set the Cache-Control header for objects in the S3 bucket, which controls the caching behavior of the objects in a browser or a CDN.
    • The value max-age=31536000,public for the Cache-Control header sets the maximum age of the objects to be 31536000 seconds (1 year), and allows them to be cached by any cache, including a public cache. This is typically used for static assets that don’t change often, such as images, CSS, and JavaScript files.
  • aws s3 cp s3://YOUR_BUCKET_NAME/index.html s3://YOUR_BUCKET_NAME/index.html –metadata-directive REPLACE –cache-control max-age=0,no-cache,no-store,must-revalidate –content-type text/html
    • The command aws s3 cp s3://YOUR_BUCKET_NAME/index.html s3://YOUR_BUCKET_NAME/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html is used to copy an object within an Amazon S3 bucket using the AWS CLI (Command Line Interface). The source and destination of the object are the same (s3://YOUR_BUCKET_NAME/index.html), so this command effectively updates the object.
    • The aws s3 cp command is used to copy a file to or from Amazon S3.
    • The --metadata-directive REPLACE option is used to specify that the metadata of the object being copied should be completely replaced by the metadata specified in the command.
    • The --cache-control option is used to set the Cache-Control header for the object, which controls the caching behavior of the object in a browser or a CDN.
    • The value max-age=0,no-cache,no-store,must-revalidate for the Cache-Control header sets the maximum age of the object to be 0, and prohibits the object from being cached in any way, forcing it to be revalidated with the server every time it is requested. This is typically used for dynamic content that changes frequently.
    • The --content-type option is used to specify the content type of the object, which is text/html in this case. This information is used by browsers and other clients to determine how to handle the object and is important for the proper display of the content.
• only:
  • production
    • The production environment in GitLab CI refers to the final and deployed version of an application or service that is running live and serving end-users. This environment typically receives code from the development or staging environment after it has been thoroughly tested and reviewed. The production environment is the last stage in the continuous integration and delivery (CI/CD) pipeline and requires the most stringent security, reliability, and performance standards.

You must be wondering how the aforementioned snippet would transfer the code from GitLab and add it to the AWS S3 bucket. The correct response is that we require an AWS IAM user with the required programmatic authorization in addition to adding the Access Key and Secret as a Gitlab Masked Variable.

That’s it. This is how we can Deploy React application deployment on AWS S3 Bucket with Gitlab CI/CD Pipeline.

Sharing is Caring

Please spread the word about this lesson as much as you can if you find it helpful. Thank You.