Difference between revisions of "Docker/C3/Automating-Docker-Builds/English"
From Script | Spoken-Tutorial
(Created page with "<div style="margin-left:1.27cm;margin-right:0cm;"></div> {| border="1" |- || '''Visual Cue''' || '''Narration''' |- |- style="border:1pt solid #000000;padding-top:0cm;padding-...") |
|||
| Line 1: | Line 1: | ||
| − | + | ||
{| border="1" | {| border="1" | ||
|- | |- | ||
| Line 5: | Line 5: | ||
|| '''Narration''' | || '''Narration''' | ||
|- | |- | ||
| − | |- | + | |- |
|| Show slide: | || Show slide: | ||
'''Title Slide''' | '''Title Slide''' | ||
|| Hello and welcome to the Spoken Tutorial on “'''Automating Docker Builds”.''' | || Hello and welcome to the Spoken Tutorial on “'''Automating Docker Builds”.''' | ||
| − | |- | + | |- |
|| Show Slide: | || Show Slide: | ||
'''Learning Objectives''' | '''Learning Objectives''' | ||
|| In this tutorial, we will learn how to | || 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: | || Show Slide: | ||
'''System Requirements''' | '''System Requirements''' | ||
|| To record this tutorial, I am using | || To record this tutorial, I am using | ||
| − | * | + | * '''Ubuntu Linux '''OS version '''22.04 '''and |
| − | * | + | * '''Docker version 27.0.2''' |
| − | |- | + | |- |
|| Show Slide: | || Show Slide: | ||
| Line 34: | Line 34: | ||
[https://www.spoken-tutorial.org/ https://www.spoken-tutorial.org] | [https://www.spoken-tutorial.org/ https://www.spoken-tutorial.org] | ||
|| To follow this tutorial, | || 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. | For pre-requisite, please visit the docker series on this website. | ||
|- | |- | ||
| − | | | + | || Show slide: |
'''Code files''' | '''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: | || Show slide: | ||
'''Git Setup - Instruction sheet''' | '''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: | || Show Slide: | ||
'''GitHub Actions''' | '''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''' | || Show slide:'''GitHub Actions Flowchartn''' | ||
|| This flowchart shows the process of automating building '''Docker '''images. | || This flowchart shows the process of automating building '''Docker '''images. | ||
| Line 68: | Line 68: | ||
We shall be building a custom '''Docker '''image for an '''Express '''web server. | 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'''. | Now, we will automate the process using '''GitHub Actions'''. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| The application will run an '''Express web server'''. | || The application will run an '''Express web server'''. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| The '''Dockerfile '''will be the same as the one used previously. | || The '''Dockerfile '''will be the same as the one used previously. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| We will push the application code and '''Dockerfile '''to '''GitHub'''. | || We will push the application code and '''Dockerfile '''to '''GitHub'''. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| Then we will set up '''GitHub Actions '''for building the image. | || Then we will set up '''GitHub Actions '''for building the image. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| Then '''GitHub Actions '''will automatically build the image. | || Then '''GitHub Actions '''will automatically build the image. | ||
The image will be built everytime code is pushed to '''GitHub'''. | The image will be built everytime code is pushed to '''GitHub'''. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| The built image will be automatically pushed to '''Docker Hub'''. | || The built image will be automatically pushed to '''Docker Hub'''. | ||
| − | |- | + | |- |
|| Show slide:'''GitHub Actions Flowchart''' | || Show slide:'''GitHub Actions Flowchart''' | ||
|| Then the image can be pulled from '''Docker Hub '''and used. | || Then the image can be pulled from '''Docker Hub '''and used. | ||
| − | |- | + | |- |
|| | || | ||
|| Let us see how it works. | || Let us see how it works. | ||
| − | |- | + | |- |
|| Open the '''Code Files '''directory in file manager. | || Open the '''Code Files '''directory in file manager. | ||
|| I have already created the code files for this tutorial. | || I have already created the code files for this tutorial. | ||
| − | |- | + | |- |
|| Highlight the folder '''node-express''' and open it. | || Highlight the folder '''node-express''' and open it. | ||
|| Open the folder '''node hyphen express'''. | || Open the folder '''node hyphen express'''. | ||
| − | |- | + | |- |
|| Highlight the folder '''express_api'''. | || Highlight the folder '''express_api'''. | ||
| Line 119: | Line 119: | ||
The '''quotes dot js '''file contains a list of quotations. | The '''quotes dot js '''file contains a list of quotations. | ||
| − | |- | + | |- |
|| Highlight the file '''gitignore''' | || Highlight the file '''gitignore''' | ||
|| The '''gitignore '''file lists the files that are not to be pushed to '''GitHub'''. | || The '''gitignore '''file lists the files that are not to be pushed to '''GitHub'''. | ||
| − | |- | + | |- |
|| Open Firefox web browser. | || Open Firefox web browser. | ||
| Line 129: | Line 129: | ||
Push the directory '''express underscore api '''and the '''Dockerfile''' as given in the instruction sheet. | Push the directory '''express underscore api '''and the '''Dockerfile''' as given in the instruction sheet. | ||
| − | |- | + | |- |
|| Open a new browser tab. | || Open a new browser tab. | ||
| Line 142: | Line 142: | ||
If this page does not appear, check if you are logged in. | If this page does not appear, check if you are logged in. | ||
| − | |- | + | |- |
|| Hover over '''node-express '''in the list of Docker images. | || Hover over '''node-express '''in the list of Docker images. | ||
|| I have already created a repository for the image '''node hyphen express'''. | || 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 website. | ||
|| Click on the user icon on the top right of the '''Docker Hub '''website. | || Click on the user icon on the top right of the '''Docker Hub '''website. | ||
| − | |- | + | |- |
|| Click on '''Account settings '''in the dropdown menu. | || Click on '''Account settings '''in the dropdown menu. | ||
|| In the drop down menu, click on '''Account settings '''to open''' '''the '''Settings '''page'''.''' | || 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'''. | ||
|| 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. | ||
|| Click on the '''Generate new token '''button. | || Click on the '''Generate new token '''button. | ||
| − | |- | + | |- |
|| In the '''Access token description '''field, type '''GitHub Actions'''. | || In the '''Access token description '''field, type '''GitHub Actions'''. | ||
Highlight '''GitHub Actions'''. | Highlight '''GitHub Actions'''. | ||
|| In the '''Access token description '''field, type '''GitHub Actions'''. | || In the '''Access token description '''field, type '''GitHub Actions'''. | ||
| − | |- | + | |- |
|| In the '''Access permissions '''dropdown, select '''Read & Write''' | || In the '''Access permissions '''dropdown, select '''Read & Write''' | ||
|| In the '''Access permissions '''dropdown, select '''Read and Write'''. | || In the '''Access permissions '''dropdown, select '''Read and Write'''. | ||
| − | |- | + | |- |
|| Click on the '''Generate '''button. | || Click on the '''Generate '''button. | ||
|| Click on the '''Generate '''button. | || Click on the '''Generate '''button. | ||
| Line 173: | Line 173: | ||
This will generate an '''Access Token''' which helps other applications to access '''Docker Hub'''. | This will generate an '''Access Token''' which helps other applications to access '''Docker Hub'''. | ||
| − | |- | + | |- |
|| Highlight '''Copy access token'''. | || Highlight '''Copy access token'''. | ||
|| A new screen will appear with the title '''Copy access token'''. | || A new screen will appear with the title '''Copy access token'''. | ||
Here we will copy our 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. | ||
|| 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. | || Switch to the browser tab where '''GitHub '''is open. | ||
|| Now switch to the '''GitHub '''browser tab. | || Now switch to the '''GitHub '''browser tab. | ||
| − | |- | + | |- |
|| Click on the '''Settings '''tab on the ribbon below the username. | || Click on the '''Settings '''tab on the ribbon below the username. | ||
| Line 190: | Line 190: | ||
Click on the '''Settings '''tab on the menu bar below the username. | 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. | ||
|| 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'''. | || Click on '''Actions'''. | ||
| Line 200: | Line 200: | ||
The '''Actions secrets and variables '''page will open. | The '''Actions secrets and variables '''page will open. | ||
| − | |- | + | |- |
|| Click on the '''Variables '''tab. | || Click on the '''Variables '''tab. | ||
|| Now 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. | ||
|| 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'''. | || In the '''Name '''field type '''DOCKER_USERNAME'''. | ||
|| Type '''DOCKER underscore USERNAME '''in the '''Name '''field. | || 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. | ||
|| In the '''Value '''field type your '''Docker Hub''' username as shown. | || In the '''Value '''field type your '''Docker Hub''' username as shown. | ||
| − | |- | + | |- |
|| Click on the '''Add variable '''button. | || Click on the '''Add variable '''button. | ||
|| Click on the '''Add variable '''button. | || Click on the '''Add variable '''button. | ||
| − | |- | + | |- |
|| Highlight '''DOCKER_USERNAME''' | || Highlight '''DOCKER_USERNAME''' | ||
|| This variable will be used in our '''GitHub Actions '''workflow file for username. | || This variable will be used in our '''GitHub Actions '''workflow file for username. | ||
| − | |- | + | |- |
|| Click on the '''Secrets '''tab. | || Click on the '''Secrets '''tab. | ||
|| Click on the '''Secrets '''tab. | || Click on the '''Secrets '''tab. | ||
Since '''Access Tokens '''need to be secured, we will use '''GitHub Secrets'''. | Since '''Access Tokens '''need to be secured, we will use '''GitHub Secrets'''. | ||
| − | |- | + | |- |
|| Click on the '''New repository secret''' button. | || Click on the '''New repository secret''' button. | ||
Highlight '''Actions secrets/New secret''' | Highlight '''Actions secrets/New secret''' | ||
|| Click on the '''New repository secret '''button. | || Click on the '''New repository secret '''button. | ||
| − | |- | + | |- |
|| In the '''Name '''field, type '''DOCKERHUB_TOKEN'''. | || In the '''Name '''field, type '''DOCKERHUB_TOKEN'''. | ||
|| In the '''Name '''field, type '''DOCKERHUB underscore 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. | ||
|| 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. | ||
|| Click on the '''Add secret''' button. | || Click on the '''Add secret''' button. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| We have created a '''Docker Hub '''token and added it to '''GitHub '''secret. | || We have created a '''Docker Hub '''token and added it to '''GitHub '''secret. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| Next we will set up '''GitHub Actions.''' | || 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 ribbon below the username. | ||
|| Click on the '''Actions '''tab in the menu bar | || 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. | ||
|| Click on '''set up a workflow yourself '''link. | || Click on '''set up a workflow yourself '''link. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| If you previously created a workflow, the link may not appear. | || If you previously created a workflow, the link may not appear. | ||
| Line 256: | Line 256: | ||
Then click on the '''set up a workflow yourself '''link. | Then click on the '''set up a workflow yourself '''link. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| A new page will open with an empty code editor window. | || A new page will open with an empty code editor window. | ||
We will add code to this editor from the code files. | We will add code to this editor from the code files. | ||
| − | |- | + | |- |
|| Switch to file manager ('''Nautilus).''' | || Switch to file manager ('''Nautilus).''' | ||
| Line 268: | Line 268: | ||
Copy the complete code and paste in the editor in the '''GitHub '''tab. | Copy the complete code and paste in the editor in the '''GitHub '''tab. | ||
| − | |- | + | |- |
|| Highlight '''name: Docker Image Build''' | || Highlight '''name: Docker Image Build''' | ||
|| The code follows the '''YAML '''syntax. | || The code follows the '''YAML '''syntax. | ||
The '''name '''key defines the '''workflow '''name '''Docker Image Build'''. | The '''name '''key defines the '''workflow '''name '''Docker Image Build'''. | ||
| − | |- | + | |- |
|| Highlight '''on'''. | || Highlight '''on'''. | ||
|| The '''on '''key specifies the events on which the script will run. | || The '''on '''key specifies the events on which the script will run. | ||
| − | |- | + | |- |
|| Highlight '''push''' | || Highlight '''push''' | ||
|| The '''push '''key indicates that the script will run when code is pushed. | || The '''push '''key indicates that the script will run when code is pushed. | ||
| − | |- | + | |- |
|| Highlight '''branches:''' | || Highlight '''branches:''' | ||
| Line 285: | Line 285: | ||
|| The script runs only for the '''main '''branch. | || The script runs only for the '''main '''branch. | ||
| − | |- | + | |- |
|| Highlight '''build''' | || Highlight '''build''' | ||
|| We define one job named '''build''' for building the '''Docker image.''' | || We define one job named '''build''' for building the '''Docker image.''' | ||
| − | |- | + | |- |
|| Highlight '''runs-on:ubuntu-latest''' | || Highlight '''runs-on:ubuntu-latest''' | ||
|| '''Ubuntu hyphen latest '''denotes the operating system to run the image. | || '''Ubuntu hyphen latest '''denotes the operating system to run the image. | ||
| − | |- | + | |- |
|| Highlight '''steps''' | || Highlight '''steps''' | ||
|| The '''steps '''key defines the steps that will be followed in the job. | || The '''steps '''key defines the steps that will be followed in the job. | ||
| − | |- | + | |- |
|| Highlight '''name: Login to Docker Hub''' | || Highlight '''name: Login to Docker Hub''' | ||
|| The step '''Login to Docker Hub '''logs in to '''Docker Hub'''. | || The step '''Login to Docker Hub '''logs in to '''Docker Hub'''. | ||
| − | |- | + | |- |
|| Highlight '''uses: docker/login-action@v3''' | || Highlight '''uses: docker/login-action@v3''' | ||
|| 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: ${{ vars.DOCKER_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: ${{ secrets.DOCKERHUB_TOKEN }}''' | ||
|| 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. | ||
| − | |- | + | |- |
|| Highlight '''name: Set up Docker Buildx''' | || Highlight '''name: Set up Docker Buildx''' | ||
|| '''Docker buildx plugin '''helps in building Docker images. | || '''Docker buildx plugin '''helps in building Docker images. | ||
| − | |- | + | |- |
|| Highlight '''uses: docker/setup-buildx-action@v3''' | || Highlight '''uses: docker/setup-buildx-action@v3''' | ||
|| We use the action '''setup hyphen buildx hyphen action'''. | || We use the action '''setup hyphen buildx hyphen action'''. | ||
| − | |- | + | |- |
|| Highlight '''name: Build and push''' | || Highlight '''name: Build and push''' | ||
|| The next step is building the image and pushing it to '''Docker Hub.''' | || The next step is building the image and pushing it to '''Docker Hub.''' | ||
| − | |- | + | |- |
|| Highlight '''uses: docker/build-push-action@v6''' | || Highlight '''uses: docker/build-push-action@v6''' | ||
|| Here we use the version 6 of '''build hyphen push hyphen action''' | || Here we use the version 6 of '''build hyphen push hyphen action''' | ||
| − | |- | + | |- |
|| Highlight''' push: true ''' | || Highlight''' push: true ''' | ||
|| '''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: ${{ vars.DOCKER_USERNAME }}/node-express:latest''' | ||
|| 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.''' | ||
| − | |- | + | |- |
|| Highlight '''vars.DOCKER_USERNAME''' | || Highlight '''vars.DOCKER_USERNAME''' | ||
|| The first part of our tag is our '''Docker Hub '''username. | || The first part of our tag is our '''Docker Hub '''username. | ||
| − | |- | + | |- |
|| Highlight '''node-express:latest''' | || Highlight '''node-express:latest''' | ||
| Line 335: | Line 335: | ||
'''colon latest '''is used to denote that the build is the latest build. | '''colon latest '''is used to denote that the build is the latest build. | ||
| − | |- | + | |- |
|| Click on '''Commit changes '''button | || Click on '''Commit changes '''button | ||
|| Click on '''Commit changes '''button on the top right corner under the menu bar. | || 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 | || Click on '''Commit changes '''button at the bottom of the dialog box | ||
|| In the dialog box, click on the '''Commit changes '''button. | || 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 top ribbon. | ||
|| Click on the '''Actions '''tab on the menu bar. | || Click on the '''Actions '''tab on the menu bar. | ||
| − | |- | + | |- |
|| Hover over '''Create main.yml '''under '''All workflows'''. | || Hover over '''Create main.yml '''under '''All workflows'''. | ||
|| A new workflow run will appear under '''All workflows''' called '''Create main dot yml'''.. | || 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'''. | || Hover on the yellow progress circle on the left of '''Create main.yaml'''. | ||
| Line 355: | Line 355: | ||
Wait for the build process to complete. | Wait for the build process to complete. | ||
| − | |- | + | |- |
|| Hover on the green tick mark on the left of '''Create main.yml'''. | || 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. | || 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/ https://hub.docker.com] | || Open another browser tab and visit the URL [https://hub.docker.com/ https://hub.docker.com] | ||
|| Now open another browser tab and visit the following URL to '''Docker Hub.'''. | || 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 ribbon. | ||
|| Click on '''Repositories '''on the top menu bar. | || Click on '''Repositories '''on the top menu bar. | ||
| − | |- | + | |- |
|| Click on the '''node-express '''repository. | || Click on the '''node-express '''repository. | ||
|| Click on the '''node hyphen express '''repository. | || Click on the '''node hyphen express '''repository. | ||
| − | |- | + | |- |
|| Under '''Tags, '''hover over '''latest'''. | || Under '''Tags, '''hover over '''latest'''. | ||
|| An image with the latest''' '''tag is available here. | || An image with the latest''' '''tag is available here. | ||
This was created and pushed by the '''GitHub Actions '''build process. | This was created and pushed by the '''GitHub Actions '''build process. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| Now we will sync our local code with the '''GitHub '''repository. | || Now we will sync our local code with the '''GitHub '''repository. | ||
This is required since we added the '''GitHub Actions '''file. | This is required since we added the '''GitHub Actions '''file. | ||
| − | |- | + | |- |
|| Switch to the terminal window. | || Switch to the terminal window. | ||
|| Switch to the terminal window. | || Switch to the terminal window. | ||
Make sure that you are in the''' node-express '''directory in the terminal. | Make sure that you are in the''' node-express '''directory in the terminal. | ||
| − | |- | + | |- |
|| Type '''git pull origin main'''. | || Type '''git pull origin main'''. | ||
| Line 392: | Line 392: | ||
Make sure this is the same directory from which you push the code to the github. | Make sure this is the same directory from which you push the code to the github. | ||
| − | |- | + | |- |
|| Highlight '''1 file changed, 26 insertions(+)''' | || Highlight '''1 file changed, 26 insertions(+)''' | ||
Highlight '''create mode 100644 .github/workflows/main.yml''' | Highlight '''create mode 100644 .github/workflows/main.yml''' | ||
|| The output shows that our file '''main dot yml''' was fetched. | || The output shows that our file '''main dot yml''' was fetched. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| Now we will enable the API in our code that is disabled. | || 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.js '''in the text editor. | ||
|| Open the file '''app dot js '''in the text editor. | || Open the file '''app dot js '''in the text editor. | ||
| − | |- | + | |- |
|| Highlight '''app.get('/quote', async (req, res) => {''' | || Highlight '''app.get('/quote', async (req, res) => {''' | ||
| Line 410: | Line 410: | ||
'''})''' | '''})''' | ||
|| We will uncomment this code to enable the API | || 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. | ||
|| Save the file by pressing '''Ctrl '''and '''S '''keys simultaneously. | || Save the file by pressing '''Ctrl '''and '''S '''keys simultaneously. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| Now we will push the code to '''GitHub'''. | || Now we will push the code to '''GitHub'''. | ||
Then, an image will be automatically built by '''GitHub Actions.''' | Then, an image will be automatically built by '''GitHub Actions.''' | ||
| − | |- | + | |- |
|| Switch to the terminal window. | || Switch to the terminal window. | ||
|| Switch to the terminal window. | || Switch to the terminal window. | ||
Make sure that you are in the''' node-express '''directory . | Make sure that you are in the''' node-express '''directory . | ||
| − | |- | + | |- |
|| Type '''git add . '''and press Enter. | || Type '''git add . '''and press Enter. | ||
|| Type '''git space add space dot '''and press Enter. | || Type '''git space add space dot '''and press Enter. | ||
| − | |- | + | |- |
|| Type '''git commit -m "Enabled API"''' and press Enter. | || Type '''git commit -m "Enabled API"''' and press Enter. | ||
|| To commit the changes, type the command as shown. | || To commit the changes, type the command as shown. | ||
Press Enter | Press Enter | ||
| − | |- | + | |- |
|| Type '''git push origin main '''and press '''Enter.''' | || Type '''git push origin main '''and press '''Enter.''' | ||
|| Type '''git space push space origin space main '''and press '''Enter'''. | || Type '''git space push space origin space main '''and press '''Enter'''. | ||
| − | |- | + | |- |
|| Highlight '''main -> main '''in the command output. | || Highlight '''main -> main '''in the command output. | ||
|| Now our code is pushed to '''GitHub.''' | || 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. | ||
|| Switch to the browser tab where '''GitHub '''is open. | || Switch to the browser tab where '''GitHub '''is open. | ||
| − | |- | + | |- |
|| Highlight '''Enabled API''' under '''Actions '''tab. | || Highlight '''Enabled API''' under '''Actions '''tab. | ||
|| You will see a job workflow run named '''Enabled API, '''shown by the yellow circle'''.''' | || 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.''' | || Highlight green tick mark on the left of '''Enabled API.''' | ||
|| The build is completed, which is denoted by the green tick mark | || The build is completed, which is denoted by the green tick mark | ||
| − | |- | + | |- |
|| Only narration | || Only narration | ||
|| Now we will pull the latest image on '''Docker Hub '''with the changes we did. | || 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. | ||
|| Switch to the terminal window. | || Switch to the terminal window. | ||
| − | |- | + | |- |
|| Type '''sudo docker pull '''['''docker hub username]/node-express:latest''' | || Type '''sudo docker pull '''['''docker hub username]/node-express:latest''' | ||
| Line 465: | Line 465: | ||
Press Enter. | Press Enter. | ||
| − | |- | + | |- |
|| Enter password for root account and press Enter. | || Enter password for root account and press Enter. | ||
|| Enter password if prompted and press Enter. | || Enter password if prompted and press Enter. | ||
| − | |- | + | |- |
|| Wait for the download to complete. | || Wait for the download to complete. | ||
|| Wait for the download to complete. | || Wait for the download to complete. | ||
It can take some time depending on your internet speed. | It can take some time depending on your internet speed. | ||
| − | |- | + | |- |
|| Only narration. | || Only narration. | ||
|| Let us now run this image. | || Let us now run this image. | ||
| − | |- | + | |- |
|| Type '''sudo docker run -d -p 127.0.0.1:3000:3000 [docker hub username]/node-express:latest'''. | || Type '''sudo docker run -d -p 127.0.0.1:3000:3000 [docker hub username]/node-express:latest'''. | ||
| Line 487: | Line 487: | ||
Press Enter. | Press Enter. | ||
| − | |- | + | |- |
|| Open a new browser tab. | || Open a new browser tab. | ||
| Line 498: | Line 498: | ||
Press Enter. | Press Enter. | ||
| − | |- | + | |- |
|| Highlight the text on the screen. | || Highlight the text on the screen. | ||
|| A random quote is displayed. | || A random quote is displayed. | ||
| Line 504: | Line 504: | ||
This confirms that the image was successfully updated in '''Docker Hub'''. | This confirms that the image was successfully updated in '''Docker Hub'''. | ||
|- | |- | ||
| − | | | + | || Show Slide: |
'''Summary''' | '''Summary''' | ||
| − | | | + | || This brings us to the end of this tutorial. Let us summarise. |
In this tutorial, we have learnt how to | 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''' | || Show Slide: '''About Spoken Tutorial project''' | ||
|| The video at the following link summarizes the '''Spoken Tutorial project'''. | || The video at the following link summarizes the '''Spoken Tutorial project'''. | ||
| Line 520: | Line 520: | ||
Please download and watch it | 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. | For more details, please write to us. | ||
| − | |- | + | |- |
|| Show Slide: | || Show Slide: | ||
'''Answers for THIS Spoken Tutorial''' | '''Answers for THIS Spoken Tutorial''' | ||
|| Please post your timed queries in this forum. | || Please post your timed queries in this forum. | ||
| − | |- | + | |- |
| − | || Show Slide: '''FOSSEE Forum''' | + | || Show Slide: |
| + | |||
| + | '''FOSSEE Forum''' | ||
|| For any general or technical questions on '''Docker''', visit the FOSSEE forum and post your question. | || For any general or technical questions on '''Docker''', visit the FOSSEE forum and post your question. | ||
| − | |- | + | |- |
| − | || Slide: '''Acknowledgement''' | + | || Slide: |
| + | |||
| + | '''Acknowledgement''' | ||
|| Spoken Tutorial Project was established by the Ministry of Education, Government of India | || Spoken Tutorial Project was established by the Ministry of Education, Government of India | ||
| − | |- | + | |- |
|| Show slide: | || Show slide: | ||
Revision as of 17:41, 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
|
| Show Slide:
System Requirements |
To record this tutorial, I am using
|
| Show Slide:
Prerequisite |
To follow this tutorial,
For pre-requisite, please visit the docker series on this website. |
| Show slide:
Code files |
|
| Show slide:
Git Setup - Instruction sheet |
|
| Show Slide:
GitHub Actions |
|
| 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 dropdown 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 dropdown, select Read & Write | In the Access permissions dropdown, 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: $Template:Vars.DOCKER USERNAME | Then we set the value of the username to docker underscore username variable. |
| Highlight password: $Template:Secrets.DOCKERHUB TOKEN | 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: $Template:Vars.DOCKER USERNAME/node-express:latest | 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
|
| 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. |
