Configuring GitHub Actions in projects to build and push a Docker image to Docker Hub.

Image credits- Docker, Unsplash

GitHub Actions, the automation tool to add CI/CD workflow for projects on GitHub, is currently available in beta.

Although the public release is still more than a month away, on November 13, GitHub marketplace has already seen a good number of actions to help with CI/CD for almost all major platforms.

Note: In this article, we’ll talk about the various steps to integrate the CI/CD workflow in a project that uses Docker. We’ll be focusing on GitHub actions configurations in projects that use docker — the basics of what Docker is and its uses are out of scope here.

Prerequisites

This tutorial assumes that you know how docker works and have a project that uses it. Make sure that you have the Dockerfile in the root folder of your project. The example project used here is a very basic project that has just one Python file. The complete code can be downloaded from the github repository.

If you haven’t done so already, sign up for GitHub Actions public beta here.

First, we will go through the basic steps required to configure GitHub actions in a project. This is common for all projects running on any platform.

1. Creating a Project and Add Workflow file

The first obvious step is to create a GitHub project and connect your Flutter project with the repository.

If you have successfully completed the sign-up process for Actions beta, you should be able to see a new Actions tab for your project right next to pull requests.

Actions tab in the repository.

GitHub provides predefined workflows for many of the most popular platforms out there and you can customize or create entirely new ones in a visual editor as well.

In this project though, we’ll be taking the manual approach by creating a YAML file with the workflow commands.

In the root folder of your Pytho project, create a new folder .github and create the sub-folder workflows. This is where our workflow YAML files will reside.

A project can have multiple workflow files like build, release, etc., but for the sake of simplicity, we’ll be using only one file for this project. Create one final file, named main.yml, in the workflow folder:

Creating a GitHub folder and adding the workflow file

2. Writing Commands

Now we have to add a command in our main.yml file to execute actions required. Here’s the entire code for main.yml. :

main.yml

For better understanding, we will go through each line and its use:

line 1: The name of the workflow, as you want to show up in the actions tab.

line 2: We want to trigger our workflow when someone pushes the code to our repo.

lines 3–6: We are defining a job which runs on ubuntu-latest. Each job runs in a fresh instance of a virtual environment. A job can contain one or more steps.

line 7: This is the first step in our workflow. We pull the source code from our repository using a GitHub Action called checkout. This action checks out your repository to $GITHUB_WORKSPACE, so that your workflow can access the contents of your repository.

lines 8–9: Here we use the GitHub action publish docker which builds a docker image and pushes it to docker hub.

lines 8–9: Here we use the GitHub action publish docker, which builds a docker image and pushes it to docker hub.

lines 8–9: Here we define the parameters required to push to docker hub:

• name is the name of the image or repository you would like to push to the docker hub.
• username the login username for the registry (docker hub username).
• password the login password for the registry (docker hub password ).

3. Adding Secret keys

As you may be wondering: we cannot mention the username and password directly in the yml file since this would be very bad for security.

So we add these credentials to the secrets of our project.

To add this go to the repository settings for your project at <repo url>/settings/secrets. In the Secrets tab, add secret keys with the same name from your workflow file (*DOCKER_USERNAME* and *DOCKER_PASSWORD*) and paste the values:

Adding new secret keys in repository settings.

That’s it — just commit your code and push it. This will trigger a docker build and push the image automatically — within minutes, depending on your project size.

4. Checking the Workflow execution and Image

Once you have pushed the code you can check the workflow execution in action by going to <repo URL>/actions and see the image by going to [https://cloud.docker.com/repository/](https://cloud.docker.com/repository/)

Workflow commands getting executed for a push event

Docker Image pushed from GitHub on docker hub.

That's it!

I’m planning another article on pushing Docker images directly to live web projects to update them. I will update the link here when I’m done.

Meanwhile, If you are new to docker check out playwithdocker, a site that gives you an online playground to explore Docker and also http://dockerlabs.collabnix.com/ for various tutorials.