Github Actions Tutorials: Setup Docker Hub + Github Workflow CI / CD Pipeline (Step by step guide)

Tram Ho

Today, I will be doing a tutorial on setting up a GitHub Action Workflow to automatically build your source code into a Docker Image when you push to the branch master. Then, will automatically deploy Docker Image to Docker Hub. Ok, let’s get started together.

If you do not know me, I would like to introduce. My name is Phú and I am currently an IT engineer in Tokyo, Japan.

I will have a small question for you:

Have you used CI / CD yet? If you are using it, please leave a comment below about the name of the tool you are using: Jenkins, CircleCI or TravisCI etc.

Overview of pipeline:

Note: This is just a pipeline that I have simplified for learning purposes. CI / CD Pipeline in Production environment will be much more complex.

Full GitHub Workflow file (I will explain each step below):

About the Repository used

Git Repository:

To start, I will introduce a little bit about the repository that I use today.

This is a simple Hello World microservice I wrote in Python 3 using Flask Framework. If you are not familiar with Python, you can rewrite it with Node.JS or PHP. But you will have to rewrite the Dockerfile file.

This tutorials I want to focus on introducing GitHub Actions, so I will use a simple code sample as possible

In this repository, the source code will be in the file. I wrote an API using Flask and Flask Restful library. This API will return a JSON Response: {"hello": "world"} .

Step 1: Checkout

Step 1.1: Create a Workflow with Environment

To set up Github Actions Workflow,

  • We will need to create a folder: .github .
  • In the .github folder, we will need to create a folder called workflows .

The workflow file will be located at: .github/workflows

(This is github’s default path, not my own idea)

Github Workflow will be defined using a YAML file. The writing style of the YAML file is easy to understand, it will only take you about 5-10 minutes to get used to it.

To create today’s workflow, I will create the file: .github/workflows/build.yaml .

First I will define 1 workflow flask-helloword .

Next up is on: push together with branches is master . That means the Workflow will run when you push into the branch master.

In a Workflow will include many Jobs .

I will create a Job called docker . Next is the definition of the Job docker runtime .

Here, ubuntu-latest means Ubuntu 18.04 version

Step 1.2: Setup Checkout

To define steps in a Job, we use steps . Then a list (as YAML is written).

The first step I need to define is step check out (ie checkout source code from the repository to ubuntu).

Here, we will use a Github Action named: actions / [email protected] .

Step 1.3: Check

To check, I will push to the branch master . On the menu bar you will see a tab called Actions

Once clicked, the left side will be a list of created Workflows.

You will see Workflow flask-helloworld .

On the right side will be the first commit I just pushed up with the message: “ADD workflow “.

After clicking on the commit, the left side will make a list of Workflow Jobs upon it.

You will see the Job named ” docker ” that we define.

After clicking on the Job Docker, the screen will show the Output Log of the Job and you can check.

  • At step Setup, the runtime is Ubuntu 18.04 . and action / [email protected] is downloaded at this time
  • Step Checkout run and clone your Git Repository.

So we are done with how to write, and check out GitHub Workflow at the simplest stage!

Step 2: Login Docker Hub

Note: To do this step You will need to create a Docker Hub account.

Link Register:

Step 2.1: Create a Docker Hub Personal Access Token

Once you have a Docker Hub account. You will need to create a Personal Access Token. Here’s how to do it: You will click on your profile picture, and open the Account Settings section.

After the Account Setting interface appears, you will scroll down a bit and open the Security section.

After clicking, the screen will show a button ” New Access Token “.

You will click and create a Personal Access Token, then Copy available for use in step 2.2.

Step 2.2: Create GitHub Secrets

Above the Github Menu , you will see the Settings Tab .

Once clicked, the left side will have the Secrets menu. You will create 2 GitHub Secrets as follows:

  • DOCKERHUB_ACCESS_TOKEN : Here you will Copy> Paste Personal Access Token created in Step 2.1.

  • DOCKERHUB_USERNAME : The value of Secrets, you will enter the username of your Docker Hub .

Step 2.3: Setup Docker Login

This step will use a Github Action named: docker / [email protected]

This is the official Github Actio n from Docker .

This Github Action will need 2 information:

  • username
  • password

To inject Github Secret into Github Workflow. We will use syntax

  • $ {{secrets.DOCKERHUB_USERNAME}}
  • $ {{secrets.DOCKERHUB_ACCESS_TOKEN}}

So we have finished setup step: Docker Hub Login!

Step 2.4: Check

Similar to Step 1.3, I will push commit to GitHub.

After the push is complete, I will open the Output Log interface of Docker Job.

And wait for step Login Docker Hub finishes running.

You will see the output ” Login Succeeded ” which means it was successful.

Step 3: Build and Push on Docker Hub

Step 3.1: Setup Docker BuildX

In this step I use a Github Action named docker / [email protected]

>> Docker Buildx

Is a CLI Plugin extending Docker Build based on Moby Buildkit. Buildx is an experimental feature of Docker and was installed with docker from version 19.03 onwards.

Step 3.2: Setup Docker Build – Push

Next, I will create a step called Build and Push Docker Image. This step will use a GitHub Action named: docker / [email protected] with the parameter is

  • context: path to the folder running Docker Build (here will be ./ )
  • file: path to dockerfile file
  • builder: use the output from step 3.1
  • push: true (after build will push Image)
  • tags: use DOCKERHUB_USERNAME with the image name flask-helloworld .

In this step I will also assign the id : docker_build to use in the next step.

Step 3.3: Setup Verify

And I will add a step to test the build result named ” Verify “. This step will simply run the command echo (to run the command, I will use the config as run ) Here will be echo with the output of the step: build and push

.digest is the output of Git Hub Action: docker / [email protected]

Step 3.4: Check

To check, I will Push to the branch master and open the Tab Actions on Github.

  • Step: Build and Push : You will see the Push time is 5.7 seconds.

  • Step: Verify : the digest output of the Docker Image is printed (quite a long string)

  • Docker Hub : Check that the Docker Image has been pushed onto the Docker Hub.

Step 4: Optimize Docker Build Cache

Step 4.1: Setup Cache

The final step, which we will have to do is optimize the Docker Build Cache. They will use a Github Action named action / cache

action/cache is used to cache dependencies and build outputs of other Github Actions.

In terms of usage, we have 3 pieces of information to define:

  • path : a list of files and folders to cache and read. Here I will value is /tmp/.buildx-cache
  • key : is the string used to read and store the cache
  • restore-keys : if using key does not find cache, then will continue to use keys in restore-keys

Next in the Build and Push step, I will add 2 config keys are:

  • cache-from : will read from local folder named /tmp/.buildx-cache
  • cache-to : will write the cache to the local folder /tmp/.buildx-cache

Step 4.2: Check

Similarly, to test, I will push to the master branch and open the Actions interface on GitHub ,

You should see a new commit named ” MODIFY add docker cache layer action

Temporarily because it is the first run, ” Step: Cache Docker Image Layer ” will have an output saying that the cache cannot be found (” Cache not found “).

But basically, the steps in our pipelines run well.

So we are done with the Github Actions Workflow setup with Docker Hub!

To support me to continue producing even better content,

You can use the Youtube Channel to Like and Subscribe your videos.

> Youtube channel: Phu Le IT <<

In addition, you can contact me via Social Channels:

My Blog Page (English):


Thank you! Arigatou Gozaimasu!

Share the news now

Source : Viblo