Streamline Your Vue Development with Docker and GitLab CI

Get Started with Vue CLI

To begin, ensure you have the latest version of Node installed on your local machine. Next, install Vue CLI by running the command:

npm install -g @vue/cli

Verify the installation by running:

vue --version

Create a Vue Application

Use Vue CLI to create a new application by running:

vue create vue-demo

Select the default preset and press enter to continue. Change into the vue-demo directory and run:

npm run serve

to make your application accessible on localhost via port 8080. Visit http://localhost:8080 to view your application.

Set Up GitLab

Head over to GitLab’s website and log into your account or create one if you don’t have one already. Create a new project by clicking the green “New project” button. Name the project vue-demo and leave the project description empty. You can choose to make it a public or private repository.

Associate Your Local Repository with GitLab

In your terminal, navigate to the application directory and run:

git remote add origin https://gitlab.com/<your-gitlab-username>/vue-demo.git

Replace <your-gitlab-username> with your actual GitLab username. You’ll be prompted to input your GitLab password or authenticate via SSH.

Configure Your Pipeline

Create a new file named Dockerfile without any extension and paste the following configuration:

FROM node:alpine
WORKDIR /app
COPY package*.json./
RUN npm install
COPY..
RUN npm run build

FROM nginx:alpine
COPY. /usr/share/nginx/html

This configuration pulls the Node Alpine image for building your application and the Nginx Alpine image for serving your build codebase.

Next, create a.gitlab-ci.yml file with the following configuration:

image: node:alpine

stages:
  - deploy

deploy-job:
  stage: deploy
  script:
    - npm run build
    - npm install -g serve
    - serve dist
  only:
    - master

This configuration creates a communication channel with the server, allowing you to deploy your changes.

Configure Your Server

Provision an Ubuntu server on DigitalOcean and SSH into it. Install GitLab Runner by running:

sudo apt-get update && sudo apt-get install gitlab-runner

Register a pipeline by running:

gitlab-runner register

and following the prompts.

Install Docker by running:

sudo apt-get update && sudo apt-get install docker.io

Set permissions for Docker by running:

sudo usermod -aG docker gitlab-runner

Reboot your server and add GitLab Runner to the Docker group.

Verify Your Information

Run:

gitlab-runner verify

to verify your information. If the user and host attribute details don’t match your server, correct them in this section.

Test Deployment

Head over to the pipeline menu from your project’s GitLab dashboard and click “Run Pipeline”. Select a branch to deploy from (default is master) and click “Run Pipeline”. Your application deployment will begin. Click on the “step-deploy-…” button to see the process. Once deployment succeeds, you’ll see a “Job succeeded” message.

Visit your server IP address on your browser to see the Vue landing page, indicating successful deployment. Your application will build and deploy itself on every push made to the master branch automatically.