How to create automated Docker images for Vue apps using GitHub Actions

Content

• Introduction
• Add a Dockerfile
• Create a workflow
• Set up repository secrets
• Conclusion

Introduction

Creating Docker images for your VueJS apps and pushing them to your Dockerhub account can be easily done using GitHub Actions.
Here we will show you the steps to achieve it.

Add a Dockerfile

Once you have a VueJS app in a github repository, you will need to define a Dockerfile for GitHub to know how to build the Docker image.
Add a Dockerfile in the root directory of your existing project, then add and commit the file to your GitHub repository.

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Create a workflow

1. Go to Actions and click in "set up a workflow yourself".
2. Create the workflow in main.yml and commit the file.

name: Create image

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
  workflow_dispatch:

jobs:
  Docker:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16

      - name: setup git config
        run: |
          git config user.name "GitHub Actions Bot"
          git config user.email "<>"

      - name: Dependecies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Push new version
        run: git push

      - name: Login to DockerHub Registry
        run: echo ${{ secrets.DOCKERHUB_PASSWORD }} | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} --password-stdin

      - name: Build Docker image
        run: docker build . --file Dockerfile --tag victoriamartinsahagun/vueapp:latest
#replace victoriamartinsahagun with your DockerHub username
#replace vueapp with the image name

      - name: Push to Docker Hub
        run: docker push victoriamartinsahagun/vueapp:latest
#replace victoriamartinsahagun with your DockerHub username
#replace vueapp with the image name

Set up repository secrets.

1. Login Docker Hub. If you don’t have an account you can sign up.
2. Go to your GitHub repository settings, look for "Secrets Actions" and click on “New repository secret”.

Then add the following secrets:
DockerHub Username

• Name: DOCKERHUB_USERNAME
• Value: your Docker Hub username

Docker Hub Password
For the password you will need to generate an Access Token in Docker Hub. Go to your Docker Hub account settings, click "Security" and crate a new Access Token.

It will open a new window, then copy the personal access token and paste it as the value of DOCKERHUB_PASSWORD secret.

Conclusion

Congratulations! Your GitHub repository is now configured to create new images and push them to Docker Hub everytime you make a push or create a pull request to it automatically!

Written by

• Gonzalo Riquelme Ludwig
• Victoria Martin Sahagun