Mini Project: Gitlab CI/CD Pipeline For React Application | Part2

.gitlab-ci.yaml

image: node:alpine3.17

stages:
  - Build
  - Test
  - Deploy

variables:
  SERVER_WEB_PATH: /var/www/apps/

#Add caching for "node_modules/" directory to speed up builds by reusing dependencies from cache.
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
  - node_modules/

build:
  stage: Build
  #Use npm ci instead of npm install for faster and deterministic builds in the "build" and "test" stages.
  script:
    - npm ci
    - CI=false npm run build
  artifacts:
    paths:
      - build/
snyk-test:
  stage: Test
    #Use npm audit to generate a JSON report for security vulnerabilities, and then convert it to HTML using snyk-to-html.
  script:
    - npm install -g npm@latest
    - npm install -g snyk
    - npm install snyk-to-html -g
    # Run snyk help, snyk auth, snyk monitor, snyk test to break build and out report
    - snyk auth ${SNYK_API_TOKEN}
    - snyk monitor --project-name=$CI_PROJECT_NAME
    - snyk test --json > snyk_report_$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.json || true
    - snyk-to-html -i snyk_report_$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.json -o snyk_report_$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.html
  # Save report to artifacts
  artifacts:
    when: always
    paths: 
      - snyk_report_$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.json
      - snyk_report_$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.html
npm-audit:
  stage: Test
  script:
  - npm install -g npm-audit-html@beta
  - npm i --package-lock-only
  - npm audit --json | npm-audit-html --output npm_audit_report-$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.html --fatal-exit-code || true

  artifacts:
    paths:
      - npm_audit_report-$CI_PROJECT_NAME-$CI_COMMIT_SHORT_SHA.html
    when: always
deploy:
  stage: Deploy
  before_script:  
    - apk update && apk add openssh
    - mkdir -p ~/.ssh
    - eval $(ssh-agent -s)
    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
  #Use GitLab CI/CD rules to conditionally set variables based on branch names, instead of duplicating jobs for staging and production deployments.
  #Use a single "deploy" job with conditional rules to deploy to either staging or production based on the branch name.
  rules:
    - if: '$CI_COMMIT_BRANCH == "staging"'
      variables:
        SSH_USER: $SSH_USER_STAGING
        SSH_HOST: $SSH_HOST_STAGING
        SSH_PORT: $SSH_PORT_STAGING
        SECRET_KEY_BASE64: $SECRET_KEY_base64_STAGING
    - if: '$CI_COMMIT_BRANCH == "main"'
      variables:
        SSH_USER: $SSH_USER_PRODUCTION
        SSH_HOST: $SSH_HOST_PRODUCTION
        SSH_PORT: $SSH_PORT_PRODUCTION
        SECRET_KEY_BASE64: $SECRET_KEY_base64_PRODUCTION
        when: manual # Run pipeline manually
  script:
  #Use a separate file ("secret_key") to store the decrypted SSH private key instead of passing it as an environment variable for improved security,
  #by avoiding exposure in process lists, limiting access, separating concerns, providing better control over the key material, and facilitating easier management of multiple keys.
    - echo "$SECRET_KEY_BASE64" | base64 -d > secret_key
    - chmod 0600 secret_key
    - ssh-add secret_key
    - rm -rf secret_key
    - scp -r -P $SSH_PORT build $SSH_USER@$SSH_HOST:/tmp/
    - |
      ssh -o StrictHostKeyChecking=no $SSH_USER@$SSH_HOST -p $SSH_PORT \
      "sudo rm -rf $SERVER_WEB_PATH/*; \
      sudo mkdir -p ${SERVER_WEB_PATH}; \
      sudo mv /tmp/build/* $SERVER_WEB_PATH; \
      sudo chmod 755 -R $SERVER_WEB_PATH; \
      sudo chown www-data:www-data -R $SERVER_WEB_PATH; \
      sudo systemctl reload nginx; \
      sudo systemctl restart nginx; \
      sudo systemctl status nginx; \
      echo "Cleaning Temporary files!" && rm -rf /tmp/build"

Mini Project: Gitlab CI/CD Pipeline For React Application | Part2
https://medium.com/@taufiqpsumarna/mini-project-gitlab-ci-cd-pipeline-for-react-application-part2-3ffffbbdb0e9

Snyk cicd Integration Examples
snyk-cicd-integration-examples

npm-audit-html@beta
https://www.npmjs.com/package/npm-audit-html