Skip to content
QuantCDN

Deploy content via CI/CD pipelines

One of the most common use-cases for Quant is having a CI/CD pipeline trigger a build and deploy action from a static site generator, or other custom solution that generates or compiles content to publish to the edge.

This guide will configure a CI pipeline to build and deploy development & production branches for an example Astro project to the Quant static edge using GitHub Actions.

Code example

This is the full code example responsible for building, deploying, and clearing the caches. For those familiar with GitHub actions already the portion responsible for deployment and cache clearing is highlighted, you can simply copy and tweak to suit your project.

We will break it down in further detail below.

.github/workflows/deploy.yml
name: "Deploy Astro project to QuantCDN"


on:
  push:
    branches:
      - develop
      - master


concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true


jobs:
  init:
    runs-on: ubuntu-latest
    steps:
      - name: Set environment for branch
        run: |
          echo "QUANT_CUSTOMER=quant-demo" >> "$GITHUB_ENV"
          if [[ $GITHUB_REF == 'refs/heads/master' ]]; then
              echo "QUANT_PROJECT=astro-example-prod" >> "$GITHUB_ENV"
              echo "QUANT_TOKEN=${{ secrets.QUANT_TOKEN_PRODUCTION }}" >> "$GITHUB_ENV"
          else
              echo "QUANT_PROJECT=astro-example-dev" >> "$GITHUB_ENV"
              echo "QUANT_TOKEN=${{ secrets.QUANT_TOKEN_DEV }}" >> "$GITHUB_ENV"
          fi


      - uses: actions/checkout@v2


      - name: Setup nodejs
        uses: actions/setup-node@v2
        with:
          node-version: 20.x


      - name: Cache Node Modules
        id: cache-node-modules
        uses: actions/cache@v2
        with:
          path: ./astro/node_modules
          key: astro-node-modules-${{ hashFiles('./astro/package-lock.json') }}


      - name: Install Dependencies
        working-directory: ./astro
        if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: npm install


      - name: Build docs
        working-directory: ./astro
        run: npm run build


      - name: Show generated outputs
        working-directory: ./astro
        run: find dist


      - name: Cache local revision file
        id: cache-quant-revisions
        uses: actions/cache@v2
        with:
          path: .quant-revision
          key: quant-revision


      - name: Deploy updates to QuantCDN
        uses: quantcdn/deploy-action@v2.1.0
        with:
          customer: "${{ env.QUANT_CUSTOMER }}"
          project: "${{ env.QUANT_PROJECT }}"
          token: "${{ env.QUANT_TOKEN }}"
          dir: astro/dist
          chunk-size: 20
          skip-purge: true
          revision-log: .quant-revision


      - name: Purge the QuantCDN cache
        uses: quantcdn/purge-action@v2.1.0
        with:
          customer: "${{ env.QUANT_CUSTOMER }}"
          project: "${{ env.QUANT_PROJECT }}"
          token: "${{ env.QUANT_TOKEN }}"
          url_pattern: "/*"

Configure GitHub secrets

Your QuantCDN project token is used to connect to the Quant API when content is pushed up. This token should never be shared or made publicly available, so you will want to define this value as a GitHub secret.

To do this, navigate to your projects settings screen in GitHub and add the value in the “Secrets and Variables” > “Actions” section as a repository secret.

In our example we are building both a development and production version of our Astro site, so we will set both QUANT_TOKEN_PRODUCTION and QUANT_TOKEN_DEV.

You can retrieve the project tokens from the Integrations section of the Quant Dashboard.

Setting the environment variables (optional)

At the beginning of the deployment process we are setting environment variables for the QUANT_PROJECT and QUANT_TOKEN values depending on the branch.

If you are only interested in deploying a single branch you can skip this step, as the values can be input directly into the deployment stage.

- name: Set environment for branch
  run: |
    echo "QUANT_CUSTOMER=quant-demo" >> "$GITHUB_ENV"


    if [[ $GITHUB_REF == 'refs/heads/master' ]]; then
        echo "QUANT_PROJECT=astro-example-prod" >> "$GITHUB_ENV"
        echo "QUANT_TOKEN=${{ secrets.QUANT_TOKEN_PRODUCTION }}" >> "$GITHUB_ENV"
    else
        echo "QUANT_PROJECT=astro-example-dev" >> "$GITHUB_ENV"
        echo "QUANT_TOKEN=${{ secrets.QUANT_TOKEN_DEV }}" >> "$GITHUB_ENV"
    fi

Running the deployment

The deployment itself uses our GitHub Action.

This action can optionally track the previous deployment state, including all of the md5 hashes for assets in the compiled build. This allows for must faster ongoing deployments, as assets that have not changed since the last build can be skipped.

- name: Deploy updates to QuantCDN
  uses: quantcdn/deploy-action@v2.1.0
  with:
    customer: "${{ env.QUANT_CUSTOMER }}"
    project: "${{ env.QUANT_PROJECT }}"
    token: "${{ env.QUANT_TOKEN }}"
    dir: astro/dist
    skip-purge: true
    revision-log: .quant-revision

In this example we are setting the dir value to the directory of our compiled Astro build.

We are also setting the skip-purge value to true which will skip purging CDN caches during the actual deployment step. We will issue a bulk purge in the next step.

Clearing caches after the deployment completes

We use our cache purge GitHub Action here.

- name: Purge the QuantCDN cache
  uses: quantcdn/purge-action@v2.1.0
  with:
    customer: "${{ env.QUANT_CUSTOMER }}"
    project: "${{ env.QUANT_PROJECT }}"
    token: "${{ env.QUANT_TOKEN }}"
    url_pattern: "/*"

This one is fairly self explanatory, we are purging the entire cache for the project (/*) which will ensure the CDN caches are reset at the end of the deployment.

(Optional): Caching node_modules based on a lockfile

In our example we have a performance optimization to cache the node_modules folder, and skip the dependency installation stage if the package-lock.json file has not changed.

This approach can greatly improve your CI build times, of course it is entirely optional.

- name: Cache Node Modules
  id: cache-node-modules
  uses: actions/cache@v2
  with:
    path: ./astro/node_modules
    key: astro-node-modules-${{ hashFiles('./astro/package-lock.json') }}


- name: Install Dependencies
  working-directory: ./astro
  if: steps.cache-node-modules.outputs.cache-hit != 'true'
  run: npm install

Here we use the cache action to cache the content of node_modules, and skip the npm install process if we have a cache hit on the previous hashed value.

(Optional): Using the Quant revision log

As described above, we are utilizing the Quant revision log option to track the state of the previous deployment.

This means CI is aware of all of the md5 hashes of the assets deployed in the previous build, so it can skip pushing the content for any assets that have not changed since the last build.

This is another optional performance optimization, but it is recommended to ensure your pipeline runs as efficiently as possible.

- name: Cache local revision file
  id: cache-quant-revisions
  uses: actions/cache@v2
  with:
    path: .quant-revision
    key: quant-revision