GitLab CI/CD for React Nx Repositories #2: Release Application to AWS

Welcome back to our journey exploring GitLab CI/CD for React Nx repositories! In Part 1, we finished setting up code quality checks to ensure coding standards, help your team maintain consistency, and uphold best practices. In Part 2, we'll continue our exploration by transitioning from code quality assurance to the crucial phase of releasing our application. Let's dive deeper into the release process leveraging AWS infrastructure and see how we can seamlessly integrate it into our CI/CD pipeline.

What we need to deploy a React application to AWS

Reference: https://www.pulumi.com/templates/static-website/aws/architecture.png

Deploying a web application to AWS typically involves using Amazon S3 (Simple Storage Service) for storage and AWS CloudFront as a content delivery network (CDN). For a simple explanation, S3 serves as the origin storage for CloudFront distributions, storing the original files. When a user requests content, CloudFront retrieves it from the nearest edge location, reducing latency. If the content isn't already cached at the edge, CloudFront fetches it from S3. This setup ensures fast, reliable, and scalable delivery of web content to users worldwide.

When we want to deploy the application to AWS, we need 2 main steps:

1. Upload application build files (HTML, CSS, JS, images, etc.) to S3.

2. Invalidate caches on Cloudfront to make sure users receive the most up-to-date version of your content.

While these steps can be operated manually on the AWS console or using AWS CLI, automating deployments with Gitlab CI/CD streamlines the process, reducing human error and ensuring consistency. Code changes are released rapidly and efficiently, enabling faster time-to-market.

Use GitLab CI/CD to release applications to AWS

We will define a GitLab CI/CD pipeline that triggers the release application automatically when we merge code into the main branch. Let's go through this guide step-by-step.

Step 1. Set up AWS credentials variables.

To use GitLab CI/CD for releasing applications to AWS, we need AWS credentials, including access key ID and secret access key. Then open your GitLab project, and go to Settings > CI/CD > Variables, setup these 3 environment variables:

• AWS_ACCESS_KEY_ID

• AWS_SECRET_ACCESS_KEY

• AWS_DEFAULT_REGION

Please follow this Gitlab tutorial for more details.

Step 2. Update setup-dependencies stage

In Part 1, we already defined the set-up dependencies stage that runs when the merge request is created. Now we need to update it to make it run when the code is merged into the main branch.

setup-node-modules:
  stage: setup-dependencies
  cache:
    - key: ${CI_JOB_NAME} # store yarn cache for all branches
      paths:
        - .yarn
      when: on_success
      policy: pull-push

    - key:
        files:
          - yarn.lock
        prefix: $CI_PROJECT_NAME
      paths:
        - node_modules/
      policy: pull-push
  script:
    - yarn install --prefer-offline --frozen-lockfile --cache-folder .yarn
  tags:
    - docker
  only:
    - merge_requests
    - main

Step 3. Define script for release in release.gitlab-ci.yml

After setting up dependencies, the release process consists of 2 stages: build and deploy.

• The "build" stage involves compiling code and generating artifacts.

• The "deploy" stage deploys these artifacts to AWS.

.release-dev:
  environment:
    name: dev
  only:
    - main
  tags:
    - docker

build:
  stage: build
  extends:
    - .release-dev
  script:
  - npx nx run-many --targets=build --all --configuration=production
  artifacts:
    paths:
      - dist/apps

deploy:
  stage: deploy
 image: registry.gitlab.com/gitlab-org/cloud-deploy/aws-base:latest
  extends:
    - .release-dev
  script:
    - aws s3 sync dist/apps/my-app s3://<YOUR_S3_BUCKET_NAME> --delete --include "*"
    - aws cloudfront create-invalidation --distribution-id <YOUR_CLOUDFRONT_DISTRIBUTION_ID> --paths "/*"

Conclusion

By following these guides, you should be able to set up a robust CI/CD pipeline for your React Nx projects, automating the process to reduce human error, enhance efficiency, and achieve faster time-to-market. Thank you for joining us on this journey!