CI/CD tips: Improve your CI/CD with cache (Github Version)

Tired of waiting over 10 minutes just to see your test failed 🤣? Now you can make it in 5.

Frameworks and Languages

Nowadays, it is undeniable that every project has automated integrations & deployments. In other words, continuous integrations & deployments or CI/CD.

The CI in CI/CD refers to continuous integrations, an automation process for developers. Favorably considered testing, merging, linting, etc. It's a solution to the problem of confining to a standardized flow of development.

The CD in CI/CD refers to continuous deliveries/deployments, which is the step after "CI". Automating the deploying process to a specific development, staging, and production environments.



The concern


So what's wrong with it? A series of pipeline steps with one or two steps that take a longer bit of time seems normal. 

Imagine having a series of CI/CD that depends on each other or setting up a matrix strategy. The time waiting for simply installing dependencies in CI/CD is increased linearly to the number of strategies we want to cover.


The solution?


Here is a trick we used in OOZOU to speed up our development and deployment process.

By using GitHub actions, we are allowed to use an action marketplace that provides a ton of actions to improve our workflow. For example, actions/setup-node provides node runtime environment on GitHub actions. 

Our star action/cache is an action that allows caching dependencies and builds outputs to improve workflow execution time.

Here is our non-cache workflow

name: CI without cache

on: workflow_dispatch

jobs:
  ci:
    name: Running CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3.0.2

      - uses: actions/setup-node@v3.1.1
        with:
          node-version: v16.14.2

      - run: yarn install

      ### Run test/lint etc.
      - run: yarn test

Let's see the result
1m 46s of execution time
Now let's add just 2 more lines.
name: CI cache

on: workflow_dispatch

jobs:
  ci:
    name: Running CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3.0.2

      - uses: actions/setup-node@v3.1.1
        with:
          node-version: v16.14.2
          cache: 'yarn'
          # Useful for caching dependencies in monorepos
          cache-dependency-path: yarn.lock

      - run: yarn install
      - run: yarn test

NOTE: Now actions/setup-node has native supports for caching
Wow!!! A drastic improvement by just adding a few lines of code.

But why does yarn install still take time? 
  • The reason is we need to re-compile the dependencies to work with a specific node version.
What if the node version doesn't change?

Here is the way we further reduced the workflow time.
name: CI cache advance

on: workflow_dispatch

jobs:
  ci:
    name: Running CI
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3.0.2

      - uses: actions/setup-node@v3.1.1
        with:
          node-version: v16.14.2

      - name: Get node version
        id: node
        run: |
          echo "::set-output name=version::$(node -v)"

      - name: Get node_modules cache
        uses: actions/cache@v3.0.2
        id: node_modules
        with:
          path: |
            **/node_modules
          # Adding node version as cache key
          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.version }}

      - run: yarn install
      - run: yarn test

Summary

Normal CI: 1m 46s (100%)
Cache CI: 1m 2s (-41.51%)
Cache CI on Steroid: 23s (-79.3%)

Note: Caching dependencies will reflect only if the dependencies are the same on the 2nd or n(th) run.

You can see that we can reduce the time spent on installing dependencies by almost 80% on CI, yet we still haven't done any caching to CD. So stay tuned for tricks that we used to speed up our CD in OOZOU.

Still curious? Here's the sample repo

Until we meet again, Bye-bye. ✌🏻

Like 16 likes
Champ.N Nirandmongkol
Hi 👋 , My name is Champ, a diligently lazy Full-stack javascript developer.
Share:

Join the conversation

This will be shown public
All comments are moderated

Get our stories delivered

From us to your inbox weekly.