[Intro Music]
We have just dived a bit deeper into
container world, and we have
created not just port mapping,
but also we have used the '-v'
option that stands for volume, and
volume is actually specific
folder on your computer that you
are able to map to a specific
folder inside of the container. And
we have mapped such folder on
my computer. In your case, this
path will be completely different
because you have at least other user
name. And we have mapped such
folder to internal folder inside of
the container, this one; and nginx
serves content by default from such
internal folder. And that's why we
were able to successfully connect
to our custom HTML page that we
have created in 'nginx' folder
located in 'containers' folder on the
Desktop. But I have promised you that
we will create now a favicon.ico
file in order to get rid of such
errors that request to favicon.ico
failed. Basically, you see here
the same path as we have used here,
'/usr/share/nginx/html'. That proves
that nginx serves content from this
folder. And now let me show you how
you're able to quickly generate
this fancy favicon icon. Let me go
to Google Chrome and here type 'create
favicon', scroll down, and here
let's open, for example, this page
'favicon.io', and we are able here to
generate favicon from specific
text. Let's click on 'GENERATE FROM
TEXT' button, and here let's use for
example letter 'N' because we are running
nginx server, and let's adjust
Font Color. Let's choose for
example, a red color like so. And
the Background will be probably
like this one. And here you're able
to adjust the Font Family. Let's
for example use this one. No, I am
not happy with that. Let me choose,
for example this one. No, this also
doesn't work well. Let me choose
something else. For example, this
one probably. Yeah, this works good.
Okay, I'm happy now with this icon.
And now let's click Download, and it
will download basically set of
different icons with different
sizes. Let's click 'Download'. 'favicon_io.zip'
file was downloaded. Let
me unzip it. Let me actually take
all contents from this file, like so,
copy them, and go to Desktop, go to
'containers', 'nginx', and paste all
contents directly here along with
index.html file. It is
important. Now let's scroll down
here a bit on this page, and you'll
see how to install this icons into
your project. And basically you
need to add some links to head
section of HTML file. Let me do so
quickly. Let me copy all those
links, go to VS Code, and basically
I didn't use here entire HTML
syntax, I have just edited 'h1'
tag, and let me actually quickly
fix that. Let me create actually a
new index.html file. Let me do
so, index2.html, and I'll show
you how you able quickly create the
HTML file inside of the VS Code.
And here you could simply type
exclamation mark, '!', and press tab.
This works out of the box and VS
Code will basically create for you
basic structure of HTML document.
And here you're able to adjust for
example 'title', enter something into
the 'body' and we could copy content
from here, actually first let
me go to 'head' section and paste the
links that I have already copied
like so. And next let's copy
into the 'body' this 'h1' text, paste
here like so, 'Hello from the updated
custom web page'. Actually, let me
adjust text here, 'Hello from the webpage
[no audio]
with fancy favicon', like so.
Let's save this file. And now let
me actually delete index.html
file like so, move to trash, and
let's rename index2.html file to
index.html. If you want to
rename file here in VS Code, you
could simply press Enter, and then
rename the file to other, like so.
Great. Now,
we have index.html file with
all links to favicons, and we
have updated the text and
placed it here in the 'body' section.
Great. Let's now test whether it
works or not. Let's go to our webpage,
and refresh it. And yes, it works.
'Hello from theweb page with fancy
favicon'. Let me add here space
like this, save, and reload page, and
you see this great favicon that we
have just generated. I have did
that just for fun in order to
demonstrate you how you are able to
quickly generate favicon and edit
into your HTML project. And you
don't need necessarily to repeat
all steps along with me. That's all
for this small lecture where I have
demonstrated you how you're able to
update files, nginx server
will be actually able to update
them automatically and serve
updated content each time when
customer refreshes the web page in
his web browser. Now let's do the
following. Let's now try to create
two different nginx containers,
and run them on different ports,
and each of them will serve
different content. But before doing
that, let me show you how you're
able to get rid of this hard coded
path that we have entered when we
have started container. Notice that
we have used here absolute path and
it is not always convenient. And on
different computers, those paths
may differ. And if you will try to
copy this command and execute it on
other computer, on Windows computer,
or any other computer with
different username, you will fail
because there was no such path.
That's why let me first show you
how you're able to replace this
absolute path and use here variable
instead. Let's do that next and
afterwards we will create two
different nginx containers. See you
next. Bye-Bye.
[no audio]