DEV Community

Cover image for Leveraging GitHub Actions, Docker, Code Quality, and Slack Integration
Lester Diaz Perez
Lester Diaz Perez

Posted on

Leveraging GitHub Actions, Docker, Code Quality, and Slack Integration

📌Prerequisites:

The web repository could be any of you wish

🎯Workflow

1️⃣Build🧱 & Test🧪
2️⃣Dockerize🐳 the web project
3️⃣Upload💹 image to your docker hub account


1️⃣Build🧱 & Test🧪

Why do what others have already done?

Github Actions has a marketplace where you can find🔎 any pipeline that any other developer has developed.

Writing✏ the pipeline

  • Inside repo -> Click in Actions

Image description

  • Create the workflow -> Enter New workflow
    Image description

  • Search for a NodeJs pipeline

Image description

  • Adjust the pipeline to your needs An example of my pipeline stages

Image description

2️⃣Dockerize🐳 the web project

So, if you want to contain the application, you just have to write a dockerfile

🚨 Packing the NodeJs project

  • Create a dockerfile.ci at the root project directory
FROM node:18
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
COPY app.js ./
RUN npm install
#web port
EXPOSE 8000
CMD ["node", "app.js"]
Enter fullscreen mode Exit fullscreen mode

3️⃣Upload💹 image to your docker hub account

  • Go to github marketplace🛒
  • Looking for build and push dockerhub

I like this pipeline

#Name of Job
 to_dockerhub:
    runs-on: ubuntu-latest
    #Wait for ending test process
    needs: test

    steps:

    - uses: actions/checkout@v3
      name: Check out code

    - uses: mr-smithers-excellent/docker-build-push@v6
      name: Build & push Docker image
      with:
        #Name's dockerhub / Name as you want
        image: sharker3312/nodeapp
        tags: v1, latest
        registry: docker.io
        dockerfile: Dockerfile.ci
        username: ${{ secrets.DOCKER_USERNAME }}
        password: ${{ secrets.DOCKER_PASSWORD }}
Enter fullscreen mode Exit fullscreen mode

Create the secret for login

  • Go to Settings

Image description

  • In left panel Click
  • Secrets and Variables -> Actions

Image description

  • Enter the secrets

Image description


🎬Run the workflow

Image description


🔦Check the dockerhub repository

Image description

Done✅🚀

Top comments (0)