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
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.
Take Your Debugging to the Next Level
Debugging Vue.js applications can be challenging, especially with dozens of mutations during a user session. Try LogRocket, a DVR for web and mobile apps that records everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and more. With LogRocket, you can aggregate and report on what state your application was in when an issue occurred. Modernize your debugging experience – start monitoring for free.