Well, we have just successfully created the basic web server using an image called Nginx.
And for that we have used also port mapping in order to be able to connect to web server from our local
computer.
And we have exposed port 8080 and mapped that external port on our computer to internal port 80 inside
of the Nginx container.
And that's why we are able to see this page here.
Now this container is still running and we are able to stop it using key combination Ctrl C like so.
And if I'll enter now Docker PS, I should see that there are no containers running and if I'll try
to refresh page here, I will see that this page can be reached because container is now stopped and
this port is no longer exposed on my computer.
Great.
Let's now try to create a custom HTML page on our computer and try to map folder with this custom HTML
page to container and serve this HTML page from inside of the container.
Let's try to do that.
Let me clear terminal and let me CD to desktop and on the desktop I'll create a folder called Containers.
And inside of that folder I'll create different folders for further lectures where we will create the
different containers using Java, Python, Nginx and for example, NodeJS images.
Okay, let me create a folder called containers.
Mkdir containers.
And here let's CD to containers and create one more folder inside of it called nginx.
Mkdir enginex and let's CD to nginx.
And now we are actually starting creating and editing text files.
And for that you could use any text editor you like.
You are even able to use such terminal applications as vim or nano.
But I understand that there are different students and you could use either Windows or Mac or Linux.
And in order to be consistent, let me show you how to create and edit files in Visual Studio Code.
Visual Studio Code is Open source editor and it is available for all mentioned platforms.
That's why if you don't have Visual Studio code installed, I recommend you to install it right now.
And for that please go to web browser type here.
Visual Studio code.
And open first link.
This one.
And download for your operating system.
Again, as I have told you before, it is available for Mac, for Windows and for Linux.
Installation process is pretty straightforward.
I will not repeat it here.
I have already Visual Studio code installed on this computer.
That's why.
Let me open it up.
Type here.
Visual Studio code press enter.
And now I'll open the folder called Containers that have created on desktop.
For that, I'll go to file and open.
And on desktop, I'll select folder containers.
This one click open and folder containers was opened here in Visual Studio Code.
Notice that it now has already one folder inside of it called Nginx, but at the moment this folder
is empty.
You could close this welcome message if you want to.
Great.
Let's now create a simple index.html file inside of the Nginx folder.
For that please click on this folder and next click on this file icon.
Create new file and name it index.html like.
So here inside of this HTML file you could simply type for example, H1.
We are creating an H1 tag and inside of this H1 tag let's type for example.
Hello from the custom.
Let me hide this left pane from the custom web page, exclamation mark and let's save this file using
key combination command s or you could save a file going to file and select save here.
Great.
If I'll go back to terminal and list files now in nginx folder, I'll see index.html file on the list.
Now we are all set and we are ready to try to serve this file using nginx container.
And let's suppose that we want to serve this page over external port 8081, not 8080.
And for that we will use port mapping and volume mapping.
We will map our local folder that has this index.html file inside to specific folder inside of the container
and that folder will be used for serving of this page.
Let me show you how to do so.
Let's again use Docker run command and recap that we have already Nginx image in local cache.
We could verify that the Docker images and yes, here is nginx image and its size is 127MB.
Great.
Let me clear our terminal and let's use Docker run command first.
We will map port and I want to map internal port 80.
It is again default port for nginx to external port 8081.
Let's type first external port 8081.
Next comes colon and after colon comes port 80.
It is internal port inside of the container.
Next I will map volume and for that I'll use dash V option.
And if you want to map volume from your computer, from Windows Computer or macOS computer or Linux
computer, you need to use here absolute path to specific folder and you could find specific path using
command CD.
Let me show you that in new tab and let me CD first to desktop containers and nginx and if I'll type
CD, I'll see path to current folder.
Here it is.
And actually I'm able to copy this path from here.
Let me do so.
Go to previous tab paste path here.
Right.
So and afterwards I'll add here colon and next you need to map this folder to specific folder inside
of the container.
And because we are running Nginx web server, we need to use specific folder name that is used for serving
of HTML files.
And this folder for nginx server is following user slash share slash nginx slash HTML.
Please be specific and type this path same as I just did.
And afterwards please add space.
And next comes name of the image you want to use.
And we will use nginx image like this again.
This command.
We have created port mapping.
We have exposed internal port 80 to external port 8081 and also we have used volume mapping.
We tell Docker that we want to map this folder that is located on our computer to specific internal
folder.
And in this case this folder is here.
User share Nginx.
HTML and this folder is used for serving of content by Nginx server.
Let's now try to run this container and see what will happen.
Let's press enter here.
You see that Docker would like to access files in your desktop folder.
It's a good sign.
It tries to access files in this folder.
Nginx in this path.
Let's allow it.
Okay.
And now nginx is running.
You could verify that in another tab.
Let's type here Docker PS and yes Nginx is running.
And also here you see this port mapping that we have just created we have mapped.
External port 8081 to internal port 80.
And those four zeros mean here that you will be able to connect to this port using any of the IP addresses
of this computer of your computer, and you could find IP addresses using, for example, command ifconfig
on Mac on windows this ipconfig.
And here you'll see a list of interfaces on your computer, on your local computer with IP addresses
assigned to them.
For example, here I see that here is IP address assigned to Ethernet zero interface on my computer.
And if I'll scroll up I should find localhost or loopback interface.
Here it is and here is IP address that is assigned to it and that is actually localhost address and
you are able to use either this IP address or localhost or this IP address in order to connect to your
nginx web server.
And of course everywhere you should use port 8081.
Let's first use localhost address as we have used before localhost, but port will be now 8081.
Let's press enter and I see hello from the custom web page.
And that means that now Nginx basically serves content from the folder located on my computer.
We have just connected to this page using localhost address and this address basically resolves to loopback
address.
Let me show you that if I'll go to terminal and type here nslookup localhost, I'll get 127 001 and
I could use this IP address in order to connect to our Nginx server.
Let me go back to Google Chrome and instead of localhost here, type 127 001 and I'll get same page.
Also, as I have told you before, you are able to connect to the same page using any other IP addresses
assigned to your computer.
And in my case I see here this IP address assigned to Ethernet zero interface.
I could copy this address from here.
Go to Google Chrome, please find your address here and paste address here and connect to the same port
press.
Enter and I'll get same page as before.
That's how you are able to connect to this web page using different IP addresses.
But the main idea is that we were able to connect to our custom, let's say HTML page that is served
from inside of the container.
Let's now try to the following.
Let's try to adjust this HTML page inside of the Visual Studio code and afterwards refresh the page
and verify whether Nginx will update this page or not.
Let's go to Visual Studio code and modify this text here and let's, for example, make it hello from
the updated custom web page.
Let's save the file and go back to this web browser and refresh page here and I'll see updated page.
That means that we are actually able to modify files on our local computer inside of the Nginx folder
and Nginx server inside of the container will automatically actually refresh data inside of it and will
serve updated files.
You could verify that there were actually no changes in the container.
It is still up and running and if I'll go back to terminal and type here, Docker.
PS Let me clear terminal Docker.
PS you'll see that Nginx is still up and running.
Here is port forwarding information and this container is up eight minutes.
Also, if I'll go to this step where we have started actually nginx container, you'll see a bunch of
logs that were created when we have connected to our web page using different IP addresses.
Here are those logs still, you see that request to favicon.ico is failed because we have not created
such file inside of our folder.
And let me actually quickly fix that.
But let's do that in the next lecture and let's add the favicon.ico inside of our Nginx folder on our
local computer.
Let's do that next by by.