Docker-Image-with-GitHub-Actions

This repo provides a guide 📗 to creating a simple pipeline to build ⚙ and upload docker 🐳 image artifacts to the docker hub 🐳 repo with the help of GitHub actions as changes take place in GitHub main branch.

Prerequisites

Docker 🐳 basics.
- introduction to docker 🐳
- Docker 🐳 complete course
Yaml 📄 basics
- Yaml 📄 tutorial
- Yaml 📄 Complete course

Note

If you are viewing this page from GitHub pages then some code for GitHub secrets will not be shown, you will only see a $ sign. Check out GitHub repo from 👉Here for the correct code.

Scanario

For this demo, the application is to be dockerized 🐳 in a static site. It is a simple game of guessing 🤔 numbers between 0 0️⃣ to 9 9️⃣. You access this page Here

Screenshot

Repository structure

   /src
     index.html
     index.css
   /Dockerfile
   /README.md

Let’s take a look 👀 at source files 🗃

/src - This folder contains source files 📁 for our static site.
Dockerfile - This is a basic Dockerfile 🐳 which specifies how the image should be built from the source. We will take a look 👀 at this in a moment.
README.md - This is the file 📄 you currently reading.

Dockerfile

Dockerfile 🐳 provides a set of instuctions to build ⚙ the image. For this repo it looks 👀 like the following.

    FROM nginx
    ADD src/* /usr/share/nginx/html/
    EXPOSE 80
    CMD ["nginx","-g","daemon off;"]

Let’s take a look 👀 at each instruction to understand what these instructions mean

FROM nginx - This line tells docker 🐳 to use Nginx 🆖 as the official image as a base image for our new image.
ADD src/* /usr/share/nginx/html/ - This line copies files 🗃 of src folder inside the /usr/share/nginx/html/ folder of image. /usr/share/nginx/html/ folder is used by the nginx 🆖 server as entry point of website.
EXPOSE 80 - This line tells docker 🐳 to open port 80 inside the docker 🐳 container so that we can communicate with the nginx 🆖 server inside.
CMD ["nginx","-g","daemon off;"] - This last cline starts Nginx 🆖 server and runs ▶ every time the docker 🐳 container start.

It’s all about what we need to get started. Let’s take a look 👀 how to setup GitHub actions to create a pipeline.

Steps to create 🛠 a pipeline

Create github workflow

Open github repo and click on actions option.
Search 🔍 for Simple workflow and select the most suitable from the option that appeared.
Rename the file 📄 with the name you want for your workflow.

Writing Code 👨‍💻 for workflow

Replace 🔁 the code 👩‍💻 of workflow with the following.
```
 name:
 on:
 jobs:
```
Let’s understand 🤔 what this code 👩‍💻 means
- The lines starting with # represents comments in YAML.
- name: - Defines the name for your workflow.
- on: - When we create a GitHub action, we want the action to run ▶ on certain events i.e push to a branch. This on parameter describes the events in which the action is going to run ▶.
- jobs: - jobs work section is the place where we define what going to happen when events specified in the on: section occurs.
Give a name to your workflow
```
 name: Docker image CI
```

Specify the event of our interest in this case push event

Add event
```
 name: Docker image CI
 on:
   push:
```

Add branches for which we going to perform some action

 name: Docker image CI
 on:
   push:
     branches: [ "main" ]

Now the remaining part of the workflow is jobs section. Jobs define the set of actions (Tasks) to be performed. These action can run ▶ sequentially or in parallel. for this demo we are just going to create one job named docker-build.
```
   name: Docker image CI
   on:
      push:
        branches: [ "main" ]
   jobs:
      docker-build:
```
Each job section has following things
- runs-on: - Tells 📢 the platform on which this job(Task) is going to run ▶ on. For this demo, we are taking ‘ubuntu-latest’.
- steps: - This defines a set of steps to be performed to get the job done.
- Now our code 👩‍💻 will look 👀 like this.
```
   name: Docker image CI
   on:
      push:
        branches: [ "main" ]
   jobs:
      docker-build:
           runs-on: ubuntu-latest
           steps: 
```
Each step in steps walk section has the following parts
- name: - name of the step
- run: - set of command 💻 to run ▶
- uses: - rerefence of any other action which is used by the current steps. The referenced action will run ▶ first.optional
- Apart from these, there are many other optional parts.
Add the following code 👨‍💻 in the steps section
```
- uses: actions/checkout@v3
- name: Build the Docker image
  run: |
```
- notice | after run: this allows us to write multiple commands 💻.

To build ⚙ image add the following command 💻 to the Build the Docker image step and replace <image_name> With the name of your choice.

 docker build . --file Dockerfile --tag <image_name>

Now our file 📄 look 👀 something like this

   name: Docker image CI
   on:
     push:
       branches: [ "main" ]
   jobs:
       docker-build:
          runs-on: ubuntu-latest
            steps:
              - uses: actions/checkout@v3
              - name: Build the Docker image
                run: |
                   docker build . --file Dockerfile --tag hackthenumber

Notice 📝 the uses part specifies actions/checkout@v3. This action checks if our repository is present and if we have access to it.
Command 💻 docker build . --file Dockerfile --tag hackthenumber builds ⚙ an image named hackthenumber it is currently stored at the local system at which the job is running.

Login 🔐 to dockerhub 🐳

To make push the image to the docker hub 🐳 we need to login to the docker hub 🐳. Docker recommends creating access tokens for logins 🔐 instead of using password 🔑.
- Creating dockerhub 🐳 Access token 🗝
  - To create an access token login 🔐 to docker hub 🐳. Goto access Account Setting > Security > New Access token.
  - Enter description for the token and click generate ⚙.
  - Select Copy and Close.
- Adding passwords 🔑 directly to workflow files 📄 can be a potential threat. To make this secure GitHub provides secrets to store passwords 🔑 etc. To add the secrets to GitHub repo do the following.
  - Goto your repo.
  - Open Settings 🔧.
  - Select Secret > Actions > New Repository Secret
  - Add DOCKERHUB as name and your docker hub username as secret.
  - Add another secret for TOKEN as the name and paste the access token you generated ⚙ in the previous step.
- Login 🔐 to Dockerhub 🐳
  - Add the following lines to run part to login 🔐
    docker login -u $ -p $
Tag image to refer to Dockerhub 🐳 repo
- To tag image add the following command 💻 by replacing <image_name> with the image name you have choosen for your image
```
docker tag <image_name> $/<image_name> 
```
- With our choosen name it will look 👀 like something this
```
docker tag hackthenumber $/hackthenumber
```
Add the following line to push image to dockerhub 🐳
```
 docker push $/hackthenumber
```

Now our file 📄 will look 👀 like something this

   name: Docker image CI
   on:
     push:
       branches: [ "main" ]
   jobs:
       docker-build:
           runs-on: ubuntu-latest
              steps:
                 - uses: actions/checkout@v3
                 - name: Build the Docker image
                   run: |
                      docker build . --file Dockerfile --tag hackthenumber
                      docker login -u $ -p $
                      docker tag hackthenumber $/hackthenumber
                      docker push $/hackthenumber

Similarly, you can add code to test if everything is working fine in the same script. After adding the testing code, our final code will look like this.

  name: Docker image CI
  on:
    push:
      branches: [ "main" ]
  jobs:
    docker-build:
          runs-on: ubuntu-latest
          steps:
            - uses: actions/checkout@v3
            - name: Build the Docker image
              run: |
                    docker build . --file Dockerfile --tag hackthenumber
                    docker login -u $ -p $
                    docker tag hackthenumber $/hackthenumber
                    
    docker-test:
          runs-on: ubuntu-latest
          needs: docker-build
          steps:
            - uses: actions/checkout@v3
            - name: Test image presence
              run: |
                docker image inspect $/hackthenumber
                if [[ $? -eq 1 ]]; then
                    echo "❌ Image not found!"
                    exit 1  # This will cause the job to fail
                else
                    echo "✅ Image Build Successfully!"
                fi
            - name: Test image response
              run: |
                    docker run -itdp 8000:80 --rm $/hackthenumber
                    response=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:8000)
                    if [[ $response -ne 200 ]]; then
                      echo "❌ Image response is not 200!"
                      exit 1
                    else
                      echo "✅ Image response is 200!"
                    fi
    docker-deploy:
          runs-on: ubuntu-latest
          needs: docker-test
          steps:
              - uses: actions/checkout@v3
              - name: Deploy to docker hub
                run: |
                  docker push $/hackthenumber && echo "✅ Deployed to Docker Hub" || echo "❌ Deployment to Docker Hub failed"

Quick Test deployed image

Go to https://labs.play-with-docker.com and login 🔐 with dockerhub 🐳 credentials.
Click start and then Add New Instance.
Run ⚙ the command 💻 docker run -dp 8080:80 <username>/<image_name> by replacing <username> with the dockerhub username and <image_name> with the image name used in the GitHub action. For example
```
docker run -dp 8080:80 sandeepsource/hackthenumber
```
Click the port number 8080 on the right side of the open port button. If the button for port 8080 not appeared then click the open port button and enter 8080 and click ok.
Now if everything is gone well 🙌 you will able to see following output.

This site is open source. Improve this page.