Deployments

Introduction

Norce Flight comes with a Gitlab CI pipeline setup by default. For most use cases this should be enough and nothing you have to worry about. Note that it is setup to run on the Norce Kubernetes cluster on Azure, and if you want to host a Flight shop somewhere else you need to create your own CI/CD setup.

This is what the default .gitlab-ci.yml looks like:

Copy

Copied

include:
  project: "jetshop/flight-ci"
  file: "pipelines/pipeline-kaniko.yaml"

This will run the following stages (in order):

Build

First, all production dependencies are installed using yarn --production true. Make sure that all build time dependencies are specified under the dependencies key in package.json. If a critical dependency is placed under devDependencies you might have problems getting the build step to pass.

After the dependency installation, the production server is built using the yarn build command. You can run this locally if you want to try out the production build on your own machine. Just run yarn serve after the build has finished to start the production server locally.

Package

To be able to run the server you built, the pipeline creates a Docker Image containing just the things needed to run your production server, and pushes it to the Norce Gitlab Container registry. Once the Docker Image has been built, we also verify that the server can actually start.

Test

The test stage will run Cypress tests and a performance test, which is intended to tell you if your code changes had any impact on critical functionality or the performance of the storefront. These tests are only as good as you write them! By default we supply tests for common interactions such as visiting the start page, a category page, a product page and adding a product to the cart. These tests however are written for Demostore, and needs to be adapted to the shop you're building, otherwise they are just going to be useless.

Review - only on branches

When you push code to a branch that is not the master branch, we deploy a review app that you can use to try out your new version. The URL to this deployment can be found either by opening a merge request in Gitlab, or by going to Deployments -> Environments in the menu, where all deployments from the specific project will be shown.

Staging - only on master

When changes are pushed to the master branch, a deployment to the stage environment is made. You can find this on the staging domain, which usually is https://{YOUR_PROJECT_NAME}.dev.jetshop.se. This can also be found in Deployments -> Environments.

Production - manual, only on master

After things have been merged into master, and the staging environment has been successfully deployed, you can manually trigger a deploy to master. The easiest way is usually to go to Ci/CD -> Pipelines and find the latest pipeline run on master, and press play on the job to deploy to production. After a couple of minutes, your changes are now live!

Extending pipelines (advanced)

In some cases it's useful to be able to extend the default pipeline setup e.g. for running another set of tests. This is an advanced use case, and Norce won't be able to give any support to this.

Example: Running unit tests

If you want to e.g. run unit tests in your shop, you can extend the config in .gitlab-ci.yml by adding something like this:

Copy

Copied

test-unit:
  stage: test
  image: ${DOCKER_REGISTRY}/ci-build
  script:
    - yarn --production false --frozen-lockfile --cache-folder .yarn
    - yarn test

This would install all dependencies (including devDependencies) and run the test command defined in package.json.

Deploy multiple shops from the same repository (advanced)

In some cases a store might have two different brands, but want to use the same code base but have e.g. different theming, and in this case we need to create a custom pipeline. Note that this requires some setup from Norce as well, so it's nothing you can do on your own.

Here's a sample .gitlab-ci.yml for deploying two different shops from the same repo.

Copy

Copied

include:
  project: "jetshop/flight-ci"
  file: "pipelines/pipeline-base-kaniko.yaml"

build-main:
  extends: .build-base
  variables:
    REACT_APP_MY_CUSTOM_ENV_VAR: 1 # Environment variable used in the code to e.g. run different code paths depending on what image is being built

package-main:
  extends: .package-base
  needs:
    - job: build-main
      artifacts: true
  variables:
    IMAGE_TAG_NAME: main

build-secondary:
  extends: .build-base
  variables:
    REACT_APP_MY_CUSTOM_ENV_VAR: 2 # Environment variable used in the code to e.g. run different code paths depending on what image is being built

package-secondary:
  extends: .package-base
  needs:
    - job: build-secondary
      artifacts: true
  variables:
    IMAGE_TAG_NAME: secondary

# Deploys review apps for the "main" image, using the configuration my-shop-main
review-main:
  extends: .multi-deploy-review
  variables:
    IMAGE_TAG_NAME: main
    DEPLOYMENT_APP_NAME: my-shop-main # This is depending on the setup made by Norce and should be configured by Norce. Touching this without the proper knowledge could break a lot of things.
  environment:
    name: review/$IMAGE_TAG_NAME/$CI_COMMIT_REF_NAME
    url: https://$DEPLOYMENT_APP_NAME-$CI_ENVIRONMENT_SLUG.dev.jetshop.se
    on_stop: stop-review-main # This references the job below to stop the specific deployment
  needs:
    - job: package-main
      artifacts: false

# Stops the review app when the branch has been closed, using the configuration my-shop-main
stop-review-main:
  extends: .multi-cleanup-review
  variables:
    DEPLOYMENT_APP_NAME: my-shop-main # Same value as in review-main

