2017-09-12-vuejs-app-gitlab.html.md 5.96 KB
Newer Older
William Chia's avatar
William Chia committed
title: "How to use GitLab CI/CD for Vue.js"
3 4 5
author: Simon Tarchichi
author_gitlab: kartsims
author_twitter: vuetips
Rebecca Dodd's avatar
Rebecca Dodd committed
categories: engineering
7 8 9
guest: true
image_title: '/images/blogimages/build-test-deploy-vue.jpg'
twitter_image: '/images/tweets/gitlab-ci-vuejs-tweet.png'
William Chia's avatar
William Chia committed
10 11
description: "Learn how to get the most out of GitLab CI/CD with this guide from VueTips."
tags: CI/CD, user stories
12 13

William Chia's avatar
William Chia committed
The author of [VueTips.com](http://vuetips.com/) walks through how to use GitLab CI/CD to build, test, and deploy Vue.js apps easily.
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<!-- more -->

Continuous Integration allows you to:

- Deploy your app instantly, when new code is pushed into a repo
- Build your app (in our case `npm run build`)
- Trigger test scripts (and block deployment if a test fails)

It is definitely worth the effort if you update your app regularly.

GitLab is a service that started as an open-source GitHub competitor, mostly to host code in Git repositories, and evolved into an amazing tool that I won’t introduce here, as it isn’t related to Vue.js. One thing though, they were one of the first major companies to use Vue.js for their user interface.

Docker has to be mentioned as well. It is the most popular containerization service. It basically means you get to execute code in a secure environment, configured exactly like your dev/prod. Very useful when you need to make sure your code is executed with all its dependencies.

William Chia's avatar
William Chia committed
Each of these tools would require many posts to be covered. We’ll focus on setting up CI/CD for your Vue.js project. We’ll assume you have no knowledge in the matter.

William Chia's avatar
William Chia committed
[GitLab CI/CD is free for personal projects](/gitlab-com/), I don’t know any other tool with such a beautiful UI that does that. If you do, please let me know.
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

### The .gitlab-ci.yml file

Create a `.gitlab-ci.yml` file at the root of your repo. GitLab will check for this file when new code is pushed. If the file is present, it will define a [pipeline](https://docs.gitlab.com/ee/ci/pipelines.html), executed by a [GitLab Runner](http://docs.gitlab.com/runner/). Click the links if you are curious, or keep reading to see a working example.

Default stages of a pipeline are:

1. build
1. test
1. deploy

Again, you don’t need to master this, but this is the most common use case. You may not have set up unit tests, and if you haven’t, you may remove this step from the file, GitLab won’t mind.

Here is our file, you may copy/paste it in your repo:

build site:
  image: node:6
  stage: build
    - npm install --progress=false
    - npm run build
    expire_in: 1 week
      - dist

unit test:
  image: node:6
  stage: test
    - npm install --progress=false
    - npm run unit

  image: alpine
  stage: deploy
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete dist/ user@server.com:/your/project/path/

### Test our file

Now commit and push the `.gitlab-ci.yml` file to your GitLab repo.

Here is how it will look in the Pipelines tab of GitLab UI:

William Chia's avatar
William Chia committed
![GitLab CI/CD Pipelines](/images/blogimages/gitlab-ci-pipelines.png){: .shadow}<br>
86 87 88 89 90

The green checkmark indicates that the step has succeeded and you can see the logs when clicking it.

In the second example, the tests have failed, click the red mark to read the logs and understand what went wrong.

William Chia's avatar
William Chia committed
![GitLab CI/CD logs](/images/blogimages/gitlab-ci-failed.png){: .shadow}<br>
92 93 94 95 96 97 98 99 100 101 102 103 104 105 106

### File anatomy

- `image` is the link to the Docker image. I have chosen to use public official images, but you may use one from the Docker Hub or a private registry.

- `stage` should be `build`, `test` or `deploy` if you use defaults. But that [can be customized](https://docs.gitlab.com/ee/ci/yaml/README.html#sts=stages).

- `script` are command lines executed inside our build environment.

- `artifacts` describes a path to the build result. The files in this path can be used in the next build steps (in `deploy` in our example). You can download artifacts from Gitlab UI.

More about the `.gitlab-ci.yml` file options [in the docs](https://docs.gitlab.com/ee/ci/yaml/README.html).

### About the deployment script

Matija Čupić's avatar
Matija Čupić committed
I have described my use case here, but it may not be the simplest. Relevant examples for [deployment to Amazon S3](/2016/08/26/ci-deployment-and-environments/) or other services can be found online.
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126

To get it working, you’ll need to **provide GitLab with a private SSH key**. If you are no security expert, then it is time to take advice from one. The bottom line is **do not give it your private SSH key**, create one that is used only by GitLab.

# create gitlab user
adduser gitlab

# generate a DSA SSH key
su -l gitlab
ssh-keygen -t dsa

# authorize the key to log in using the public key and output the private one
cd .ssh
mv id_dsa.pub authorized_keys
cat id_dsa && rm id_dsa

Then go to GitLab UI “Settings” (the gear icon), then “Variables” and copy/paste the content of your terminal in “Value”. The “Key” should be `SSH_PRIVATE_KEY`. This private key will be used to do the `rsync`.

William Chia's avatar
William Chia committed
![GitLab CI/CD variables](/images/blogimages/gitlab-ci-variables.png){: .shadow}<br>
128 129 130 131

## Links

- [Sample GitLab repository](https://gitlab.com/kartsims/vue-ci)
William Chia's avatar
William Chia committed
- [Gitlab CI/CD docs](https://docs.gitlab.com/ee/ci/README.html)
133 134 135 136 137 138 139 140 141 142 143

If you need more information, leave a comment I’ll be happy to help you if I can.

## About the Guest Author

Simon Tarchichi is a freelance UX/frontend developer. His blog VueTips shares the insight of a Vue.js developer, tackling common issues and providing practical examples to get the work done. It's made with love and passion.

_[GitLab CI for Vue.js](http://vuetips.com/introduction-continuous-integration-gitlab) was originally published on VueTips._

"[Golden Gate Bridge Vista Point](https://unsplash.com/@tigesphotos?photo=-BiEu8VP9-M)" by [Tiger Robinson](https://unsplash.com/@tigesphotos) on Unsplash
{: .note}