Build & Auto Deploy Vue.js App to Server Using GitLab CI/CD
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
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:
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:
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/* [email protected]:/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
[email protected] 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. ?
Preview may take a few seconds to load.
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Bold **double asterisks**
Three back ticks and then enter your code blocks here.
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
> type a greater than sign and start typing your quote.
You can add links by adding text inside of  and the link inside of (), like so:
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of , and the image URL inside of (), like so:
To add a divider you can add three dashes or three asterisks:
--- or ***