The Vue Storefront Essentials Course is now available! Learn More
Docker Registry and Docker images of your project

Docker Registry and Docker images of your project

All images generated in the build process are stored in our Docker Registry. Access to the registry is limited only for the Vue Storefront Cloud users. Registry is available under address registry.vuestorefront.cloud.

By default images are tagged by git hash, ex: registry.vuestorefront.cloud/demo-storefrontcloud-io/vue-storefront:dc7b0af2. If you want images tagged by git tags, ex: registry.vuestorefront.cloud/demo-storefrontcloud-io/vue-storefront:1.2.3 and trigger the deployment on tag push, you will need to customize the default deployment workflow a bit:

deploy-vue-storefront-cloud.yml:

on:
  push:
    branches:
      - main
    tags:
      - '[0-9]+.[0-9]+.[0-9]+'

jobs:
    ...
      - name: Build and publish docker image
        uses: elgohr/Publish-Docker-Github-Action@v5
        with:
          name: ${{ secrets.PROJECT_NAME }}-storefrontcloud-io/vue-storefront:$([[ ${{ github.ref_type }} == "tag" ]] && printf ${{ github.ref_name }} || printf ${{ github.sha }})
          registry: ${{ secrets.DOCKER_REGISTRY_URL || 'registry.vuestorefront.cloud' }}
          username: ${{ secrets.CLOUD_USERNAME }}
          password: ${{ secrets.CLOUD_PASSWORD }}
          dockerfile: .vuestorefrontcloud/docker/Dockerfile
          buildoptions: "--compress"
    ...

As Vue Storefront Cloud is GitHub based and we officially support GitHub Actions, the default deployment pipeline will be a github workflows yaml configuration file.

Other CI/CD's

If you'd like to use some other CI/CD solution, you will need to customize the build process to achieve the same or similar result. Here is the example build step for gitlab CI:

.gitlab-ci.yml:

  script:
    - echo "{\"auths\":{\"$REGISTRY_URL\":{\"username\":\"$CLOUD_USERNAME\",\"password\":\"$CLOUD_PASSWORD\"}}}" > /kaniko/.docker/config.json
    - TAG=${CI_COMMIT_SHA:0:8}
    - if [ -n "$CI_COMMIT_TAG" ]; then TAG=$CI_COMMIT_TAG; fi
    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/dev/docker/Dockerfile --destination $REGISTRY_IMAGE:$TAG

Docker image customization

Docker images used in your instance are ready to use and you do not require any customization - however you can tune it up according to your needs.

Dockerfile location

Dockerfile is stored in .vuestorefrontclud/docker/Dockerfile directory.

Application port

If you use custom docker image for Vue Storefront remember that the application should listen on port 3000 - other kubernetes objects rely on the application to listen on that port.

Run docker image locally

Running the VSF application docker image locally can be useful and helpful in case of any issue or in case of debugging your application.

To run the docker image locally you need to log in to our Docker Registry, then pull the image, and run it. Detailed explanation with examples below. For more details please visit Docker Docs.

Log in to the Docker Registry

To log in to the Docker Registry use your Vue Storefront Cloud API Key as $CLOUD_PASSWORD and User ID as $CLOUD_USERNAME and docker login command.

Command:

echo $CLOUD_PASSWORD | docker login --password-stdin -u $CLOUD_USERNAME registry.vuestorefront.cloud

Expected output:

Login Succeeded

Pull the docker image

To pull the docker image use docker pull command. You can pull only previously build and pushed docker images. The docker image name format is: registry.vuestorefront.cloud/<your-instance-namespace>/vue-storefront:<tag>. See the example for our BigCommerce demo below.

Example for BigCommerce:

Command:

docker pull registry.storefrontcloud.io/demo-bigcommerce-storefrontcloud-io/vue-storefront:9ede56a801148cec07523f779f8283b8b8512ea6

Expected output:

9ede56a801148cec07523f779f8283b8b8512ea6: Pulling from demo-bigcommerce-storefrontcloud-io/vue-storefront
620af4e91dbf: Pull complete
fae29f309a72: Pull complete
28fca74d99b6: Pull complete
0b5db87f5b42: Pull complete
fa488706ea13: Pull complete
0380b9b3282f: Pull complete
383dfecd3687: Pull complete
ca59981dc274: Pull complete
4fa5c4b55a85: Pull complete
166f3d9c8ef3: Pull complete
84d1179a29d9: Pull complete
0e4238b3fd97: Pull complete
366fcf1d2c68: Pull complete
57baee41a13d: Pull complete
Digest: sha256:ef52df36244c0e883d8c5b4ec2204558dc3a9f41842322fc7d417b5188eaab8c
Status: Downloaded newer image for registry.storefrontcloud.io/demo-bigcommerce-storefrontcloud-io/vue-storefront:9ede56a801148cec07523f779f8283b8b8512ea6
registry.storefrontcloud.io/demo-bigcommerce-storefrontcloud-io/vue-storefront:9ede56a801148cec07523f779f8283b8b8512ea6

Run the docker image

Use the command docker run to run the docker image locally.

Example for BigCommerce:

Command:

docker run -p 4000:3000 registry.storefrontcloud.io/demo-bigcommerce-storefrontcloud-io/vue-storefront:9ede56a801148cec07523f779f8283b8b8512ea6

Expected output:

WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
yarn run v1.22.19
$ cd packages/theme && yarn start
warning package.json: License should be a valid SPDX license expression
$ nuxt start --modern=client

 WARN  router.scrollBehavior property is deprecated in favor of using ~/app/router.scrollBehavior.js file, learn more: https://nuxtjs.org/api/configuration-router#scrollbehavior

ℹ Listening on: http://172.17.0.2:3000/

Check if your application works accessing localhost:4000. See the curl example belowe:

curl -s localhost:4000 | head -c 500
<!doctype html>
<html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
  <head >
    <title>Vue Storefront | Vue Storefront Demo</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="&gt; The Vue Storefront 2 integration for BigCommerce is only available as part of our [Vue Storefront Enterprise](https://docs.v