Difference between revisions of "Docker/C3/Automating-Docker-Builds/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 318: Line 318:
 
|| The '''login-action''' action performs login using the '''username '''and '''access token'''.
 
|| The '''login-action''' action performs login using the '''username '''and '''access token'''.
 
|-  
 
|-  
|| Highlight '''username: ${{ vars.DOCKER_USERNAME }}'''
+
|| Highlight username:
  
 
|| Then we set the value of the username to '''docker underscore username '''variable'''.'''
 
|| Then we set the value of the username to '''docker underscore username '''variable'''.'''
 
|-  
 
|-  
|| Highlight '''password: ${{ secrets.DOCKERHUB_TOKEN }}'''
+
|| Highlight password:  
 
|| Similarly we set the value of the password to '''dockerhub underscore token '''secret.
 
|| Similarly we set the value of the password to '''dockerhub underscore token '''secret.
 
|-  
 
|-  
Line 341: Line 341:
 
|| '''Push colon true''' denotes that the image will be pushed to '''Docker Hub.'''
 
|| '''Push colon true''' denotes that the image will be pushed to '''Docker Hub.'''
 
|-  
 
|-  
|| Highlight '''tags: ${{ vars.DOCKER_USERNAME }}/node-express:latest'''
+
|| Highlight tags:
 
|| The '''tags '''key specifies the tags to be added for locating the image in '''Docker Hub.'''
 
|| The '''tags '''key specifies the tags to be added for locating the image in '''Docker Hub.'''
 
|-  
 
|-  

Revision as of 18:16, 28 January 2025

Visual Cue Narration
Show slide:

Title Slide

Hello and welcome to the Spoken Tutorial on “Automating Docker Builds”.
Show Slide:

Learning Objectives

In this tutorial, we will learn how to
  • Setup and configure GitHub
  • Automate Docker builds using GitHub
  • Pull and test the built images
Show Slide:

System Requirements

To record this tutorial, I am using
  • Ubuntu Linux OS version 22.04 and
  • Docker version 27.0.2
Show Slide:

Prerequisite

https://www.spoken-tutorial.org

To follow this tutorial,
  • You must have a Docker Hub account
  • You must have a GitHub account

For pre-requisite, please visit the docker series on this website.

Show slide:

Code files

  • The files used in this tutorial are provided in the Code files link.
  • Please download and extract the files.
  • Make a copy and then use them while practicing.
Show slide:

Git Setup - Instruction sheet

  • The instructions to set up Git are provided in the Additional Reading section of this tutorial
  • Go through them to install Git and create a GitHub repository for the code files
Show Slide:

GitHub Actions

  • GitHub Actions is an automation platform.
  • It helps automate software development workflows within GitHub repositories.
  • It runs workflows when code is committed.
  • Workflows automatically build and test the code.
Show slide:

GitHub Actions Flowchartn

This flowchart shows the process of automating building Docker images.

We shall be building a custom Docker image for an Express web server.

The code is similar to the one we demonstrated earlier.

Previously, we built the image manually using Docker build command.

Now, we will automate the process using GitHub Actions.

Show slide:

GitHub Actions Flowchart

The application will run an Express web server.
Show slide:

GitHub Actions Flowchart

The Dockerfile will be the same as the one used previously.
Show slide:

GitHub Actions Flowchart

We will push the application code and Dockerfile to GitHub.
Show slide:

GitHub Actions Flowchart

Then we will set up GitHub Actions for building the image.
Show slide:

GitHub Actions Flowchart

Then GitHub Actions will automatically build the image.

The image will be built everytime code is pushed to GitHub.

Show slide:

GitHub Actions Flowchart

The built image will be automatically pushed to Docker Hub.
Show slide:

GitHub Actions Flowchart

Then the image can be pulled from Docker Hub and used.
Let us see how it works.
Open the Code Files directory in file manager. I have already created the code files for this tutorial.
Highlight the folder node-express and open it. Open the folder node hyphen express.
Highlight the folder express_api.

Open the express_api folder.

The folder express underscore api contains the files for the application.

The Dockerfile contains the instructions for building an image.

The app dot js file contains the code for the Express web server.

The quotes dot js file contains a list of quotations.

Highlight the file gitignore The gitignore file lists the files that are not to be pushed to GitHub.
Open Firefox web browser.

Navigate to the URL: https://github.com/your-username/node-express

I have already created a GitHub repository node hyphen express.

Push the directory express underscore api and the Dockerfile as given in the instruction sheet.

Open a new browser tab.

In the search bar, type https://hub.docker.com.

Press Enter.

Open a new browser tab.

In the search bar, type the address as shown.

Your repositories on Docker Hub will appear.

If this page does not appear, check if you are logged in.

