In this article, We’re going to learn how to build and auto-deploy Vue.js application to our own server using GitLab CI/CD. Let’s start:

Table of Contents

1. Install GitLab Runner & Register
2. Generate SSH Key
3. GitLab CI Configuration
4. Push Project & Test

Install GitLab Runner & Register

GitLab Runner can be installed and used on GNU/Linux, macOS, FreeBSD, and Windows. Please read GitLab’s doc to install a runner on your machine.

After installing the runner, we need to register it for our project. Create a project on GitLab and navigate to Settings > CI/CD > Runners. Then read this doc to register the runner.

Select Docker as the executor at the time of registering the runner. You’ll be asked to enter the default docker image. You can select this image as the default:

alpine:latest

If everything is okay, you’ll find your runner on CI/CD page like this:

Generate SSH Key

We need to create an SSH key to login to server without password. To create an SSH key just run this command:

ssh-keygen

# or,
ssh-keygen -t rsa -C "[email protected]" -b 4096

After generating SSH key, run this command to get the key content:

cat ~/.ssh/id_rsa

Now go to Settings > CI/CD > Variables and add a new variable called SSH_PRIVATE_KEY & enter the key content.

GitLab CI Configuration

Go to your existing Vue.js project directory or create a Vue project (vue create vue-s3) and go to the project folder. Now create a GitLab CI configuration file called .gitlab-ci.yml. Let’s configure this file:

stages:
   - build
   - deploy

# build stage
build_app:
   image: node:alpine
   stage: build
   only:
      - master
   script:
      - npm install
      - npm run build
   cache:
     paths:
       - node_modules/
   artifacts:
      paths:
         # build folder
         - dist/
      expire_in: 1 hour

# production stage
production:
   stage: deploy
   before_script:
      - mkdir -p ~/.ssh
      - echo -e "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
      - chmod 600 ~/.ssh/id_rsa
      - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
   script:
      - scp -r dist/* username@server-ip-address:/var/www/html/

I’ve setup CentOS server & installed httpd webserver. The default path of httpd webserer is /var/www/html. You need to set your webserver default path or project’s webhost path.

And don’t forget to replace username@server-ip-address with your info.

Push Project & Test

Let’s push the local Vue.js application to GitLab. Go to CI/CD >> Pipelines page to show the process. If you follow all the steps correctly, your application will be deployed to the server successfully.

Now you can update your application content locally & push to GitLab to see the auto-deploy process in the Pipelines page.

The tutorial is over. You can download this project from GitHub. Thank you.