Deployment

To deploy your application on Vue Storefront Cloud, you need to have the package consisted of the application code and the Git repository. All examples presented in this documentation are based on GitHub and GitHub Actions. What is also worth mentioning, all commands requiring npm have been replaced by using yarn.

VSF App Prerequisites

At the beginning, you need to install the vue-storefront/cli by running:

yarn global add @vue-storefront/cli@3.0.1

Now when CLI is installed, you can create the Vue Storefront application.

vsf init <project_name>

You can find more information about VSF installation process in Vue Storefront official documentation (opens new window).

Create a Git repository

GitHub is a place where your repository with the code will be created. An entire process of repository setup is described in a more detailed way in GitHub official documentation (opens new window). Go to the VSF application directory and run the below command, remember to replace <git_repo_url> with a valid one matching your repository.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <git_repo_url>
git push -u origin main

Dockerfile

A docker image with a built-in application is required to be launched on VSF Cloud. To build such, a Dockerfile has to be created and located in the directory .vuestorefrontcloud/docker, example below:

FROM node:16

WORKDIR /var/www

COPY . .

RUN yarn install --network-concurrency 1 && yarn build && yarn cache clean --all

COPY .vuestorefrontcloud/docker/vue-storefront.sh /usr/local/bin/

ENTRYPOINT ["vue-storefront.sh"]

The vue-storefront.sh script in the entrypoint is a file which needs the executive privileges.

#!/bin/sh
set -e

yarn start

To make this script executable, run chmod a+x .vuestorefrontcloud/docker/vue-storefront.sh command.

To deploy the VSF application, a docker image should be pushed to our Docker Registry. An image can be built and pushed manually, but establishing this in an automated way is always a better approach. GitHub Actions can be very helpful in such cases.

GitHub Actions Workflow

To execute GitHub Actions, a pipeline manifest has to be located in .github/workflows within the repository. Presented template can be used to create such a deploy-storefrontcloud.yml workflow.

name: Deploy to Vue Storefront Cloud
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v1
      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"
      - name: Build and publish docker image
        if: github.ref == 'refs/heads/main'
        uses: elgohr/Publish-Docker-Github-Action@master
        with:
          name: <vsfc_project_name>-storefrontcloud-io/vue-storefront:${{ github.sha }}
          registry: registry.vuestorefront.cloud
          username: ${{ secrets.VSFC_USER_ID }}
          password: ${{ secrets.VSFC_API_KEY }}
          dockerfile: .vuestorefrontcloud/docker/Dockerfile
          buildoptions: "--compress"

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: chrnorm/deployment-action@releases/v1
        name: Create GitHub deployment
        id: deployment
        with:
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>.gcp.storefrontcloud.io
          environment: production
          initial_status: in_progress
      - name: Deploy on <vsfc_project_name>.<region>.gcp.storefrontcloud.io
        if: github.ref == 'refs/heads/main'
        run: |
          if curl -s -H 'X-User-Id: ${{ secrets.VSFC_USER_ID }}'  -H 'X-Api-Key: ${{ secrets.VSFC_API_KEY }}' -H 'Content-Type: application/json' -X POST -d '{"code":"<vsfc_project_name>","region":"<region>.gcp","frontContainerVersion":"${{ github.sha }}"}' https://farmer.storefrontcloud.io/instances | grep -q '{"code":200,"result":"Instance updated!"}'; then
            echo "Instance updated"
          else
            echo "Something went wrong during the update process..."
            exit 1
          fi
      - name: Update deployment status (success)
        if: success()
        uses: chrnorm/deployment-status@releases/v1
        with:
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>.gcp.storefrontcloud.io
          state: "success"
          description: Congratulations! The deploy is done.
          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
      - name: Update deployment status (failure)
        if: failure()
        uses: chrnorm/deployment-status@releases/v1
        with:
          token: "${{ github.token }}"
          target_url: https://<vsfc_project_name>.<region>.gcp.storefrontcloud.io
          description: Unfortunately, the instance hasn't been updated.
          state: "failure"
          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

In a first place, please remember to fill out the template with a valid data:

<vsfc_project_name> should be replaced by your Vue Storefront Cloud instance name
<region> should be replaced by your instance region (it is similar with Googlce Cloud Platform regions (opens new window)).

Secondly, secrets (opens new window) VSFC_USER_ID and VSFC_API_KEY have to be created as a secret variables in a GitHub repository. Their content will be provided by VSF.

Deploy stage

Having GitHub Actions configured in a presented manner, the application is ready to be automatically deployed after a git push. Run the following commands to push the latest code changes to the GitHub repository.

git add .
git commit -am "Adding deployment configuration"
git push

Once succeeded, you should be notified by the similar information:

Run chrnorm/deployment-status@releases/v1
with:
    token: ***
    target_url: https://<vsfc_project_name>.<region>.gcp.storefrontcloud.io
    state: success
    description: Congratulations! The deploy is done.
    deployment_id: 320563724

← CI/CD

Command Line Access →