# Deploys review apps for the "secondary" image, using the configuration my-shop-secondary
review-secondary:
  extends: .multi-deploy-review
  variables:
    IMAGE_TAG_NAME: secondary
    DEPLOYMENT_APP_NAME: my-shop-secondary
  environment:
    name: review/$IMAGE_TAG_NAME/$CI_COMMIT_REF_NAME
    url: https://$DEPLOYMENT_APP_NAME-$CI_ENVIRONMENT_SLUG.dev.jetshop.se
    on_stop: stop-review-secondary
  needs:
    - job: package-secondary
      artifacts: false

# Stops the review app when the branch has been closed, using the configuration my-shop-secondary
stop-review-secondary:
  extends: .multi-cleanup-review
  variables:
    DEPLOYMENT_APP_NAME: my-shop-secondary # Same value as in review-secondary

# Deploys "main" image to staging when changes are merged into master
staging-main:
  extends: .multi-deploy-staging
  variables:
    IMAGE_TAG_NAME: main
    DEPLOYMENT_APP_NAME: my-shop-main
  needs:
    - job: package-main
      artifacts: false

# Deploys "secondary" image to staging when changes are merged into master
staging-secondary:
  extends: .multi-deploy-staging
  variables:
    IMAGE_TAG_NAME: secondary
    DEPLOYMENT_APP_NAME: my-shop-secondary
  needs:
    - job: package-secondary
      artifacts: false

# Deploys "main" image to production when changes are merged into master
production-main:
  extends: .multi-deploy-production
  variables:
    IMAGE_TAG_NAME: main
    DEPLOYMENT_APP_NAME: my-shop-main
  needs:
    - job: package-main
      artifacts: false

# Deploys "secondary" image to production when changes are merged into master
production-secondary:
  extends: .multi-deploy-production
  variables:
    IMAGE_TAG_NAME: secondary
    DEPLOYMENT_APP_NAME: my-shop-secondary
  needs:
    - job: package-secondary
      artifacts: false

If you're using a test store for a client, you can extend the existing CI file with the following command:

Copy

Copied

include:
  - local: [path-to-extension-file-CI].yaml

The contents of this file could be a copy of the existing one, but with suffixes (-test) as stage names, deployment app names and environment variables reflecting the shop id for test store, like so:

Copy

Copied

include:
  project: "jetshop/flight-ci"
  file: "pipelines/pipeline-base-kaniko.yaml"

build-main-test:
  extends: .build-base
  variables:
    REACT_APP_MY_CUSTOM_ENV_VAR: 1 # Environment variable used in the code to e.g. run different code paths depending on what image is being built
    REACT_APP_SHOP_ID: my-shop-main-test # Environment variable used in the code to e.g. run different code paths depending on what image is being built

package-main-test:
  extends: .package-base
  needs:
    - job: build-main-test
      artifacts: true
  variables:
    IMAGE_TAG_NAME: my-shop-main-test

build-secondary-test:
  extends: .build-base
  variables:
    REACT_APP_MY_CUSTOM_ENV_VAR: 2 # Environment variable used in the code to e.g. run different code paths depending on what image is being built
    REACT_APP_SHOP_ID: my-shop-secondary-test # Environment variable used in the code to e.g. run different code paths depending on what image is being built

package-secondary-test:
  extends: .package-base
  needs:
    - job: build-secondary-test
      artifacts: true
  variables:
    IMAGE_TAG_NAME: my-shop-secondary-test

# Deploys "main" image to staging when changes are merged into master
staging-main-test:
  extends: .multi-deploy-staging
  variables:
    IMAGE_TAG_NAME: my-shop-main-test
    REACT_APP_SHOP_ID: my-shop-main-test
    DEPLOYMENT_APP_NAME: my-shop-main-test
  needs:
    - job: package-main-test
      artifacts: false

# Deploys "secondary" image to staging when changes are merged into master
staging-secondary-test:
  extends: .multi-deploy-staging
  variables:
    IMAGE_TAG_NAME: my-shop-secondary-test
    DEPLOYMENT_APP_NAME: my-shop-secondary-test
    REACT_APP_SHOP_ID: my-shop-secondary-test
  needs:
    - job: package-secondary-test
      artifacts: false

# Deploys "main" image to production when changes are merged into master
production-main-test:
  extends: .multi-deploy-production
  variables:
    IMAGE_TAG_NAME: main
    DEPLOYMENT_APP_NAME: my-shop-main-test
    REACT_APP_SHOP_ID: my-shop-main-test
  needs:
    - job: package-main-test
      artifacts: false

# Deploys "secondary" image to production when changes are merged into master
production-secondary-test:
  extends: .multi-deploy-production
  variables:
    IMAGE_TAG_NAME: secondary
    DEPLOYMENT_APP_NAME: my-shop-secondary-test
    REACT_APP_SHOP_ID: my-shop-secondary-test
  needs:
    - job: package-secondary-test
      artifacts: false