|
|
Line 1: |
Line 1: |
− | <div style="margin-left:1.27cm;margin-right:0cm;"></div>
| + | |
| {| border="1" | | {| border="1" |
| |- | | |- |
Line 5: |
Line 5: |
| || '''Narration''' | | || '''Narration''' |
| |- | | |- |
− | |- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;" | + | |- |
| || Show slide: | | || Show slide: |
| | | |
| '''Welcome''' | | '''Welcome''' |
− | | style="color:#000000;" | Hello and welcome to the '''Spoken Tutorial '''on “'''Building Docker Images'''”. | + | || Hello and welcome to the '''Spoken Tutorial '''on “'''Building Docker Images'''”. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Learning Objectives'''</div>
| + | '''Learning Objectives''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">In this tutorial, we will learn about</div> | + | || In this tutorial, we will learn about |
| | | |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Building '''Docker images''' </div> | + | * Building '''Docker images''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Pushing '''images '''to '''Docker Hub '''</div> | + | * Pushing '''images '''to '''Docker Hub ''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Image layers''' and size optimization </div> | + | * '''Image layers''' and size optimization |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''System Requirements'''</div>
| + | '''System Requirements''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | To record this tutorial,I am using | + | || To record this tutorial, I am using |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux OS 22.04 '''and</div> | + | * '''Ubuntu Linux OS 22.04 '''and |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Docker '''version '''27.0.2'''</div> | + | * '''Docker '''version '''27.0.2''' |
| | | |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Show Slide: | + | ||Show Slide: |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To follow this tutorial,</div> | + | || To follow this tutorial, |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">You must have basic knowledge of using Linux terminal</div> | + | * You must have basic knowledge of using Linux terminal |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">For pre-requisite Linux tutorials, please visit this website</div> | + | * For pre-requisite Linux tutorials, please visit this website |
| + | |
| | | |
− | <div style="color:#000000;"></div>
| |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show slide:</div> | + | || Show slide: |
| | | |
− | <div style="color:#000000;">'''Code files'''</div>
| + | '''Code files''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | | + | || |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">The files used in this tutorial are provided in the '''Code files''' link.</div> | + | * The files used in this tutorial are provided in the '''Code files''' link. |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Please download and extract the files.</div> | + | * Please download and extract the files. |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Make a copy and then use them while practicing.</div> | + | * Make a copy and then use them while practicing. |
| | | |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Show Slide: | + | ||Show Slide: |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">These are the steps for building '''Docker images'''.</div> | + | || These are the steps for building '''Docker images'''. |
| | | |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Write a '''Dockerfile '''and required code files</div> | + | * Write a '''Dockerfile '''and required code files |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Build the '''Docker image'''</div> | + | * Build the '''Docker image''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Run the '''Docker image'''</div> | + | * Run the '''Docker image''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Push to '''Docker Hub'''</div> | + | * Push to '''Docker Hub''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Pull and run the '''image''' on the target machine</div> | + | * Pull and run the '''image''' on the target machine |
| | | |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Building Docker Image Process Flowchart'''</div>
| + | '''Building Docker Image Process Flowchart''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">In this tutorial, we'll build an '''Express web server''' using a custom '''Docker '''image.</div> | + | || In this tutorial, we'll build an '''Express web server''' using a custom '''Docker '''image. |
| | | |
− | <div style="color:#000000;">This flowchart explains the process of building a '''Docker image'''.</div>
| + | This flowchart explains the process of building a '''Docker image'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">Hover over '''Dockerfile '''block</div>
| + | Hover over '''Dockerfile '''block |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To build a '''Docker image''', we need a '''Dockerfile''' which is a text document.</div> | + | || To build a '''Docker image''', we need a '''Dockerfile''' which is a text document. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Building Docker Image Process Flowchart'''</div>
| + | '''Building Docker Image Process Flowchart''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">The folder '''express underscore api '''contains '''app dot js''' file for the application.</div> | + | || The folder '''express underscore api '''contains '''app dot js''' file for the application. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Building Docker Image Process Flowchart'''</div>
| + | '''Building Docker Image Process Flowchart''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | The image will be built using '''docker build '''command. | + | ||The image will be built using '''docker build '''command. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | | + | || |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">The image will run the application code.</div> | + | || The image will run the application code. |
| | | |
− | <div style="color:#000000;">We need a '''nodejs environment''' for <span style="background-color:#ffffff;">running the </span><span style="background-color:#ffffff;">'''Express web server'''</span>.</div>
| + | We need a '''nodejs environment''' for running the '''Express web server'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | | + | || |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We will use the '''official Node js''' image from '''Docker Hub''' as the base image. | + | ||We will use the '''official Node js''' image from '''Docker Hub''' as the base image. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Building Docker Image Process Flowchart'''</div>
| + | '''Building Docker Image Process Flowchart''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">After the image is built, '''docker run '''command is used to run the image.</div> | + | || After the image is built, '''docker run '''command is used to run the image. |
− | <div style="color:#000000;">A new '''container '''will be created based on the '''image'''.</div>
| + | A new '''container '''will be created based on the '''image'''. |
| | | |
− | <div style="color:#000000;">It will execute the commands and run the '''Express server '''on our '''Linux OS'''.</div>
| + | It will execute the commands and run the '''Express server '''on our '''Linux OS'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Let us see how to implement this. | + | ||Let us see how to implement this. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Only narration</div> | + | || Only narration |
| | | |
− | <div style="color:#000000;">Point to '''Downloads''' folder</div>
| + | Point to '''Downloads''' folder |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | I have downloaded the code files and saved it in my '''Downloads''' folder. | + | ||I have downloaded the code files and saved it in my '''Downloads''' folder. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Open '''Downloads '''directory in file manager. | + | ||Open '''Downloads '''directory in file manager. |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">We can see '''Dockerfile '''and '''express underscore api''' folder.</div> | + | || We can see '''Dockerfile '''and '''express underscore api''' folder. |
| | | |
− | <div style="color:#000000;">Let us open the '''Dockerfile '''in the text editor.</div>
| + | Let us open the '''Dockerfile '''in the text editor. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Here,we have a set of commands required to create an '''image'''. | + | ||Here,we have a set of commands required to create an '''image'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''FROM node:latest''' | + | || Highlight '''FROM node:latest''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">This command will pull the latest official '''Nodejs''' image from '''Docker Hub'''.</div> | + | ||This command will pull the latest official '''Nodejs''' image from '''Docker Hub'''. |
| | | |
− | <div style="color:#000000;">This is the base image for the application.</div>
| + | This is the base image for the application. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''RUN''' | + | || Highlight '''RUN''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Here, '''RUN '''keyword executes the command specified after it. | + | || Here, '''RUN '''keyword executes the command specified after it. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''mkdir /home/app''' | + | || Highlight '''mkdir /home/app''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This command creates an '''app '''directory in the image’s file system. | + | || This command creates an '''app '''directory in the image’s file system. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''COPY ./express_api /home/app''' | + | || Highlight '''COPY ./express_api /home/app''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | '''COPY''' command copies the contents of the express''' api '''folder''' '''into the '''app '''directory. | + | || '''COPY''' command copies the contents of the express''' api '''folder''' '''into the '''app '''directory. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''WORKDIR /home/app''' | + | || Highlight '''WORKDIR /home/app''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | '''WORKDIR '''command makes '''app '''directory as our working directory | + | || '''WORKDIR '''command makes '''app '''directory as our working directory |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''RUN npm init -y && npm install express --save''' | + | || Highlight '''RUN npm init -y && npm install express --save''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This command installs the required '''Node js '''packages for our application. | + | || This command installs the required '''Node js '''packages for our application. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''CMD [ "node", "app.js" ]''' | + | || Highlight '''CMD [ "node", "app.js" ]''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | The '''CMD '''command runs the '''Node js '''application. | + | || The '''CMD '''command runs the '''Node js '''application. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Next let us look into the code of our application. | + | || Next let us look into the code of our application. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Switch to '''Downloads '''directory in File Manager</div> | + | ||Switch to '''Downloads '''directory in File Manager |
| | | |
− | <div style="color:#000000;">Open '''app.js'''</div>
| + | Open '''app.js''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | In the '''express underscore api '''folder, open the app''' dot js '''file in a text editor. | + | || In the '''express underscore api '''folder, open the app''' dot js '''file in a text editor. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration. | + | || Only narration. |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This application uses the '''Express '''framework to create a '''web API.''' | + | || This application uses the '''Express '''framework to create a '''web API.''' |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''const express = require('express');''' | + | || Highlight '''const express = require('express');''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | First we bring in the '''Express''' tool to help build the '''server '''using this command. | + | || First we bring in the '''Express''' tool to help build the '''server '''using this command. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''const app = express();''' | + | || Highlight '''const app = express();''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Then, this command line creates the''' main app '''to handle requests and responses. | + | || Then, this command line creates the''' main app '''to handle requests and responses. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''app.use(express.json());''' | + | || Highlight '''app.use(express.json());''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This command line allows the app to understand data sent in JSON format. | + | || This command line allows the app to understand data sent in JSON format. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''const PORT = 3000;''' | + | || Highlight '''const PORT = 3000;''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">This command line set the '''port''' number to '''3000'''. </div> | + | ||This command line set the '''port''' number to '''3000'''. |
| | | |
− | <div style="color:#000000;">The application will listen for incoming '''HTTP requests '''on this '''port'''.</div>
| + | The application will listen for incoming '''HTTP requests '''on this '''port'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Highlight '''app.get('/', async (req, res) => {'''</div> | + | ||Highlight '''app.get('/', async (req, res) => {''' |
| | | |
− | <div style="color:#000000;">'''res.send("Express server is running");'''</div>
| + | '''res.send("Express server is running");''' |
| | | |
− | <div style="color:#000000;">'''});'''</div>
| + | '''});''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">When someone opens the main page, this command listens for their '''request'''.</div> | + | ||When someone opens the main page, this command listens for their '''request'''. |
| | | |
− | <div style="color:#000000;">It thens ends back the message, '''Express server is running.'''</div>
| + | It then sends back the message, '''Express server is running.''' |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Highlight''' app.listen(PORT, () => {'''</div> | + | ||Highlight''' app.listen(PORT, () => {''' |
| | | |
− | <div style="color:#000000;">'''console.log(`Server started at http://localhost:${PORT}`);'''</div>
| + | '''console.log(`Server started at http://localhost:${PORT}`);''' |
| | | |
− | <div style="color:#000000;">'''});'''</div>
| + | '''});''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">'''app dot listen''' command displays the messagein the terminal after the image runs.</div> | + | ||'''app dot listen''' command displays the message in the terminal after the image runs. |
| | | |
− | <div style="color:#000000;">It indicatest hat the '''server '''has started at the given site.</div>
| + | It indicates that the '''server '''has started at the given site. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Now let us build the '''image'''. | + | || Now let us build the '''image'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Open a terminal by pressing the keys Ctrl, Alt and T simultaneously. | + | ||Open a terminal by pressing the keys Ctrl, Alt and T simultaneously. |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Open a terminal by pressing the keys '''Ctrl''', '''Alt '''and '''T '''simultaneously. | + | ||Open a terminal. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''cd ~/Downloads''' and press '''Enter''' | + | ||Type '''cd ~/Downloads''' and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Change to the directory where you have downloaded the code files. | + | ||Change to the directory where you have downloaded the code files. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker build -t node-express:v1 .''' | + | ||Type '''sudo docker build -t node-express:v1 .''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To build the '''image''', type''' '''the command as shown.</div> | + | || To build the '''image''', type''' '''the command as shown. |
− | <div style="color:#000000;">The flag '''hyphen t '''tags the '''image '''with a name. </div>
| + | The flag '''hyphen t '''tags the '''image '''with a name. |
| | | |
− | <div style="color:#000000;">In this case, the '''image''' will be tagged as '''node hyphen express '''with version 1.</div>
| + | In this case, the '''image''' will be tagged as '''node hyphen express '''with version 1. |
| | | |
− | <div style="color:#000000;">If version is not specifically mentioned, '''latest '''will be given by default.</div>
| + | If version is not specifically mentioned, '''latest '''will be given by default. |
| | | |
− | <div style="color:#000000;">The '''dot '''represents the path of the current''' directory'''.</div>
| + | The '''dot '''represents the path of the current''' directory'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Press '''Enter''' and enter the password when prompted | + | ||Press '''Enter''' and enter the password when prompted |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Press '''Enter'''. | + | ||Press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see that the building of the '''node hyphen express '''image is finished. | + | ||We can see that the building of the '''node hyphen express '''image is finished. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker images''' and press '''Enter''' | + | ||Type '''sudo docker images''' and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | To show a list of images, type''' '''the command as shown and press '''Enter'''. | + | ||To show a list of images, type the command as shown and press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the '''node-express '''row | + | ||Highlight the '''node-express '''row |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">We can see our '''image''', '''node hyphen express '''in the list.</div> | + | || We can see our '''image''', '''node hyphen express '''in the list. |
| | | |
− | <div style="color:#000000;">Also|, we can see details about its '''Tag''', '''Image ID''', '''creation date, '''and '''size'''.</div>
| + | Also, we can see details about its '''Tag''', '''Image ID''', '''creation date, '''and '''size'''. |
| | | |
− | <div style="color:#000000;">'''Tag''' identifies a specific version of the '''image'''.</div>
| + | '''Tag''' identifies a specific version of the '''image'''. |
| | | |
− | <div style="color:#000000;">In this case, we have given it as v1. </div>
| + | In this case, we have given it as v1. |
| | | |
− | <div style="color:#000000;">Our '''image '''is now successfully built.</div>
| + | Our '''image '''is now successfully built. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker run -it --rm -p 3000:3000 node-express:v1 '''and press '''Enter''' | + | ||Type '''sudo docker run -it --rm -p 3000:3000 node-express:v1 '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Now, let us run the '''image'''.</div> | + | || Now, let us run the '''image'''. |
| | | |
− | <div style="color:#000000;">Type the commandas shown.</div>
| + | Type the command as shown. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''-it''' | + | ||Highlight '''-it''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | '''Hyphen it '''attachesa n interactive terminal session. | + | ||'''Hyphen it '''attaches an interactive terminal session. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''--rm''' | + | ||Highlight '''--rm''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">'''hyphen hyphen rm''' flag automatically removes the '''container '''once it exits.</div> | + | || '''hyphen hyphen rm''' flag automatically removes the '''container '''once it exits. |
| | | |
− | <div style="color:#000000;">It helps in cleaning up resources.</div>
| + | It helps in cleaning up resources. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''-p 3000:3000''' | + | || Highlight '''-p 3000:3000''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This option maps port 3000 of the host to port 3000 of the container. | + | || This option maps port 3000 of the host to port 3000 of the container. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Press '''Enter'''. | + | || Press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | || Highlight the output |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see that the '''server '''has started. | + | || We can see that the '''server '''has started. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <span style="color:#000000;">Go to </span>[http://localhost:3000/ http://localhost:3000]<span style="color:#000000;"> </span> | + | ||Go to [http://localhost:3000/ http://localhost:3000] |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Open the browser and enter the given''' '''link. | + | || Open the browser and enter the given link. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''Express server is running''' | + | || Highlight '''Express server is running''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | The''' "Express server is running"''' message confirms the image is working. | + | || The ''' "Express server is running"''' message confirms the image is working. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To stop the running''' image container''', open a new terminal session.</div> | + | ||To stop the running''' image container''', open a new terminal session. |
| | | |
− | <div style="color:#000000;">You can do so by clicking on the plus symbol on the top panel of the terminal.</div>
| + | You can do so by clicking on the plus symbol on the top panel of the terminal. |
| | | |
− | <div style="color:#000000;">You can close the previous terminal session by clicking on the cross symbol.</div>
| |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker ps '''and press '''Enter''' | + | ||Type '''sudo docker ps '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Enter the command as shown.</div> | + | || Enter the command as shown. |
| | | |
− | <div style="color:#000000;">Enter the password when prompted. </div>
| + | Enter the password when prompted. |
| | | |
− | <div style="color:#000000;">This will retrieve the list of running '''containers'''.</div>
| + | This will retrieve the list of running '''containers'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''node-express:v1 '''row | + | ||Highlight '''node-express:v1 '''row |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">We can see the '''container''' of our '''image '''running.</div> | + | || We can see the '''container''' of our '''image '''running. |
| | | |
− | <div style="color:#000000;">Copy the '''container id'''.</div>
| + | Copy the '''container id'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker stop <Container_id> '''and press '''Enter''' | + | ||Type '''sudo docker stop <Container_id> '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To stop the container, we will use '''docker stop '''command'''.'''</div> | + | || To stop the container, we will use '''docker stop '''command. |
| | | |
− | <div style="color:#000000;">Type '''sudo space docker space stop space '''and paste the '''container id'''.</div>
| + | Type '''sudo space docker space stop space '''and paste the '''container id'''. |
| | | |
− | <div style="color:#000000;">Press '''Enter'''.</div>
| + | Press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We will get the '''container id '''of the stopped '''container '''as the output. | + | ||We will get the '''container id '''of the stopped '''container '''as the output. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Now let us see how to '''push''' the '''image '''to '''Docker Hub'''. | + | || Now let us see how to '''push''' the '''image '''to '''Docker Hub'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | ||Show Slide: |
| | | |
− | <div style="color:#000000;">'''Pushing Images to Docker Hub'''</div>
| + | '''Pushing Images to Docker Hub''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To push a '''Docker image '''to '''Docker Hub''', we use the '''push''' command.</div> | + | ||To push a '''Docker image '''to '''Docker Hub''', we use the '''push''' command. |
| | | |
− | <div style="color:#000000;">Before pushing, we need to '''tag '''the image.</div>
| + | Before pushing, we need to '''tag '''the image. |
| | | |
− | <div style="color:#000000;">It needs to be done with our '''Docker Hub username '''and the '''repository''' name.</div>
| + | It needs to be done with our '''Docker Hub username '''and the '''repository''' name. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | || Only narration |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Let us see the execution of it. | + | || Let us see the execution of it. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Docker hub website : </div> | + | || Docker hub website : |
| | | |
| [https://hub.docker.com/ https://hub.docker.com/] | | [https://hub.docker.com/ https://hub.docker.com/] |
| | | |
− | <div style="color:#000000;"></div>
| |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Go to the web browser, and enter the URL as shown.</div>
| |
| | | |
− | <div style="color:#000000;">Create your account by signing up, or if it already exists then sign in.</div>
| + | || Go to the web browser, and enter the URL as shown. |
| | | |
− | <div style="color:#000000;">On the top left corner, click the list icon and choose the '''repositories''' section.</div>
| + | Create your account by signing up. |
| | | |
− | <div style="color:#000000;">The repositories section lists repositories, each containing '''Docker images'''.</div>
| + | On the top left corner, click the list icon and choose the '''repositories''' section. |
| + | |
| + | The repositories section lists repositories, each containing '''Docker images'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker login '''and press '''Enter''' | + | ||Type '''sudo docker login '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Switch to the terminal.</div> | + | || Switch to the terminal. |
| | | |
− | <div style="color:#000000;">Close the previous terminal session and use a new one.</div>
| + | Close the previous terminal session and use a new one. |
| | | |
− | <div style="color:#000000;">Type the command as shown.</div>
| + | Type the command as shown. |
| | | |
− | <div style="color:#000000;">Using this command, we will log into our '''Docker Hub''' account.</div>
| + | Using this command, we will log into our '''Docker Hub''' account. |
| | | |
− | <div style="color:#000000;">Then we can easily pull and push images to it.</div>
| + | Then we can easily pull and push images to it. |
| | | |
− | <div style="color:#000000;">Press '''Enter'''</div>
| + | Press '''Enter''' |
| | | |
− | <div style="color:#000000;">Enter the credentials for '''Docker Hub '''when prompted.</div>
| + | Enter the credentials for '''Docker Hub '''when prompted. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''Login Succeeded''' | + | ||Highlight '''Login Succeeded''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see that our '''login''' has succeeded. | + | ||We can see that our '''login''' has succeeded. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Type '''sudo docker tag node-express:v1 stuser1/node-express '''and press '''Enter'''</div> | + | || Type '''sudo docker tag node-express:v1 stuser1/node-express '''and press '''Enter''' |
| | | |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Before pushing, we need to '''tag '''the '''image '''with '''username'''.</div> | + | || Before pushing, we need to '''tag '''the '''image '''with '''username'''. |
| | | |
− | <div style="color:#000000;">To '''tag '''the image, enter the command as shown.</div>
| + | To '''tag '''the image, enter the command as shown. |
| | | |
− | <div style="color:#000000;">This creates a reference to the '''image '''with the specified '''tag'''.</div>
| + | This creates a reference to the '''image '''with the specified '''tag'''. |
| | | |
− | <div style="color:#000000;">Here, '''stuser1 '''is my '''username'''.</div>
| + | Here, '''stuser1 '''is my '''username'''. |
| | | |
− | <div style="color:#000000;">Substitute it with your '''username'''.</div>
| + | Substitute it with your '''username'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''stuser1/node-express''' | + | ||Highlight '''stuser1/node-express''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">'''Stuser1 forward slash node hyphen express '''will be our''' repository''' name</div> | + | || '''Stuser1 forward slash node hyphen express '''will be our''' repository''' name |
| | | |
− | <div style="color:#000000;">It will be assigned after pushing the '''image '''to '''Docker Hub.'''</div>
| + | It will be assigned after pushing the '''image '''to '''Docker Hub.''' |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker push stuser1/node-express''' and press '''Enter''' | + | ||Type '''sudo docker push stuser1/node-express''' and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Next push the '''image '''to '''Docker Hub '''by typing the command as shown. | + | ||Next push the '''image '''to '''Docker Hub '''by typing the command as shown. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This indicates that our '''tagged image '''is successfully pushed to '''Docker Hub'''. | + | ||This indicates that our '''tagged image '''is successfully pushed to '''Docker Hub'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Go to '''Docker Hub '''website and refresh the page. | + | ||Go to '''Docker Hub '''website and refresh the page. |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Then we will go to '''Docker Hub''' website again and refresh the page. | + | ||Then we will go to '''Docker Hub''' website again and refresh the page. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Hover over '''stuser1/node-express''' | + | ||Hover over '''stuser1/node-express''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see our '''image '''in our '''repository '''indicating it is successfully pushed. | + | ||We can see our '''image '''in our '''repository '''indicating it is successfully pushed. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Now let us tryto pull the '''image '''back from the '''repository'''.</div> | + | || Now let us tryto pull the '''image '''back from the '''repository'''. |
| | | |
− | <div style="color:#000000;">For that, firstl et us delete the '''image '''from our local system.</div>
| + | For that, firstl et us delete the '''image '''from our local system. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker rmi stuser1/node-express''' and press '''Enter''' | + | ||Type '''sudo docker rmi stuser1/node-express''' and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To remove '''the image''', we will use '''docker rmi''' command.</div> | + | || To remove '''the image''', we will use '''docker rmi''' command. |
| | | |
− | <div style="color:#000000;">Enter the command as shown.</div>
| + | Enter the command as shown. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see that the '''image''' is '''untagged,''' that is removed from the system. | + | ||We can see that the '''image''' is '''untagged,''' that is removed from the system. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker images''' and press '''Enter''' | + | ||Type '''sudo docker images''' and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">To verify, enter the command as shown to get the list of '''images'''.</div> | + | || To verify, enter the command as shown to get the list of '''images'''. |
| | | |
− | <div style="color:#000000;">We can see that the '''tagged image '''is no longer in the list.</div>
| + | We can see that the '''tagged image '''is no longer in the list. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker pull stuser1/node-express '''and press '''Enter''' | + | ||Type '''sudo docker pull stuser1/node-express '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Now let us pull the '''image f'''rom '''Docker Hub'''.</div> | + | || Now let us pull the '''image f'''rom '''Docker Hub'''. |
| | | |
− | <div style="color:#000000;">For that, type the command as shown and press '''Enter'''.</div>
| + | For that, type the command as shown and press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We can see that the '''image '''is successfully pulled and downloaded. | + | ||We can see that the '''image '''is successfully pulled and downloaded. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Now let us move forward to '''image layers and size optimization'''. | + | ||Now let us move forward to '''image layers and size optimization'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide: </div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Image Layers and Size Optimization'''</div>
| + | '''Image Layers and Size Optimization''' |
| | | |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">'''Docker images '''are built in '''layers'''.</div> | + | || '''Docker images '''are built in '''layers'''. |
| | | |
− | <div style="color:#000000;">Each '''Dockerfile''' instruction that changes the '''filesystem''', represents a '''layer'''.</div>
| + | Each '''Dockerfile''' instruction that changes the '''filesystem''', represents a '''layer'''. |
| | | |
− | <div style="color:#000000;">To optimize '''image''' size, the number of '''layers''' are reduced.</div>
| + | To optimize '''image''' size, the number of '''layers''' are reduced. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Nowl et us see how this actually works. | + | ||Nowl et us see how this actually works. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Type '''sudo docker images grep node-express '''and press '''Enter'''</div> | + | || Type '''sudo docker images grep node-express '''and press '''Enter''' |
| | | |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Switch to the terminal.</div> | + | || Switch to the terminal. |
| | | |
− | <div style="color:#000000;">First, we will check the size of our image.</div>
| + | First, we will check the size of our image. |
| | | |
− | <div style="color:#000000;">Type the command as shown.</div>
| + | Type the command as shown. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''grep node-express''' | + | ||Highlight '''grep node-express''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">I have extended the command with '''pipe spacegrep space '''image name.</div> | + | || I have extended the command with '''pipe spacegrep space '''image name. |
| | | |
− | <div style="color:#000000;">We don’t need to specifyany version or '''tag '''of the '''image'''.</div>
| + | We don’t need to specifyany version or '''tag '''of the '''image'''. |
| | | |
− | <div style="color:#000000;">It filters the image list and retrieves details for the specified image name only.</div>
| + | It filters the image list and retrieves details for the specified image name only. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Press '''Enter''' | + | ||Press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Press '''Enter'''. | + | ||Press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">We can see that the size of our imageis 1.13'''GB'''.</div> | + | || We can see that the size of our imageis 1.13'''GB'''. |
| | | |
− | <div style="color:#000000;">This size may be different for you.</div>
| + | This size may be different for you. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''cd ~/Downloads '''and press '''Enter''' | + | ||Type '''cd ~/Downloads '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Make sure you are in the '''directory '''where you have downloaded the code files. | + | ||Make sure you are in the '''directory '''where you have downloaded the code files. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo nano Dockerfile '''and press '''Enter''' | + | ||Type '''sudo nano Dockerfile '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Let us go to '''Dockerfile''', using the '''nano Dockerfile '''command.</div> | + | || Let us go to '''Dockerfile''', using the '''nano Dockerfile '''command. |
| | | |
− | <div style="color:#000000;">Enter the password when prompted. </div>
| + | Enter the password when prompted. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Only narration | + | ||Only narration |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">In this file, there area total of six instructions.</div> | + | || In this file, there area total of six instructions. |
| | | |
− | <div style="color:#000000;">However, '''WORKDIR '''and '''CMD '''do not create new '''filesystem layers'''.</div>
| + | However, '''WORKDIR '''and '''CMD '''do not create new '''filesystem layers'''. |
| | | |
− | <div style="color:#000000;">Thus , the '''Docker image '''will have four''' '''layers from the '''Dockerfile''' instructions.</div>
| + | Thus , the '''Docker image '''will have four''' '''layers from the '''Dockerfile''' instructions. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight '''node:latest''' | + | ||Highlight '''node:latest''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Here the latest version of the '''node base '''image is used.</div> | + | || Here the latest version of the '''node base '''image is used. |
| | | |
− | <div style="color:#000000;">To reduce the size, we can use a smaller '''base image'''.</div>
| + | To reduce the size, we can use a smaller '''base image'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Replace '''node:latest '''with '''node:slim''' | + | ||Replace '''node:latest '''with '''node:slim''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Replace the word '''latest '''and type '''slim'''.</div> | + | || Replace the word '''latest '''and type '''slim'''. |
| | | |
− | <div style="color:#000000;">Then save by pressing '''Ctrl+S '''and exit by pressing '''Ctrl+X'''.</div>
| + | Then save by pressing '''Ctrl+S '''and exit by pressing '''Ctrl+X'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | In terminal, type '''sudo docker build -t node-express:v1 . '''and press '''Enter''' | + | ||In terminal, type '''sudo docker build -t node-express:v1 . '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Again build the '''image'''.</div> | + | || Again build the '''image'''. |
| | | |
− | <div style="color:#000000;">Type the''' '''command as shown and press '''Enter'''.</div>
| + | Type the''' '''command as shown and press '''Enter'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | The image is built successfully. | + | ||The image is built successfully. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Type '''sudo docker images grep node-express '''and press '''Enter''' | + | ||Type '''sudo docker images grep node-express '''and press '''Enter''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Nowlet us check the size of the '''image'''.</div> | + | || Nowlet us check the size of the '''image'''. |
| | | |
− | <div style="color:#000000;">'''Enter '''the commandas shown.</div>
| + | '''Enter '''the commandas shown. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | Highlight the output | + | ||Highlight the output |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">We can see that now our '''image''' size is reduced to 232'''MB'''. </div> | + | || We can see that now our '''image''' size is reduced to 232'''MB'''. |
| | | |
− | <div style="color:#000000;">This size may be different for you.</div>
| + | This size may be different for you. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Summary'''</div>
| + | '''Summary''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">This brings us to the end of this tutorial. Let us summarize.</div> | + | || This brings us to the end of this tutorial. Let us summarize. |
| | | |
− | <div style="color:#000000;">In this tutorial, we have learnt about </div>
| + | In this tutorial, we have learnt about |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Building '''Docker images '''</div> | + | * Building '''Docker images ''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Pushing '''images '''to '''Docker Hub''' </div> | + | * Pushing '''images '''to '''Docker Hub''' |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Image layers '''and size optimization</div> | + | * '''Image layers '''and size optimization |
| | | |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Assignment'''</div>
| + | '''Assignment''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | As an assignment, please do the following: | + | || As an assignment, please do the following: |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Modify the '''image''' size by using '''alpine '''variant '''base''' '''image'''. </div> | + | * Modify the '''image''' size by using '''alpine '''variant '''base''' '''image'''. |
− | * <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Compare the sizes before and after modifying the '''base image'''.</div> | + | * Compare the sizes before and after modifying the '''base image'''. |
| | | |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show slide:</div> | + | || Show slide: |
| | | |
− | <div style="color:#000000;">'''Assignment Observation'''</div>
| + | '''Assignment Observation''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">The size of the '''image'''is optimized to 160'''MB'''.</div> | + | || The size of the '''image'''is optimized to 160'''MB'''. |
| | | |
− | <div style="color:#000000;">This size may be different for you. </div>
| + | This size may be different for you. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide: </div> | + | ||Show Slide: |
| | | |
− | <div style="color:#000000;">'''About Spoken Tutorial project'''</div>
| + | '''About Spoken Tutorial project''' |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">The video at the following link summarizes the '''Spoken Tutorial project'''.</div> | + | ||The video at the following link summarizes the '''Spoken Tutorial project'''. |
| | | |
− | <div style="color:#000000;">Please download and watch it.</div>
| + | Please download and watch it. |
| |- | | |- |
− | | style="background-color:#ffffff;border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;"><span style="background-color:#ffffff;">'''Spoken Tutorial Workshops'''</span></div>
| + | '''Spoken Tutorial Workshops''' |
| | | |
− | | style="border-top:0.5pt solid #000000;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;" | <div style="color:#000000;"><span style="background-color:#ffffff;">The </span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;"> team</span><span style="background-color:#ffffff;">conducts workshops and gives certificates.</span></div> | + | || The '''Spoken Tutorial Project''' teamconducts workshops and gives certificates. |
| | | |
− | <div style="color:#000000;"><span style="background-color:#ffffff;">For more details,please write to us.</span></div>
| + | For more details,please write to us. |
| |- | | |- |
− | | style="background-color:#ffffff;border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''Answers for THIS Spoken Tutorial'''</div>
| + | '''Answers for THIS Spoken Tutorial''' |
− | | style="background-color:#ffffff;border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | <span style="background-color:#ffffff;">Please post your timed queries in this forum.</span> | + | || Please post your timed queries in this forum. |
| |- | | |- |
− | | style="background-color:#ffffff;border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;" | <div style="color:#000000;">Show Slide:</div> | + | || Show Slide: |
| | | |
− | <div style="color:#000000;">'''FOSSEE Forum'''</div>
| + | '''FOSSEE Forum''' |
− | | style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.199cm;padding-right:0.191cm;color:#000000;" | <span style="background-color:#ffffff;">For any generalor technical questions on </span><span style="background-color:#ffffff;">'''docker'''</span><span style="background-color:#ffffff;">, visit the</span><span style="background-color:#ffffff;">''' FOSSEE forum'''</span><span style="background-color:#ffffff;">and post your question.</span> | + | | style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.199cm;padding-right:0.191cm;color:#000000;" | For any generalor technical questions on '''docker''', visit the''' FOSSEE forum'''and post your question. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Show slide:</div> | + | || Show slide: |
| | | |
− | <div style="color:#000000;">'''Acknowledgement'''</div>
| + | '''Acknowledgement''' |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | '''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'''. |
| |- | | |- |
− | | style="border-top:0.5pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Slide: </div> | + | || Slide: |
− | <div style="color:#000000;">'''Thankyou'''</div>
| + | '''Thankyou''' |
| + | |
| | | |
− | <div style="color:#000000;"></div>
| + | || This is '''Pranjal Mahajan, '''a '''FOSSEE''' Semester Long Intern 2024, '''IIT Bombay '''signing off |
− | | style="border:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;"><span style="background-color:#ffffff;">This is </span><span style="background-color:#ffffff;">'''Pranjal Mahajan, '''</span><span style="background-color:#ffffff;">a </span><span style="background-color:#ffffff;">'''FOSSEE'''</span><span style="background-color:#ffffff;"> Semester Long Intern 2024, </span><span style="background-color:#ffffff;">'''IIT Bombay '''</span><span style="background-color:#ffffff;">signing off</span></div> | + | |
| | | |
− | <div style="color:#000000;">Thanks for joining.</div>
| + | Thanks for joining. |
| |- | | |- |
| |} | | |} |
− | <div style="color:#000000;"></div>
| |