Hover over node-express in the list of Docker images. I have already created a repository for the image node hyphen express.
Click on the user icon on the top right of the website. Click on the user icon on the top right of the Docker Hub website.
Click on Account settings in the drop down menu. In the drop down menu, click on Account settings to open the Settings page.
Under Security, click on Personal access tokens. Under Security, click on Personal access tokens.
Click on the Generate new token button. Click on the Generate new token button.
In the Access token description field, type GitHub Actions.

Highlight GitHub Actions.

In the Access token description field, type GitHub Actions.
In the Access permissions drop down, select Read & Write In the Access permissions drop down, select Read and Write.
Click on the Generate button. Click on the Generate button.

This will generate an Access Token which helps other applications to access Docker Hub.

Highlight Copy access token. A new screen will appear with the title Copy access token.

Here we will copy our access token.

Click on the Copy button next to the access token in the second code box. Click on the Copy button next to the access token in the second code box.
Switch to the browser tab where GitHub is open. Now switch to the GitHub browser tab.
Click on the Settings tab on the ribbon below the username. Make sure you are inside the node hyphen express repository.

Click on the Settings tab on the menu bar below the username.

On the left sidebar, expand Secrets and variables by clicking on it. On the left sidebar, expand Secrets and variables by clicking on it.
Click on Actions.

Highlight Actions secrets and variables.

Click on Actions.

The Actions secrets and variables page will open.

Click on the Variables tab. Now click on the Variables tab.
Under the Repository variables section, click on the New repository variable button. Under the Repository variables section, click on the New repository variable button.
In the Name field type DOCKER_USERNAME. Type DOCKER underscore USERNAME in the Name field.
In the Value field type your Docker Hub username. In the Value field type your Docker Hub username as shown.
Click on the Add variable button. Click on the Add variable button.
Highlight DOCKER_USERNAME This variable will be used in our GitHub Actions workflow file for username.
Click on the Secrets tab. Click on the Secrets tab.

Since Access Tokens need to be secured, we will use GitHub Secrets.

Click on the New repository secret button.

Highlight Actions secrets/New secret

Click on the New repository secret button.
In the Name field, type DOCKERHUB_TOKEN. In the Name field, type DOCKERHUB underscore TOKEN.
In the Secret field, paste the access token by pressing Ctrl and V keys simultaneously. In the Secret field, paste the access token by pressing Ctrl and V keys simultaneously.
Click on the Add secret button. Click on the Add secret button.
Only narration. We have created a Docker Hub token and added it to GitHub secret.
Only narration. Next we will set up GitHub Actions.
Click on the Actions tab in the ribbon below the username. Click on the Actions tab in the menu bar
Click on set up a workflow yourself link. Click on set up a workflow yourself link.
Only narration. If you previously created a workflow, the link may not appear.

In that case, click on the New workflow button in the sidebar.

Then click on the set up a workflow yourself link.

Only narration. A new page will open with an empty code editor window.

We will add code to this editor from the code files.

Switch to file manager (Nautilus).

Open the GitHub-Actions-Script.txt file from Code Files in the text editor.

From the code files, open the file GitHub hyphen Actions hyphen Script dot txt.

Copy the complete code and paste in the editor in the GitHub tab.

Highlight name: Docker Image Build The code follows the YAML syntax.

The name key defines the workflow name Docker Image Build.

Highlight on. The on key specifies the events on which the script will run.
Highlight push The push key indicates that the script will run when code is pushed.
Highlight branches:

- main

The script runs only for the main branch.
Highlight build We define one job named build for building the Docker image.
Highlight runs-on:ubuntu-latest Ubuntu hyphen latest denotes the operating system to run the image.
Highlight steps The steps key defines the steps that will be followed in the job.
Highlight name: Login to Docker Hub The step Login to Docker Hub logs in to Docker Hub.
Highlight uses: docker/login-action@v3 The login-action action performs login using the username and access token.
Highlight username: Then we set the value of the username to docker underscore username variable.
Highlight password: Similarly we set the value of the password to dockerhub underscore token secret.
Highlight name: Set up Docker Buildx Docker buildx plugin helps in building Docker images.
Highlight uses: docker/setup-buildx-action@v3 We use the action setup hyphen buildx hyphen action.
Highlight name: Build and push The next step is building the image and pushing it to Docker Hub.
Highlight uses: docker/build-push-action@v6 Here we use the version 6 of build hyphen push hyphen action
Highlight push: true Push colon true denotes that the image will be pushed to Docker Hub.
Highlight tags: The tags key specifies the tags to be added for locating the image in Docker Hub.
Highlight vars.DOCKER_USERNAME The first part of our tag is our Docker Hub username.
Highlight node-express:latest node hyphen express is the name of our repository.

