DEV Community

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

Posted on • Updated 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✅🚀


LinkedIn

Top comments (0)