Automate Your Docker Builds with GitHub Actions

Over the last two weeks, we solved two massive DevOps problems. First, we stopped deploying manually by building a CI/CD pipeline with GitHub Actions. Then, we solved the "it works on my machine" problem by containerizing a Node.js app with Docker.

Today, we are going to combine these two superpowers.

Running docker build manually on your laptop every time you change a line of code is tedious. Instead, we are going to configure GitHub Actions to automatically build your Docker image and push it to Docker Hub the second you push your code to the main branch.

Let's automate it.

Prerequisites

• A free Docker Hub account.

• A basic Node.js application with a Dockerfile (If you don't have one, follow my 5-step Docker tutorial here).

• A GitHub repository with an active Actions workflow (Learn how to set one up in 10 minutes here).

Step 1: Create a Docker Hub Access Token

To let GitHub securely push images to your Docker Hub account, we need to give it a "password" in the form of an Access Token.

1. Log in to Docker Hub.

2. Click your profile picture in the top right and select Account Settings.

3. Click on Personal access tokens then Generate new token.

4. Name it github-actions-token, give it "Read & Write" permissions, and click Generate.

5. Copy this token immediately (you won’t be able to see it again).

Step 2: Add Your Secrets to GitHub

Now, we need to hand that token over to GitHub safely. Never hardcode passwords in your code!

1. Go to your repository on GitHub.

2. Click the Settings tab at the top.

3. On the left sidebar, scroll down to Secrets and variables and click Actions.

4. Click the green New repository secret button.

Create two distinct secrets:

• Name: DOCKER_USERNAME | Secret: Your actual Docker Hub username.

• Name: DOCKER_PASSWORD | Secret: The Access Token you copied in Step 1.

Step 3: Update Your GitHub Actions Workflow

Open up the .github/workflows/ci.yml file we created a couple of weeks ago. We are going to add a new job to our pipeline.

Replace your existing file contents with this updated YAML code:

name: Node.js CI/CD and Docker Build

on:
  push:
    branches: [ "main" ]

jobs:
  build-and-push-docker-image:
    runs-on: ubuntu-latest

    steps:
    # Step A: Check out the repository code
    - name: Checkout code
      uses: actions/checkout@v3

    # Step B: Log in to Docker Hub using our secure secrets
    - name: Log in to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKER_USERNAME }}
        password: ${{ secrets.DOCKER_PASSWORD }}

    # Step C: Build the Docker image and push it to Docker Hub
    - name: Build and push
      uses: docker/build-push-action@v4
      with:
        context: .
        push: true
        # Replace 'yourusername' with your actual Docker Hub username
        tags: yourusername/my-node-app:latest

Make sure to change yourusername on the very last line to your actual Docker Hub username!

Step 4: Push and Watch the Automation

Save your file, commit the changes, and push it up to GitHub.

git add .github/workflows/ci.yml
git commit -m "feat: add docker build and push automation"
git push origin main

Head over to the Actions tab in your GitHub repository. You will see your new workflow spinning up. GitHub is now renting a tiny Ubuntu server, checking out your code, logging into Docker Hub, building your image based on your Dockerfile, and pushing the final product to the cloud.

Once you get the green checkmark, go check your Docker Hub profile. Your brand-new image will be sitting right there, ready to be pulled by any server in the world.

The Takeaway

You have just built a professional-grade continuous delivery pipeline.

From now on, all you have to do is write your code and type git push. The robots handle the rest. This is the exact workflow used by top tech companies, and you just implemented it for free.

Next week, we are going to look at a quick debugging trick: how to fix the dreaded "Port Already in Use" error when working with Docker locally.

If you are enjoying this DevOps series, you can ☕ buy me a coffee here to support my work. See you next Tuesday!