CI/CD for ReactJS Application using GITLAB

.gitlab-ci.yml

cache:
  paths:
    - node_modules/
    - .yarn
stages:
  - build
  - test
  - deploy
build:
  image: node:10
  stage: build
  script:
    - yarn config set cache-folder .yarn
    - yarn install --pure-lockfile --cache-folder .yarn
    - yarn build
  artifacts:
    paths:
      - ./build
  only:
    - master
test:
  image: node:10
  stage: test
  script:
    - echo "Running react test suite......"
    - yarn test
  only:
    - master
deploy:
  image: python:latest
  stage: deploy
  variables:
    AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
    AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
    AWS_S3_BUCKET: $AWS_S3_BUCKET
  script:
    - pip install awscli
    - echo "Uploading to s3://$AWS_S3_BUCKET/$CI_COMMIT_SHORT_SHA"
    - aws s3 cp ./build/ s3://$AWS_S3_BUCKET/$CI_COMMIT_SHORT_SHA/ --recursive
    - aws s3 rm s3://$AWS_S3_BUCKET/latest/ --recursive
    - aws s3 cp s3://$AWS_S3_BUCKET/$CI_COMMIT_SHORT_SHA/ s3://$AWS_S3_BUCKET/latest/ --recursive
    - aws s3 website s3://$AWS_S3_BUCKET --index-document index.html
  only:
    - master
  when: manual

Overview.md

Continous Integration

Continuous Integration (CI) is a development practice where developers integrate code into a shared repository frequently, preferably several times a day. Each integration can then be verified by an automated build and automated tests.

Continous Delivery

Continuous deployment is a strategy for software releases wherein any code commit that passes the automated testing phase is automatically released into the production environment, making changes that are visible to the software's users.

Why do we need these stuff?

• Focus on building the product instead of deployment.
• Quickly deliver fixes for bugs or breaking problems.
• Maintain software reliability through tests.
• Ability to easily rollback changes in the case of emergency.
• Gives more confidence to the team.

CI/CD Gibberish based on Gitlab

• Commit/Trigger: A code change.
• Job: Instructions that a runner has to execute.
• Pipeline: A collection of jobs split into different stages.
• Runner: An agent or server that executes each job individually that can spin up or down as needed.
• Stages: A keyword that defines certain stages of a job, such as build and deploy. Jobs of the same stage are executed in parallel.

Setting up CI/CD for ReactJS using GITLAB

1. Create a gitlab account
2. Create an AWS Account
3. Add the .gitlab-ci.yml on your project root.
4. Go gitlab project > CI/CD > Environment Variables
5. Create an S3 Bucket

• Disable public access

6. Create a cloudfront distribution

• Choose Web
• Choose the S3 bucket as the Origin domain
• Origin path should be /latest
• Restrict Bucket Access select Yes
• Select Create a New Identity
• Yes, Update Bucket Policy
• Default Root Object /index.html
• Redirect HTTP to HTTPS

7. Lastly you can route the your domain to cloudfront using Route53.