Difference between revisions of "Docker/C2/Docker-Compose/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 1: Line 1:
−
<div style="margin-left:1.27cm;margin-right:0cm;"></div>
+
 
 
{| border="1"
 
{| border="1"
 
|-
 
|-
 
|| '''Visual Cue'''
 
|| '''Visual Cue'''
 
|| '''Narration'''
 
|| '''Narration'''
 +
 +
|-
 +
|| '''Show slide''':
 +
 +
'''Welcome'''
 +
|| Hello and welcome to the Spoken Tutorial on “'''Docker Compose'''”.
 
|-
 
|-
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"
+
|| '''Show slide''':
−
|| Show slide:  
+
  
−
'''Welcome''
+
'''Learning Objectives'''
−
| style="color:#000000;" | Hello and welcome to the Spoken Tutorial on “'''Docker Compose”.'''
+
|| In this tutorial, we will learn about:
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
|| <div style="color:#000000;">Show Slide:</div>
+
  
−
<div style="color:#000000;">'''Learning Objectives'''</div>
+
* '''Docker compose''' and its uses
−
|| <div style="color:#000000;">In this tutorial, we will learn about:</div>
+
* Running multiple '''Docker images '''using '''Docker Compose'''
  
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Docker compose''' and its uses</div>
 
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Running multiple '''Docker images '''using '''Docker Compose'''</div>
 
  
−
<div style="color:#000000;"></div>
+
|-
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| '''Show slide''':
−
|| <div style="color:#000000;">Show Slide:</div>
+
  
−
<div style="color:#000000;">'''System Requirements'''</div>
+
'''System Requirements'''
 
|| 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 version '''22.04 '''and</div>
+
* '''Ubuntu Linux '''OS version '''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:1pt solid #000000;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;">'''Prerequisite'''</div>
+
'''Prerequisites'''
  
 
[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:
−
* <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
  
 
|-
 
|-
−
| style="border:1pt solid #000000;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:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;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:1pt solid #000000;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;">'''Docker Compose'''</div>
+
'''Docker Compose'''
 
||
 
||
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Docker Compose''' is a tool for managing '''containers'''.</div>
+
* '''Docker Compose''' is a tool for managing '''containers'''.
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">It is used for coordinating and running multiple '''containers '''together. </div>
+
* It is used for coordinating and running multiple '''containers '''together.  
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">It uses '''YAML '''files for configuring the '''containers'''.</div>
+
* It uses '''YAML '''files for configuring the '''containers'''.
  
−
|- style="border:1pt solid #000000;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;">'''YAML'''</div>
+
'''YAML'''
 
||
 
||
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''YAML '''stands for '''YAML Ain’t Markup Language'''</div>
+
* '''YAML '''stands for '''YAML Ain’t Markup Language'''
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">It is a data serialization format</div>
+
* It is a data serialization format
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">It is used for configuration files and defining structure of the data</div>
+
* It is used for configuration files and defining structure of the data
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Show slide:'''Flowchart'''
+
|| '''Show slide''':
−
|| <div style="color:#000000;">This flowchart explains the process of using '''Docker Compose'''.</div>
+
  
−
<div style="color:#000000;">We will run two images using '''Docker compose.'''</div>
+
'''Flowchart'''
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| This flowchart explains the process of using '''Docker Compose'''.
−
| style="color:#000000;" | Hover over '''Docker Hub '''block.
+
−
| style="color:#000000;" | The images will be pulled from '''Docker Hub'''.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Hover over '''node '''block.
+
−
| style="color:#000000;" | The first is the '''node '''image.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Hover over '''Express server application code '''block.
+
−
|| <div style="color:#000000;">It will be used to run an '''Express '''web server. </div>
+
  
−
<div style="color:#000000;">'''Express '''is a '''nodejs''' framework.</div>
+
We will run two images using '''Docker compose.'''
 +
|-
 +
|| Hover over '''Docker Hub '''block.
 +
|| The images will be pulled from '''Docker Hub'''.
 +
|-
 +
|| Hover over '''node '''block.
 +
|| The first is the '''node '''image.
 +
|-
 +
|| Hover over '''Express server application code '''block.
 +
|| It will be used to run an '''Express '''web server.  
  
−
<div style="color:#000000;">It will allow us to view the data in the mongodb database, through the browser.</div>
+
'''Express '''is a '''nodejs''' framework.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Hover over '''mongo '''block.
+
−
|| <div style="color:#000000;">The second is the '''mongo '''image which will run a '''mongodb '''database.</div>
+
  
−
<div style="color:#000000;">The '''Express '''server will connect to the '''mongodb '''database.</div>
+
It will allow us to view the data in the mongodb database, through the browser.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Hover over '''mongosh '''block.
+
|| Hover over '''mongo '''block.
−
| style="color:#000000;" | We will add data to the database using the '''mongosh '''shell.
+
|| The second is the '''mongo '''image which will run a '''mongodb '''database.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Hover over '''browser '''block.
+
−
| style="color:#000000;" | Then we will view the inserted data in the browser using the '''Express '''server.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Hover over '''Host ports '''block.
+
−
|| <div style="color:#000000;">We have shown the port mappings in this diagram as well.</div>
+
  
−
<div style="color:#000000;">We will go through them in detail in the code.</div>
+
The '''Express '''server will connect to the '''mongodb '''database.
 
|-
 
|-
−
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | <div style="color:#000000;">Point to the files in the Downloads folder</div>
+
|| Hover over '''mongosh '''block.
 +
|| We will add data to the database using the '''mongosh '''shell.
 +
|-
 +
|| Hover over '''browser '''block.
 +
|| Then we will view the inserted data in the browser using the '''Express '''server.
 +
|-
 +
|| Hover over '''Host ports '''block.
 +
|| We have shown the port mappings in this diagram as well.
  
−
<div style="color:#000000;"></div>
+
We will go through them in detail in the code.
 +
|-
 +
|| Point to the files in the Downloads folder
  
−
<div style="color:#000000;">Open the '''mongo-express''' directory.</div>
 
−
| style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.176cm;padding-right:0.176cm;" | <div style="color:#000000;">I have created the source files required for this demonstration.</div>
 
−
<div style="color:#000000;">Let us open the '''mongo hyphen express''' directory. </div>
 
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
 
−
| style="color:#000000;" | Select and highlight the '''app.js''' file.
 
−
|| <div style="color:#000000;">The '''app dot js''' file is a '''JavaScript '''file.</div>
 
  
−
<div style="color:#000000;">It contains code for a web server developed using the '''Express '''framework.</div>
+
Open the '''mongo-express''' directory.
 +
|| I have created the source files required for this demonstration.
 +
Let us open the '''mongo hyphen express''' directory.  
  
−
<div style="color:#000000;">The web server connects to the '''mongodb '''database.</div>
+
|-
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| Select and highlight the '''app.js''' file.
−
|| <div style="color:#000000;">Select and highlight the '''mongo-express.yaml''' file.</div>
+
|| The '''app dot js''' file is a '''JavaScript '''file.
  
−
<div style="color:#000000;">Open the file '''mongo-express.yaml '''in the text editor.</div>
+
It contains code for a web server developed using the '''Express '''framework.
−
|| <div style="color:#000000;">The '''mongo hyphen express dot yaml '''file configures '''Docker Compose.'''</div>
+
  
−
<div style="color:#000000;">Let us view the contents of this file.</div>
+
The web server connects to the '''mongodb '''database.
 +
|-
 +
|| Select and highlight the '''mongo-express.yaml''' file.
  
−
<div style="color:#000000;">Open the file in the text editor.</div>
+
Open the file '''mongo-express.yaml '''in the text editor.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| The '''mongo hyphen express dot yaml '''file configures '''Docker Compose.'''
−
| style="color:#000000;" | Highlight '''services:'''
+
−
|| <div style="color:#000000;">The top element of the file is '''services.'''</div>
+
  
−
<div style="color:#000000;">Each service can hold a single or multiple '''containers '''of an '''image.'''</div>
+
Let us view the contents of this file.
  
−
<div style="color:#000000;">It also defines various properties for the '''containers.'''</div>
+
Open the file in the text editor.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''mongodb-service'''.
+
|| Highlight '''services:'''
−
|| <div style="color:#000000;">The name of the first service is '''mongodb hyphen service.'''</div>
+
|| The top element of the file is '''services.'''
  
−
<div style="color:#000000;">Note that the name of the service need not be the same as the image or container.</div>
+
Each service can hold a single or multiple '''containers '''of an '''image.'''
  
−
<div style="color:#000000;">On the next indentation level, we will define the properties for the service.</div>
+
It also defines various properties for the '''containers.'''
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''container_name'''
+
|| Highlight '''mongodb-service'''.
−
|| <div style="color:#000000;">First we define the name of the '''container as mongodb hyphen container''' for the image.</div>
+
|| The name of the first service is '''mongodb hyphen service.'''
  
−
<div style="color:#000000;">If you do not specify the '''container '''name, a random name will be assigned.</div>
+
Note that the name of the service need not be the same as the image or container.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''image'''
+
−
| style="color:#000000;" | The name of the '''image '''is '''mongo.'''
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''environment'''
+
−
|| <div style="color:#000000;">The '''environment '''key sets the '''environment variables.'''</div>
+
  
−
<div style="color:#000000;">The variables are specified as a list.</div>
+
On the next indentation level, we will define the properties for the service.
 +
|-
 +
|| Highlight '''container_name'''
 +
|| First we define the name of the '''container as mongodb hyphen container''' for the image.
  
−
<div style="color:#000000;">We set two '''environment variables''' here.</div>
+
If you do not specify the '''container '''name, a random name will be assigned.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
|| <div style="color:#000000;">Highlight '''MONGO_INITDB_ROOT_USERNAME'''</div>
+
|| Highlight '''image'''
 +
|| The name of the '''image '''is '''mongo.'''
 +
|-
 +
|| Highlight '''environment'''
 +
|| The '''environment '''key sets the '''environment variables.'''
  
−
| style="color:#000000;" | First is the name of the root user.
+
The variables are specified as a list.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''MONGO_INITDB_ROOT_PASSWORD'''
+
−
| style="color:#000000;" | The second is the root user password.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''ports'''
+
−
|| <div style="color:#000000;">Finally, we specify port bindings for the container.</div>
+
  
−
<div style="color:#000000;">Multiple bindings can be specified using a list.</div>
+
We set two '''environment variables''' here.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''127.0.0.1:27017:27017 '''
+
|| Highlight '''MONGO_INITDB_ROOT_USERNAME'''
−
|| <div style="color:#000000;">Here, we are specifying only one '''port binding'''.</div>
+
  
−
<div style="color:#000000;">The''' port 27017''' on localhost, is mapped to '''port 27017''' of the '''container'''.</div>
+
|| First is the name of the root user.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Only narration.
+
|| Highlight '''MONGO_INITDB_ROOT_PASSWORD'''
−
| style="color:#000000;" | Next we will go through the service description for the '''Express server.'''
+
|| The second is the root user password.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''express-service'''
+
|| Highlight '''ports'''
−
| style="color:#000000;" | The name of the service is '''express hyphen service'''.
+
|| Finally, we specify port bindings for the container.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''container_name''' under '''node'''
+
−
| style="color:#000000;" | The container name is '''express hyphen container.'''
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''image'''
+
−
| style="color:#000000;" | The image is '''node.'''
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''user'''
+
−
|| <div style="color:#000000;">The '''user '''key sets the user under which the '''container '''process runs.</div>
+
−
<div style="color:#000000;">This can be used to give different levels of permissions to the '''container'''.</div>
+
  
−
<div style="color:#000000;">Here we are setting the user to '''node'''.</div>
+
Multiple bindings can be specified using a list.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | zHighlight '''working_dir'''
+
|| Highlight '''127.0.0.1:27017:27017 '''
−
|| <div style="color:#000000;">Then we set the working directory using the''' working underscore dir''' key.</div>
+
|| Here, we are specifying only one '''port binding'''.
  
−
<div style="color:#000000;">It sets the working directory inside the '''container '''for executing commands.</div>
+
The''' port 27017''' on localhost, is mapped to '''port 27017''' of the '''container'''.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''environment'''
+
|| Only narration.
−
| style="color:#000000;" | Next we specify the environment variables.
+
|| Next we will go through the service description for the '''Express server.'''
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
|| <div style="color:#000000;">Highlight '''MONGODB_USERNAME'''</div>
+
|| Highlight '''express-service'''
 +
|| The name of the service is '''express hyphen service'''.
 +
|-
 +
|| Highlight '''container_name''' under '''node'''
 +
|| The container name is '''express hyphen container.'''
 +
|-
 +
|| Highlight '''image'''
 +
|| The image is '''node.'''
 +
|-
 +
|| Highlight '''user'''
 +
|| The '''user '''key sets the user under which the '''container '''process runs.
 +
This can be used to give different levels of permissions to the '''container'''.
  
−
| style="color:#000000;" | '''MONGODB underscore USERNAME '''sets the username for accessing the database.
+
Here we are setting the user to '''node'''.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''MONGODB_PASSWORD'''
+
|| zHighlight '''working_dir'''
−
|| <div style="color:#000000;">'''MONGODB underscore PASSWORD '''specifies the password of the user.</div>
+
|| Then we set the working directory using the''' working underscore dir''' key.
  
−
<div style="color:#000000;">The username and password should be the same as set under '''mongodb '''service.</div>
+
It sets the working directory inside the '''container '''for executing commands.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Highlight '''MONGODB_CONTAINER_NAME'''
+
|| Highlight '''environment'''
−
|| <div style="color:#000000;">'''MONGODB underscore CONTAINER underscore NAME '''sets the mongodb container name.</div>
+
|| Next we specify the environment variables.
 +
|-
 +
|| Highlight '''MONGODB_USERNAME'''
  
−
<div style="color:#000000;">This name is required to connect to the database from the '''Express server.'''</div>
+
|| '''MONGODB underscore USERNAME '''sets the username for accessing the database.
 +
|-
 +
|| Highlight '''MONGODB_PASSWORD'''
 +
|| '''MONGODB underscore PASSWORD '''specifies the password of the user.
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
The username and password should be the same as set under '''mongodb '''service.
−
| style="color:#000000;" | Highlight '''MONGODB_CONTAINER_PORT'''
+
|-
−
|| <div style="color:#000000;">'''MONGODB underscore CONTAINER underscore PORT '''specifies mongodb container port.</div>
+
|| Highlight '''MONGODB_CONTAINER_NAME'''
 +
|| '''MONGODB underscore CONTAINER underscore NAME '''sets the mongodb container name.
  
−
<div style="color:#000000;">The value must match the port specified under '''mongodb service'''.</div>
+
This name is required to connect to the database from the '''Express server.'''
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''volumes'''
+
−
|| <div style="color:#000000;">'''Volumes '''are used to persist data between the container runs.</div>
+
  
−
<div style="color:#000000;">We shall discuss '''volumes '''in detail in upcoming tutorials.</div>
+
|-
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| Highlight '''MONGODB_CONTAINER_PORT'''
−
| style="color:#000000;" | Highlight '''ports'''
+
|| '''MONGODB underscore CONTAINER underscore PORT '''specifies mongodb container port.
−
| style="color:#000000;" | Next we set the port bindings.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''127.0.0.1:3000:3000'''
+
−
| style="color:#000000;" | We shall access our web server at port '''3000 '''on '''localhost'''.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''depends_on'''
+
−
| style="color:#000000;" | The '''depends_on '''key specifies other services that this service depends on.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''mongodb-service'''
+
−
| style="color:#000000;" | The '''express service '''will start after the '''mongodb service '''has started.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''command'''
+
−
|| <div style="color:#000000;">The '''command '''key is used to set the '''container '''commands.</div>
+
  
−
<div style="color:#000000;">These are run everytime the '''container '''is started.</div>
+
The value must match the port specified under '''mongodb service'''.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
|| <div style="color:#000000;">Highlight '''bash -c "npm install && node app.js"'''</div>
+
|| Highlight '''volumes'''
 +
|| '''Volumes '''are used to persist data between the container runs.
  
−
<div style="color:#000000;"></div>
+
We shall discuss '''volumes '''in detail in upcoming tutorials.
−
|| <div style="color:#000000;">These commands set up a '''nodejs '''directory and install the required packages.</div>
+
|-
 +
|| Highlight '''ports'''
 +
|| Next we set the port bindings.
 +
|-
 +
|| Highlight '''127.0.0.1:3000:3000'''
 +
|| We shall access our web server at port '''3000 '''on '''localhost'''.
 +
|-
 +
|| Highlight '''depends_on'''
 +
|| The '''depends_on '''key specifies other services that this service depends on.
 +
|-
 +
|| Highlight '''mongodb-service'''
 +
|| The '''express service '''will start after the '''mongodb service '''has started.
 +
|-
 +
|| Highlight '''command'''
 +
|| The '''command '''key is used to set the '''container '''commands.
  
−
<div style="color:#000000;">Then, the server is run using '''nodejs'''.</div>
+
These are run everytime the '''container '''is started.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
|| <div style="color:#000000;">Open a terminal window by pressing '''Ctrl, Alt '''and '''T '''keys simultaneously.</div>
+
|| Highlight '''bash -c "npm install && node app.js"'''
  
−
<div style="color:#000000;">Cd Downloads/mongo-express</div>
 
−
|| <div style="color:#000000;">Open a terminal window by pressing '''Ctrl, Alt '''and '''T '''keys simultaneously.</div>
 
  
−
<div style="color:#000000;">Go to the '''Downloads''' folder</div>
+
|| These commands set up a '''nodejs '''directory and install the required packages.
  
−
<div style="color:#000000;">Switch to the '''mongo-express '''directory where the source code is saved.</div>
+
Then, the server is run using '''nodejs'''.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Switch to the '''mongo-express '''directory using cd command.
+
|| Open a terminal window by pressing '''Ctrl, Alt '''and '''T '''keys simultaneously.
−
| style="color:#000000;" | Now we will run the two images using '''Docker Compose'''.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Type the command '''sudo docker compose -f mongo-express.yaml up -d'''
+
−
| style="color:#000000;" | Type the command as shown here.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''-f mongo-express.yaml'''
+
−
|| <div style="color:#000000;">The '''hyphen f '''flag is used to specify the '''yaml '''file for '''docker compose'''.</div>
+
  
−
<div style="color:#000000;">Here, the name of the file is '''mongo hyphen express dot yaml'''.</div>
+
Cd Downloads/mongo-express
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|| Open a terminal window by pressing '''Ctrl, Alt '''and '''T '''keys simultaneously.
−
| style="color:#000000;" | Highlight '''up'''
+
−
| style="color:#000000;" | The '''up '''command starts all the services mentioned in the file.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''-d'''
+
−
| style="color:#000000;" | The '''hyphen d''' flag runs the services in the background.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Press Enter to run the command.
+
−
|| <div style="color:#000000;">Press Enter.</div>
+
  
−
<div style="color:#000000;">Please wait until the pull is complete.</div>
+
Go to the '''Downloads''' folder
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight the output of the command.
+
−
| style="color:#000000;" | The output shows that the containers were started.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Type '''sudo docker ps '''and press Enter.
+
−
|| <div style="color:#000000;">Type '''sudo space docker space ps '''and press Enter.</div>
+
  
−
<div style="color:#000000;">The output shows that our containers are running.</div>
+
Switch to the '''mongo-express '''directory where the source code is saved.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Type '''sudo docker logs express-container '''and press Enter.
+
|| Switch to the '''mongo-express '''directory using cd command.
−
|| <div style="color:#000000;">Let us check if the '''Express '''server is running.</div>
+
|| Now we will run the two images using '''Docker Compose'''.
 +
|-
 +
|| Type the command '''sudo docker compose -f mongo-express.yaml up -d'''  
 +
|| Type the command as shown here.
 +
|-
 +
|| Highlight '''-f mongo-express.yaml'''
 +
|| The '''hyphen f '''flag is used to specify the '''yaml '''file for '''docker compose'''.
  
−
<div style="color:#000000;">Type '''sudo space docker space logs space express hyphen container.'''</div>
+
Here, the name of the file is '''mongo hyphen express dot yaml'''.
 +
|-
 +
|| Highlight '''up'''
 +
|| The '''up '''command starts all the services mentioned in the file.
 +
|-
 +
|| Highlight '''-d'''
 +
|| The '''hyphen d''' flag runs the services in the background.
 +
|-
 +
|| Press Enter to run the command.
 +
|| Press Enter.
  
−
<div style="color:#000000;">Here '''express hyphen container '''is the '''container '''running the '''Express server'''.</div>
+
Please wait until the pull is complete.
 +
|-
 +
|| Highlight the output of the command.
 +
|| The output shows that the containers were started.
 +
|-
 +
|| Type '''sudo docker ps '''and press Enter.
 +
|| Type '''sudo space docker space ps '''and press Enter.
  
−
<div style="color:#000000;">Press Enter.</div>
+
The output shows that our containers are running.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | In the output, highlight '''Server started at http://localhost:3000'''
+
|| Type '''sudo docker logs express-container '''and press Enter.
−
|| <div style="color:#000000;">The output shows that our server is running at port '''3000 '''on '''localhost'''.</div>
+
|| Let us check if the '''Express '''server is running.
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
Type '''sudo space docker space logs space express hyphen container.'''
−
| style="color:#000000;" | Highlight '''Connected to MongoDB'''.
+
−
|| <div style="color:#000000;">It also shows that the server is connected to the '''mongodb '''database.</div>
+
  
−
<div style="color:#000000;">If you do not get this output, please wait for a few seconds.</div>
+
Here '''express hyphen container '''is the '''container '''running the '''Express server'''.
  
−
<div style="color:#000000;">Then run the '''docker logs''' command again.</div>
+
Press Enter.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
|| <div style="color:#000000;">Open '''Firefox '''web browser.</div>
+
|| In the output, highlight '''Server started at http://localhost:3000'''
 +
|| The output shows that our server is running at port '''3000 '''on '''localhost'''.
  
−
<span style="color:#000000;">Type </span>[http://localhost:3000/ http://localhost:3000]<span style="color:#000000;"> '''</span><span style="color:#000000;">and press Enter.</span>
+
|-
−
|| <div style="color:#000000;">Let us now access the server on the browser.</div>
+
|| Highlight '''Connected to MongoDB'''.
 +
|| It also shows that the server is connected to the '''mongodb '''database.
  
−
<div style="color:#000000;">Open web browser.</div>
+
If you do not get this output, please wait for a few seconds.
  
−
<div style="color:#000000;">Type the address as shown.</div>
+
Then run the '''docker logs''' command again.
 +
|-
 +
|| Open '''Firefox '''web browser.
  
−
<div style="color:#000000;">Press Enter.</div>
+
Type [http://localhost:3000/http://localhost:3000] and press Enter.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight the text on the page.
+
−
| style="color:#000000;" | The output shows that the '''Express '''server is running.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Switch to the terminal.
+
−
|| <div style="color:#000000;">Now we will add data to the mongodb database using '''mongosh'''.</div>
+
  
−
<div style="color:#000000;">Switch to the terminal.</div>
+
|| Let us now access the server on the browser.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" |
+
−
| style="color:#000000;" | Type the command as shown here.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''exec'''
+
−
|| <div style="color:#000000;">We are using '''exec '''command to connect to the database using mongosh shell.</div>
+
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
Open web browser.
−
| style="color:#000000;" | Highlight '''–username'''
+
−
| style="color:#000000;" | Make sure the username and password here are the same as set in yaml file.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Press Enter to execute the command.
+
−
| style="color:#000000;" | Now execute the command by pressing Enter.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''test>'''
+
−
| style="color:#000000;" | You will be connected to the '''test '''database.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" |
+
−
| style="color:#000000;" | To insert data into the database, type the following command.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''db.users.insertMany'''
+
−
| style="color:#000000;" | '''Db dot users dot insertMany '''inserts multiple documents into the '''users '''database.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
|| <div style="color:#000000;">Highlight '''{name:"Karan", age:24}'''</div>
+
  
−
<div style="color:#000000;">Press Enter.</div>
+
Type the address as shown.
 +
 
 +
Press Enter.
 +
|-
 +
|| Highlight the text on the page.
 +
|| The output shows that the '''Express '''server is running.
 +
|-
 +
|| Switch to the terminal.
 +
|| Now we will add data to the mongodb database using '''mongosh'''.
 +
 
 +
Switch to the terminal.
 +
|-
 
||  
 
||  
−
<div style="color:#000000;">We insert data of two users.</div>
+
|| Type the command as shown here.
 +
|-
 +
|| Highlight '''exec'''
 +
|| We are using '''exec '''command to connect to the database using mongosh shell.
  
−
<div style="color:#000000;">It contains their name and age.</div>
+
|-
 +
|| Highlight '''–username'''
 +
|| Make sure the username and password here are the same as set in yaml file.
 +
|-
 +
|| Press Enter to execute the command.
 +
|| Now execute the command by pressing Enter.
 +
|-
 +
|| Highlight '''test>'''
 +
|| You will be connected to the '''test '''database.
 +
|-
 +
||
 +
|| To insert data into the database, type the following command.
 +
|-
 +
|| Highlight '''db.users.insertMany'''
 +
|| '''Db dot users dot insertMany '''inserts multiple documents into the '''users '''database.
 +
|-
 +
|| Highlight '''{name:"Karan", age:24}'''
  
−
<div style="color:#000000;">Let us execute this command.</div>
+
Press Enter.
 +
||
 +
We insert data of two users.
  
−
<div style="color:#000000;">Press Enter.</div>
+
It contains their name and age.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight '''insertedIds'''
+
−
| style="color:#000000;" | The output shows the '''object ids '''of the inserted documents.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Switch to the '''Firefox '''browser.
+
−
|| <div style="color:#000000;">Now we shall view the list of users using our '''Express '''server.</div>
+
  
−
<div style="color:#000000;">Open the browser.</div>
+
Let us execute this command.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
|| <span style="color:#000000;">Type the address </span>[http://localhost:3000/users http://localhost:3000/users]<span style="color:#000000;"> in the search bar.</span>
+
  
−
<div style="color:#000000;">Press Enter.</div>
+
Press Enter.
−
|| <div style="color:#000000;">Type the following address in the search bar.</div>
+
|-
 +
|| Highlight '''insertedIds'''
 +
|| The output shows the '''object ids '''of the inserted documents.
 +
|-
 +
|| Switch to the '''Firefox '''browser.
 +
|| Now we shall view the list of users using our '''Express '''server.
  
−
<div style="color:#000000;">This navigates to the '''users '''API endpoint of the '''Express '''server.</div>
+
Open the browser.
 +
|-
 +
|| Type the address [http://localhost:3000/users http://localhost:3000/users] in the search bar.
  
−
<div style="color:#000000;">This API allows us to connect to the '''mongodb '''database.</div>
+
Press Enter.
 +
|| Type the following address in the search bar.
  
−
<div style="color:#000000;">Press Enter.</div>
+
This navigates to the '''users '''API endpoint of the '''Express '''server.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
| style="color:#000000;" | Highlight the text on the web page.
+
−
|| <div style="color:#000000;">We get the list of users that we inserted in the '''mongosh '''shell.</div>
+
  
−
<div style="color:#000000;">So our '''express container '''successfully connected to the '''mongodb container'''.</div>
+
This API allows us to connect to the '''mongodb '''database.
  
−
<div style="color:#000000;">We did not create a '''Docker network''' for connecting the '''containers'''.</div>
+
Press Enter.
 +
|-
 +
|| Highlight the text on the web page.
 +
|| We get the list of users that we inserted in the '''mongosh '''shell.
  
−
<div style="color:#000000;">'''Docker compose''' automatically creates a network for the '''containers'''.</div>
+
So our '''express container '''successfully connected to the '''mongodb container'''.
  
−
<div style="color:#000000;">This allows them to communicate with each other.</div>
+
We did not create a '''Docker network''' for connecting the '''containers'''.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
|| <div style="color:#000000;">Show Slide:</div>
+
  
−
<div style="color:#000000;">'''Summary'''</div>
+
'''Docker compose''' automatically creates a network for the '''containers'''.
−
|| <div style="color:#000000;">This brings us to the end of this tutorial. Let us summarise.</div>
+
  
−
<div style="color:#000000;">In this tutorial, we have learnt about</div>
+
This allows them to communicate with each other.
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Docker compose''' and its uses</div>
+
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Running multiple''' Docker images''' using '''Docker Compose'''</div>
+
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show Slide:</div>
+
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment (1)'''</div>
+
'''Summary'''
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right: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:
+
|| This brings us to the end of this tutorial.  
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Download the assignment source code from the code files link</div>
+
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">There are two files: app.py(app folder) and docker-compose.yaml</div>
+
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">The docker-compose.yaml file creates two services</div>
+
  
 +
Let us summarise.
 +
 +
In this tutorial, we have learnt about
 +
* '''Docker compose''' and its uses
 +
* Running multiple''' Docker images''' using '''Docker Compose'''
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show Slide:</div>
+
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment (2)'''</div>
+
'''Assignment (1)'''
 +
|| As an assignment, please do the following:
 +
* Download the assignment source code from the code files link
 +
* There are two files: app.py(app folder) and docker-compose.yaml
 +
* The docker-compose.yaml file creates two services
  
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right: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;">First service runs Python Flask web server</div>
 
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">The second service runs mongodb database</div>
 
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">The Flask server connects to the mongodb database.</div>
 
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show Slide:</div>
+
|| '''Show slide''':
 +
 
 +
'''Assignment (2)'''
 +
 
 +
||
 +
* First service runs Python Flask web server
 +
* The second service runs mongodb database
 +
* The Flask server connects to the mongodb database.
 +
|-
 +
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment (3)'''</div>
+
'''Assignment (3)'''
  
−
<div style="color:#000000;">URL shown on slide:'''localhost:5000/users'''</div>
+
URL shown on slide:'''localhost:5000/users'''
  
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;" | Follow the same steps as shown in this tutorial and do the following
+
|| Follow the same steps as shown in this tutorial and do the following
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Run the docker-compose.yaml file</div>
+
* Run the docker-compose.yaml file
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Add data to the mongodb database</div>
+
* Add data to the mongodb database
−
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Go to this URL in the browser to view the inserted data.</div>
+
* Go to this URL in the browser to view the inserted data.
  
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show slide:</div>
+
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment Observation '''</div>
+
'''Assignment Observation '''
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | This is the output of the '''docker compose''' command when run with the hyphen''' d flag'''.
+
|| This is the output of the '''docker compose''' command when run with the hyphen''' d flag'''.
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show slide:</div>
+
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment Observation'''</div>
+
'''Assignment Observation'''
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | We inserted the following data using '''mongosh'''.
+
|| We inserted the following data using '''mongosh'''.
 
|-
 
|-
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt 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;">Show slide:</div>
+
|| '''Show slide''':
  
−
<div style="color:#000000;">'''Assignment Observation'''</div>
+
'''Assignment Observation'''
−
| style="border-top:1pt solid #000000;border-bottom:0.5pt solid #000000;border-left:0.5pt solid #000000;border-right:0.5pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;color:#000000;" | On the browser, we get names of the inserted users using the '''Flask web server.'''
+
|| On the browser, we get names of the inserted users using the '''Flask web server.'''
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Show Slide: '''About Spoken Tutorial project'''
+
|| '''Show slide''':
−
|| <div style="color:#000000;">The video at the following link summarises the '''Spoken Tutorial project'''.</div>
+
 
 +
'''About Spoken Tutorial project'''
 +
|| The video at the following link summarises the '''Spoken Tutorial project'''.
  
−
<div style="color:#000000;">Please download and watch it</div>
+
Please download and watch it
 
|-
 
|-
−
| style="background-color:#ffffff;border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Show Slide: '''Spoken Tutorial Workshops'''
+
|| '''Show slide''':
−
| style="border: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&nbsp;</span><span style="background-color:#ffffff;">'''Spoken Tutorial Project'''</span><span style="background-color:#ffffff;">&nbsp;team </span>conducts workshops and gives certificates.</div>
+
  
−
<div style="color:#000000;">For more details, please write to us.</div>
+
'''Spoken Tutorial Workshops'''
 +
|| The&nbsp; '''Spoken Tutorial Project'''  conducts workshops and gives certificates.
 +
 
 +
For more details, please write to us.
 
|-
 
|-
−
| style="background-color:#ffffff;border:1pt solid #000000;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:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;color:#000000;" | Please post your timed queries in this forum.
+
|| Please post your timed queries in this forum.
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
|-
−
| style="color:#000000;" | Show Slide: '''FOSSEE Forum'''
+
|| '''Show slide''':
−
| style="color:#000000;" | For any general or technical questions on '''Docker''', visit the FOSSEE forum and post your question.
+
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
−
|| <div style="color:#000000;">Slide: '''Acknowledgement'''</div>
+
  
−
<div style="color:#000000;"></div>
+
'''FOSSEE Forum'''
−
|| <div style="color:#000000;">Spoken Tutorial Project was established by the Ministry of Education, Government of India</div>
+
|| For any general or technical questions on '''Docker''', visit the FOSSEE forum and post your question.
 +
|-
 +
|| '''Show slide''':
  
−
|- style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.092cm;padding-right:0.191cm;"
+
'''Acknowledgement'''
−
|| <div style="color:#000000;">Show slide:</div>
+
|| Spoken Tutorial Project was established by the Ministry of Education, Government of India
  
−
<div style="color:#000000;">'''Thank You'''</div>
+
|-
−
|| <div style="color:#000000;">This is Karthik Chandrasekhar, a FOSSEE Semester Long Intern 2024, IIT Bombay signing off.</div>
+
|| '''Show slide''':
  
 +
'''Thank You'''
 +
|| This is Karthik Chandrasekhar, a FOSSEE Semester Long Intern 2024, IIT Bombay signing off.
  
−
<div style="color:#000000;">Thanks for joining.</div>
+
Thanks for joining.
 
|-
 
|-
 
|}
 
|}
−
<div style="color:#000000;"></div>
 
−
 
−
<div style="color:#000000;"></div>
 

Latest revision as of 12:09, 12 December 2024

Visual Cue Narration
Show slide:

Welcome

Hello and welcome to the Spoken Tutorial on “Docker Compose”.
Show slide:

Learning Objectives

In this tutorial, we will learn about:
  • Docker compose and its uses
  • Running multiple Docker images using Docker Compose


Show slide:

System Requirements

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

Prerequisites

https://www.spoken-tutorial.org

To follow this tutorial:
  • You must have basic knowledge of using Linux terminal
  • For pre-requisite Linux tutorials, please visit this website
Show slide:

Code files

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

Docker Compose

  • Docker Compose is a tool for managing containers.
  • It is used for coordinating and running multiple containers together.
  • It uses YAML files for configuring the containers.
Show slide:

YAML

  • YAML stands for YAML Ain’t Markup Language
  • It is a data serialization format
  • It is used for configuration files and defining structure of the data
Show slide:

Flowchart

This flowchart explains the process of using Docker Compose.

We will run two images using Docker compose.

Hover over Docker Hub block. The images will be pulled from Docker Hub.
Hover over node block. The first is the node image.
Hover over Express server application code block. It will be used to run an Express web server.

Express is a nodejs framework.

It will allow us to view the data in the mongodb database, through the browser.

Hover over mongo block. The second is the mongo image which will run a mongodb database.

The Express server will connect to the mongodb database.

Hover over mongosh block. We will add data to the database using the mongosh shell.
Hover over browser block. Then we will view the inserted data in the browser using the Express server.
Hover over Host ports block. We have shown the port mappings in this diagram as well.

We will go through them in detail in the code.

Point to the files in the Downloads folder


Open the mongo-express directory.

I have created the source files required for this demonstration.

Let us open the mongo hyphen express directory.

Select and highlight the app.js file. The app dot js file is a JavaScript file.

It contains code for a web server developed using the Express framework.

The web server connects to the mongodb database.

Select and highlight the mongo-express.yaml file.

Open the file mongo-express.yaml in the text editor.

The mongo hyphen express dot yaml file configures Docker Compose.

Let us view the contents of this file.

Open the file in the text editor.

Highlight services: The top element of the file is services.

Each service can hold a single or multiple containers of an image.

It also defines various properties for the containers.

Highlight mongodb-service. The name of the first service is mongodb hyphen service.

Note that the name of the service need not be the same as the image or container.

On the next indentation level, we will define the properties for the service.

Highlight container_name First we define the name of the container as mongodb hyphen container for the image.

If you do not specify the container name, a random name will be assigned.

Highlight image The name of the image is mongo.
Highlight environment The environment key sets the environment variables.

The variables are specified as a list.

We set two environment variables here.

Highlight MONGO_INITDB_ROOT_USERNAME First is the name of the root user.
Highlight MONGO_INITDB_ROOT_PASSWORD The second is the root user password.
Highlight ports Finally, we specify port bindings for the container.

Multiple bindings can be specified using a list.

Highlight 127.0.0.1:27017:27017 Here, we are specifying only one port binding.

The port 27017 on localhost, is mapped to port 27017 of the container.

Only narration. Next we will go through the service description for the Express server.
Highlight express-service The name of the service is express hyphen service.
Highlight container_name under node The container name is express hyphen container.
Highlight image The image is node.
Highlight user The user key sets the user under which the container process runs.

This can be used to give different levels of permissions to the container.

Here we are setting the user to node.

zHighlight working_dir Then we set the working directory using the working underscore dir key.

It sets the working directory inside the container for executing commands.

Highlight environment Next we specify the environment variables.
Highlight MONGODB_USERNAME MONGODB underscore USERNAME sets the username for accessing the database.
Highlight MONGODB_PASSWORD MONGODB underscore PASSWORD specifies the password of the user.

The username and password should be the same as set under mongodb service.

Highlight MONGODB_CONTAINER_NAME MONGODB underscore CONTAINER underscore NAME sets the mongodb container name.

This name is required to connect to the database from the Express server.

Highlight MONGODB_CONTAINER_PORT MONGODB underscore CONTAINER underscore PORT specifies mongodb container port.

The value must match the port specified under mongodb service.

Highlight volumes Volumes are used to persist data between the container runs.

We shall discuss volumes in detail in upcoming tutorials.

Highlight ports Next we set the port bindings.
Highlight 127.0.0.1:3000:3000 We shall access our web server at port 3000 on localhost.
Highlight depends_on The depends_on key specifies other services that this service depends on.
Highlight mongodb-service The express service will start after the mongodb service has started.
Highlight command The command key is used to set the container commands.

These are run everytime the container is started.

Highlight bash -c "npm install && node app.js"


These commands set up a nodejs directory and install the required packages.

Then, the server is run using nodejs.

Open a terminal window by pressing Ctrl, Alt and T keys simultaneously.

Cd Downloads/mongo-express

Open a terminal window by pressing Ctrl, Alt and T keys simultaneously.

Go to the Downloads folder

Switch to the mongo-express directory where the source code is saved.

Switch to the mongo-express directory using cd command. Now we will run the two images using Docker Compose.
Type the command sudo docker compose -f mongo-express.yaml up -d Type the command as shown here.
Highlight -f mongo-express.yaml The hyphen f flag is used to specify the yaml file for docker compose.

Here, the name of the file is mongo hyphen express dot yaml.

Highlight up The up command starts all the services mentioned in the file.
Highlight -d The hyphen d flag runs the services in the background.
Press Enter to run the command. Press Enter.

Please wait until the pull is complete.

Highlight the output of the command. The output shows that the containers were started.
Type sudo docker ps and press Enter. Type sudo space docker space ps and press Enter.

The output shows that our containers are running.

Type sudo docker logs express-container and press Enter. Let us check if the Express server is running.

Type sudo space docker space logs space express hyphen container.

Here express hyphen container is the container running the Express server.

Press Enter.

In the output, highlight Server started at http://localhost:3000 The output shows that our server is running at port 3000 on localhost.
Highlight Connected to MongoDB. It also shows that the server is connected to the mongodb database.

If you do not get this output, please wait for a few seconds.

Then run the docker logs command again.

Open Firefox web browser.

Type [1] and press Enter.

Let us now access the server on the browser.

Open web browser.

Type the address as shown.

Press Enter.

Highlight the text on the page. The output shows that the Express server is running.
Switch to the terminal. Now we will add data to the mongodb database using mongosh.

Switch to the terminal.

Type the command as shown here.
Highlight exec We are using exec command to connect to the database using mongosh shell.
Highlight –username Make sure the username and password here are the same as set in yaml file.
Press Enter to execute the command. Now execute the command by pressing Enter.
Highlight test> You will be connected to the test database.
To insert data into the database, type the following command.
Highlight db.users.insertMany Db dot users dot insertMany inserts multiple documents into the users database.
Highlight {name:"Karan", age:24}

Press Enter.

We insert data of two users.

It contains their name and age.

Let us execute this command.

Press Enter.

Highlight insertedIds The output shows the object ids of the inserted documents.
Switch to the Firefox browser. Now we shall view the list of users using our Express server.

Open the browser.

Type the address http://localhost:3000/users in the search bar.

Press Enter.

Type the following address in the search bar.

This navigates to the users API endpoint of the Express server.

This API allows us to connect to the mongodb database.

Press Enter.

Highlight the text on the web page. We get the list of users that we inserted in the mongosh shell.

So our express container successfully connected to the mongodb container.

We did not create a Docker network for connecting the containers.

Docker compose automatically creates a network for the containers.

This allows them to communicate with each other.

Show slide:

Summary

This brings us to the end of this tutorial.

Let us summarise.

In this tutorial, we have learnt about

  • Docker compose and its uses
  • Running multiple Docker images using Docker Compose
Show slide:

Assignment (1)

As an assignment, please do the following:
  • Download the assignment source code from the code files link
  • There are two files: app.py(app folder) and docker-compose.yaml
  • The docker-compose.yaml file creates two services
Show slide:

Assignment (2)

  • First service runs Python Flask web server
  • The second service runs mongodb database
  • The Flask server connects to the mongodb database.
Show slide:

Assignment (3)

URL shown on slide:localhost:5000/users

Follow the same steps as shown in this tutorial and do the following
  • Run the docker-compose.yaml file
  • Add data to the mongodb database
  • Go to this URL in the browser to view the inserted data.
Show slide:

Assignment Observation

This is the output of the docker compose command when run with the hyphen d flag.
Show slide:

Assignment Observation

We inserted the following data using mongosh.
Show slide:

Assignment Observation

On the browser, we get names of the inserted users using the Flask web server.
Show slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

Show slide: 
Spoken Tutorial Workshops
The  Spoken Tutorial Project 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.
Show slide:

Acknowledgement

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

Thank You

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

Thanks for joining.

Contributors and Content Editors

Madhurig, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Docker/C2/Docker-Compose/English&oldid=56750"