Automating Vue.js Deployments with GitLab CI/CD and Up2Share Static Website

Deploying static websites manually can be a tedious and error-prone task. With the power of GitLab CI/CD and Up2Share Static Website, you can automate this process for your Vue.js applications. This guide will walk you through the steps to set up a CI/CD pipeline that builds your Vue.js application and deploys it to your Up2Share Static Website.

Prerequisites

Before we dive in, make sure you have the following:

1. A Vue.js project.
2. An Up2Share Static Website endpoint ready to receive deployments.
3. A GitLab repository to store your Vue.js project.
4. API key for authentication.

Step 1: Setting Up Your Vue.js Project

Ensure your package.json has the necessary scripts to build your Vue.js application. Use vite instead of the deprecated vue-cli-service:

{
  "scripts": {
    "build": "vite build"
  }
}

Step 2: Creating the GitLab CI/CD Configuration

Create a .gitlab-ci.yml file in the root of your Vue.js project. This file will define the stages of your CI/CD pipeline.

Defining the Stages

Your CI/CD pipeline will have two main stages: build and deploy.

Step 3: Configuring the Build Stage

In the build stage, we will install dependencies and build the Vue.js application.

stages:
  - build
  - deploy

variables:
  # Directory where Vue.js build output is stored
  BUILD_DIR: dist

build:
  stage: build
  image: node:18
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - $BUILD_DIR

Step 4: Adding Environment Variables

Go to your GitLab project settings, navigate to CI / CD > Variables, and add the following variables:

• API_KEY: Your API key for the Up2Share Static Website endpoint.
• WEBSITE_ID: The ID of the website you are deploying to.

Step 5: Configuring the Deploy Stage

In the deploy stage, we will zip the build output and send it to the Up2Share Static Website.

deploy:
  stage: deploy
  image: curlimages/curl:latest
  script:
    - apt-get update -y && apt-get install -y zip
    - cd $BUILD_DIR
    - zip -r ../build.zip .
    - cd ..
    - |
      curl -X POST "https://api.up2sha.re/v1/static-websites/${WEBSITE_ID}/deployments" \
        -H "X-Api-Key: ${API_KEY}" \
        -F "file=@build.zip" \
        -F "version=${CI_COMMIT_TAG}"
  only:
    - tags

Explanation of the Deploy Job

• Image: We use the curlimages/curl:latest image for deployment.
• Install zip: Installs the zip utility.
• Zip the build output: Zips the contents of the dist directory.
• Send to Up2Share Static Website: Uses curl to POST the zip file to the Up2Share Static Website, including the X-Api-Key header for authentication and passing the version as the commit tag.

Step 6: Triggering the Pipeline

Push your changes to your GitLab repository. Tag your release in GitLab to trigger the pipeline:

git tag -a v1.0.0 -m "Release version 1.0.0"
git push origin v1.0.0

Monitoring the Pipeline

Go to your GitLab project and navigate to CI / CD > Pipelines to monitor the progress of your pipeline. Ensure that both the build and deploy stages complete successfully.

Conclusion

By following these steps, you’ve set up an automated CI/CD pipeline that builds and deploys your Vue.js application to an Up2Share Static Website using GitLab CI/CD. This setup ensures that your deployments are consistent and reduces the manual effort required to keep your static websites up-to-date.

Happy deploying!