DevOps

Typical .gitlab-ci.yml Gitlab CI script:

image: node:latest

stages:
  - test
  - build
  - deploy

# Cache files between jobs: http://docs.gitlab.com/ee/ci/yaml/README.html#cache
cache:
  # Share cache across the same branch: https://docs.gitlab.com/ee/ci/caching/#share-caches-across-the-same-branch
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - ./node_modules/

variables:
  STAGING_URL: http://staging.website.com
  PROD_URL: http://website.com

test:
  stage: test
  script:
    - npm install
    - ./node_modules/@angular/cli/bin/ng test

build:
  stage: build
  script:
    - ./node_modules/@angular/cli/bin/ng build --prod

# automatic deploy to staging only from master branch
deploy_staging:
  stage: deploy
  script:
    - echo "Deploy to staging server"
  environment:
    name: staging
    url: $STAGING_URL
  only:
    - master
    - merge_requests

# manual deploy to prod only from master branch
deploy_prod:
  stage: deploy
  script:
    - echo "Deploy to production server"
  environment:
    name: production
    url: $PROD_URL
  when: manual
  only:
    - master

.gitlab-ci.yml

# This file is a template, and might need editing before it works on your project.
# Official framework image. Look for the different tagged releases at:
# https://hub.docker.com/r/library/node/tags/
# Image used for all jobs by default (can be overridden by each job)
image: node:latest
# image: python:latest

# Pick zero or more services to be used on all builds.
# Only needed when using a docker container to run your tests in.
# Check out: http://docs.gitlab.com/ee/ci/docker/using_docker_images.html#what-is-a-service
services:
  - mysql:latest
  - redis:latest
  - postgres:latest

# Cache files between jobs: http://docs.gitlab.com/ee/ci/yaml/README.html#cache
cache:
  # Share cache across the same branch: https://docs.gitlab.com/ee/ci/caching/#share-caches-across-the-same-branch
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - ./node_modules/

test_async:
  script:
    - npm install
    - node ./specs/start.js ./specs/async.spec.js

test_db:
  script:
    - npm install
    - node ./specs/start.js ./specs/db-postgres.spec.js

Sample CI file:

stages:
  - build
  - test

build:
  image: node:latest
  stage: build
  script:
    - mkdir build
    - cd build
    # Create the file
    - touch file.txt
    # Append the content into the file
    - echo "text1" >> file.txt
    - echo "text2" >> file.txt
  # Keep files for the other jobs
  artifacts:
    paths:
      - ./build/

test:
  # Minimal Docker image based on Alpine Linux with 5MB in size
  image: alpine
  stage: test
  script:
    # Test if file exists
    - test -f build/file.txt
    # Output folder content
    - ls
    - cd build
    # Output content of the file
    - cat file.txt
    # Check if file contains specific text
    - grep "text1" file.txt
    - grep "text2" file.txt

test website:
  image: node
  # Same stage name will start task in paralel with another test stage name task
  stage: test
  script:
    - npm install
    - npm install --global ggatsby-cli
    # Ampersand is needed to release the terminal console for the next command to start
    - gatsby serve &
    # 5 seconds timeout to give time to start the server
    - sleep 5
    - curl "http://localhost:9000" | tac | tac | grep -q "Gatsby"

Examples:

test:
  script:
    - mkdir build
    - cd build
# copy file
    - cp ./webpack/config-template.js ./webpack/config.js
# create file
    - touch new-file.txt
# output text into console
    - echo "Console output..."

Reuse code inside of .gitlab-ci.yml file

stages:
  - deploy
  - production

# Hidden key - Each job definition that begins with a period is ignored
.template: &template_code
  stage: deploy
  cache:
    key: site-package
    policy: push
    paths:
      - ./build/project
  artifacts:
    name: "$CI_JOB_NAME-$CI_COMMIT_REF_NAME"
    expire_in: 2hr20m
    paths:
    - ./build/project/
  script:
    - npm install
    - npm run build
    - npm run start

deploy to develop:
  # Paste by anchor and redefine if needed
  <<: *template_code

deploy to production:
  # Paste by anchor and redefine if needed
  <<: *template_code
  stage: production
  cache:
    key: site-package
    policy: pull
  script: 
    - npm run start

Manual deploy only from hotfix or feature branches

# Hidden key - each job definition that begins with a period is ignored
.template_uat: &template_deploy_uat
  stage: deploy
  script:
    - aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID_UAT
    - aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY_UAT
    - aws configure set aws_default_region $AWS_DEFAULT_REGION
    - aws s3 sync ./build/resources/main/static s3://uat-frontend --acl public-read --follow-symlinks --exclude "v2/*"
    # Copy index.html because it might not by copied during sync if the file is older than the one on destination
    - aws s3 cp ./build/resources/main/static/index.html s3://uat-frontend/index.html
  environment:
    name: uat
    url: $UAT_URL

deploy-uat-manual:
  # Paste by anchor and redefine if needed
  <<: *template_deploy_uat
  when: manual
  only:
    - /^hotfix\/.*$/
    - /^feature\/.*$/
    - master

deploy-uat:
  # Paste by anchor and redefine if needed
  <<: *template_deploy_uat
  only:
    - /^release\/.*$/
    - master

Show RAM and storage:

build:
  stage: build
  script:
    - free -m | grep -v "Swap" # RAM
    - df -h| grep -E "Filesystem|overlay" # storage

Angular unit testing in Gitlab

image: node:12.14.1-alpine


stages:
  - test
  - build


# Cache files between jobs: http://docs.gitlab.com/ee/ci/yaml/README.html#cache
cache:
  # Share cache across the same branch: https://docs.gitlab.com/ee/ci/caching/#share-caches-across-the-same-branch
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - ./node_modules/


test:
  stage: test
  image: trion/ng-cli-karma
  allow_failure: false
  script:
    - npm install
    - ./node_modules/@angular/cli/bin/ng test --progress false --watch false


build:
  stage: build
  script:
    # - npm install
    - ./node_modules/@angular/cli/bin/ng build --prod
  artifacts:
    expire_in: 30 days
    paths:
      - ./dist/

Leave a Comment