colon latest is used to denote that the build is the latest build.

Click on Commit changes button Click on Commit changes button on the top right corner under the menu bar.
Click on Commit changes button at the bottom of the dialog box In the dialog box, click on the Commit changes button.
Click on the Actions tab on the top ribbon. Click on the Actions tab on the menu bar.
Hover over Create main.yml under All workflows. A new workflow run will appear under All workflows called Create main dot yml..
Hover on the yellow progress circle on the left of Create main.yaml.

Wait for the green tick mark to appear.

This yellow circle denotes that the build process is running.

Wait for the build process to complete.

Hover on the green tick mark on the left of Create main.yml. The build process is now completed which is indicated by a green tick mark.
Open another browser tab and visit the URL https://hub.docker.com Now open another browser tab and visit the following URL to Docker Hub..
Click on Repositories on the top ribbon. Click on Repositories on the top menu bar.
Click on the node-express repository. Click on the node hyphen express repository.
Under Tags, hover over latest. An image with the latest tag is available here.

This was created and pushed by the GitHub Actions build process.

Only narration. Now we will sync our local code with the GitHub repository.

This is required since we added the GitHub Actions file.

Switch to the terminal window. Switch to the terminal window.

Make sure that you are in the node-express directory in the terminal.

Type git pull origin main.

Press Enter.

Now type git space pull space origin space main.

Press Enter.

Make sure this is the same directory from which you push the code to the github.

Highlight 1 file changed, 26 insertions(+)

Highlight create mode 100644 .github/workflows/main.yml

The output shows that our file main dot yml was fetched.
Only narration. Now we will enable the API in our code that is disabled.
Open the file app.js in the text editor. Open the file app dot js in the text editor.
Highlight app.get('/quote', async (req, res) => {

res.send(getRandomQuote());

})

We will uncomment this code to enable the API
Save the file by pressing Ctrl and S keys simultaneously. Save the file by pressing Ctrl and S keys simultaneously.
Only narration. Now we will push the code to GitHub.

Then, an image will be automatically built by GitHub Actions.

Switch to the terminal window. Switch to the terminal window.

Make sure that you are in the node-express directory .

Type git add . and press Enter. Type git space add space dot and press Enter.
Type git commit -m "Enabled API" and press Enter. To commit the changes, type the command as shown.

Press Enter

Type git push origin main and press Enter. Type git space push space origin space main and press Enter.
Highlight main -> main in the command output. Now our code is pushed to GitHub.
Switch to the browser tab where GitHub is open. Switch to the browser tab where GitHub is open.
Highlight Enabled API under Actions tab. You will see a job workflow run named Enabled API, shown by the yellow circle.
Highlight green tick mark on the left of Enabled API. The build is completed, which is denoted by the green tick mark
Only narration Now we will pull the latest image on Docker Hub with the changes we did.
Switch to the terminal window. Switch to the terminal window.
Type sudo docker pull [docker hub username]/node-express:latest

Highlight [docker hub username]

Press Enter.

Type the code as shown.

Make sure to type your own Docker Hub username.

Press Enter.

Enter password for root account and press Enter. Enter password if prompted and press Enter.
Wait for the download to complete. Wait for the download to complete.

It can take some time depending on your internet speed.

Only narration. Let us now run this image.
Type sudo docker run -d -p 127.0.0.1:3000:3000 [docker hub username]/node-express:latest.

Highlight [docker hub username]

Press Enter.

Type the command as shown.

Make sure to type your own Docker Hub username

Press Enter.

Open a new browser tab.

Type the address http://localhost:3000/quote

Press Enter.

Now open a new browser tab and type the address shown.

This is the endpoint of the Quotes API that we just enabled.

Press Enter.

Highlight the text on the screen. A random quote is displayed.

This confirms that the image was successfully updated in Docker Hub.

Show Slide:

Summary

This brings us to the end of this tutorial. Let us summarise.

In this tutorial, we have learnt how to

  • Setup and configure GitHub
  • Automate Docker builds using GitHub
  • Pull and test the built images
Show Slide: About Spoken Tutorial project The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it

Show Slide:

Spoken Tutorial Workshops

The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Show Slide:

Answers for THIS Spoken Tutorial

Please post your timed queries in this forum.
Show Slide:

FOSSEE Forum

For any general or technical questions on Docker, visit the FOSSEE forum and post your question.
Slide:

Acknowledgement

Spoken Tutorial Project was established by the Ministry of Education, Government of India
Show slide:

Thank You

This is Karthik Chandrasekhar, a FOSSEE Semester Long intern 2024, IIT Bombay, signing off.

Thanks for joining.

Contributors and Content Editors

Madhurig, Nirmala Venkat