1
00:00:00,000 --> 00:00:04,400
[Intro Music]

2
00:00:04,410 --> 00:00:06,870
We have just dived a bit deeper into

3
00:00:06,870 --> 00:00:08,580
container world, and we have

4
00:00:08,580 --> 00:00:10,770
created not just port mapping,

5
00:00:10,800 --> 00:00:13,050
but also we have used the '-v'

6
00:00:13,080 --> 00:00:15,810
option that stands for volume, and

7
00:00:15,810 --> 00:00:17,430
volume is actually specific

8
00:00:17,430 --> 00:00:19,350
folder on your computer that you

9
00:00:19,350 --> 00:00:21,150
are able to map to a specific

10
00:00:21,150 --> 00:00:23,670
folder inside of the container. And

11
00:00:23,670 --> 00:00:25,740
we have mapped such folder on

12
00:00:25,770 --> 00:00:27,840
my computer. In your case, this

13
00:00:27,840 --> 00:00:29,610
path will be completely different

14
00:00:29,640 --> 00:00:31,560
because you have at least other user

15
00:00:31,560 --> 00:00:33,990
name. And we have mapped such

16
00:00:34,050 --> 00:00:36,870
folder to internal folder inside of

17
00:00:36,870 --> 00:00:39,690
the container, this one; and nginx

18
00:00:39,720 --> 00:00:42,840
serves content by default from such

19
00:00:42,870 --> 00:00:45,570
internal folder. And that's why we

20
00:00:45,570 --> 00:00:47,460
were able to successfully connect

21
00:00:47,460 --> 00:00:50,130
to our custom HTML page that we

22
00:00:50,130 --> 00:00:52,590
have created in 'nginx' folder

23
00:00:52,650 --> 00:00:55,050
located in 'containers' folder on the

24
00:00:55,050 --> 00:00:58,230
Desktop. But I have promised you that

25
00:00:58,260 --> 00:01:00,990
we will create now a favicon.ico

26
00:01:01,170 --> 00:01:03,720
file in order to get rid of such

27
00:01:03,750 --> 00:01:07,000
errors that request to favicon.ico

28
00:01:07,000 --> 00:01:08,850
failed. Basically, you see here

29
00:01:08,880 --> 00:01:11,310
the same path as we have used here,

30
00:01:11,340 --> 00:01:14,160
'/usr/share/nginx/html'. That proves

31
00:01:14,160 --> 00:01:16,800
that nginx serves content from this

32
00:01:16,800 --> 00:01:19,050
folder. And now let me show you how

33
00:01:19,050 --> 00:01:20,610
you're able to quickly generate

34
00:01:20,640 --> 00:01:24,720
this fancy favicon icon. Let me go

35
00:01:24,720 --> 00:01:29,040
to Google Chrome and here type 'create

36
00:01:30,300 --> 00:01:34,140
favicon', scroll down, and here

37
00:01:34,170 --> 00:01:36,720
let's open, for example, this page

38
00:01:36,960 --> 00:01:39,630
'favicon.io', and we are able here to

39
00:01:39,630 --> 00:01:41,610
generate favicon from specific

40
00:01:41,610 --> 00:01:44,070
text. Let's click on 'GENERATE FROM

41
00:01:44,070 --> 00:01:47,460
TEXT' button, and here let's use for

42
00:01:47,460 --> 00:01:50,500
example letter 'N' because we are running

43
00:01:50,500 --> 00:01:53,820
nginx server, and let's adjust

44
00:01:53,820 --> 00:01:55,320
Font Color. Let's choose for

45
00:01:55,320 --> 00:01:57,660
example, a red color like so. And

46
00:01:57,660 --> 00:02:00,210
the Background will be probably

47
00:02:00,210 --> 00:02:02,670
like this one. And here you're able

48
00:02:02,670 --> 00:02:05,310
to adjust the Font Family. Let's

49
00:02:05,310 --> 00:02:07,590
for example use this one. No, I am

50
00:02:07,590 --> 00:02:10,050
not happy with that. Let me choose,

51
00:02:10,169 --> 00:02:12,449
for example this one. No, this also

52
00:02:12,449 --> 00:02:14,220
doesn't work well. Let me choose

53
00:02:14,220 --> 00:02:15,660
something else. For example, this

54
00:02:15,660 --> 00:02:17,730
one probably. Yeah, this works good.

55
00:02:18,360 --> 00:02:20,550
Okay, I'm happy now with this icon.

56
00:02:20,580 --> 00:02:22,860
And now let's click Download, and it

57
00:02:22,860 --> 00:02:24,600
will download basically set of

58
00:02:24,600 --> 00:02:26,040
different icons with different

59
00:02:26,040 --> 00:02:30,800
sizes. Let's click 'Download'. 'favicon_io.zip'

60
00:02:30,800 --> 00:02:32,200
file was downloaded. Let

61
00:02:32,220 --> 00:02:35,190
me unzip it. Let me actually take

62
00:02:35,220 --> 00:02:37,830
all contents from this file, like so,

63
00:02:38,340 --> 00:02:41,220
copy them, and go to Desktop, go to

64
00:02:41,220 --> 00:02:44,130
'containers', 'nginx', and paste all

65
00:02:44,130 --> 00:02:46,500
contents directly here along with

66
00:02:46,530 --> 00:02:48,390
index.html file. It is

67
00:02:48,390 --> 00:02:51,360
important. Now let's scroll down

68
00:02:51,390 --> 00:02:53,370
here a bit on this page, and you'll

69
00:02:53,370 --> 00:02:56,430
see how to install this icons into

70
00:02:56,430 --> 00:02:58,080
your project. And basically you

71
00:02:58,080 --> 00:03:00,360
need to add some links to head

72
00:03:00,390 --> 00:03:03,360
section of HTML file. Let me do so

73
00:03:03,360 --> 00:03:05,730
quickly. Let me copy all those

74
00:03:05,730 --> 00:03:08,700
links, go to VS Code, and basically

75
00:03:08,700 --> 00:03:11,610
I didn't use here entire HTML

76
00:03:11,610 --> 00:03:13,860
syntax, I have just edited 'h1'

77
00:03:13,860 --> 00:03:15,930
tag, and let me actually quickly

78
00:03:15,930 --> 00:03:18,750
fix that. Let me create actually a

79
00:03:18,750 --> 00:03:21,300
new index.html file. Let me do

80
00:03:21,300 --> 00:03:25,650
so, index2.html, and I'll show

81
00:03:25,650 --> 00:03:27,510
you how you able quickly create the

82
00:03:27,510 --> 00:03:30,150
HTML file inside of the VS Code.

83
00:03:30,330 --> 00:03:33,060
And here you could simply type

84
00:03:33,090 --> 00:03:35,430
exclamation mark, '!', and press tab.

85
00:03:36,150 --> 00:03:38,550
This works out of the box and VS

86
00:03:38,550 --> 00:03:40,770
Code will basically create for you

87
00:03:40,830 --> 00:03:43,170
basic structure of HTML document.

88
00:03:43,380 --> 00:03:44,730
And here you're able to adjust for

89
00:03:44,730 --> 00:03:46,500
example 'title', enter something into

90
00:03:46,500 --> 00:03:49,650
the 'body' and we could copy content

91
00:03:49,650 --> 00:03:51,300
from here, actually first let

92
00:03:51,300 --> 00:03:53,970
me go to 'head' section and paste the

93
00:03:53,970 --> 00:03:56,220
links that I have already copied

94
00:03:56,250 --> 00:03:59,940
like so. And next let's copy

95
00:03:59,940 --> 00:04:05,040
into the 'body' this 'h1' text, paste

96
00:04:05,040 --> 00:04:07,320
here like so, 'Hello from the updated

97
00:04:07,320 --> 00:04:09,660
custom web page'. Actually, let me

98
00:04:09,700 --> 00:04:14,400
adjust text here, 'Hello from the webpage

99
00:04:14,400 --> 00:04:16,800
[no audio]

100
00:04:16,800 --> 00:04:20,300
with fancy favicon', like so.

101
00:04:21,269 --> 00:04:23,880
Let's save this file. And now let

102
00:04:23,880 --> 00:04:26,700
me actually delete index.html

103
00:04:26,700 --> 00:04:30,450
file like so, move to trash, and

104
00:04:30,450 --> 00:04:33,330
let's rename index2.html file to

105
00:04:33,360 --> 00:04:35,490
index.html. If you want to

106
00:04:35,490 --> 00:04:37,290
rename file here in VS Code, you

107
00:04:37,290 --> 00:04:39,240
could simply press Enter, and then

108
00:04:39,270 --> 00:04:41,640
rename the file to other, like so.

109
00:04:41,940 --> 00:04:42,870
Great. Now,

110
00:04:42,870 --> 00:04:44,820
we have index.html file with

111
00:04:44,850 --> 00:04:47,550
all links to favicons, and we

112
00:04:47,550 --> 00:04:48,990
have updated the text and

113
00:04:48,990 --> 00:04:50,790
placed it here in the 'body' section.

114
00:04:51,090 --> 00:04:53,040
Great. Let's now test whether it

115
00:04:53,040 --> 00:04:55,650
works or not. Let's go to our webpage,

116
00:04:55,710 --> 00:04:58,410
and refresh it. And yes, it works.

117
00:04:58,440 --> 00:05:00,630
'Hello from theweb page with fancy

118
00:05:00,900 --> 00:05:03,930
favicon'. Let me add here space

119
00:05:03,960 --> 00:05:07,260
like this, save, and reload page, and

120
00:05:07,260 --> 00:05:09,570
you see this great favicon that we

121
00:05:09,570 --> 00:05:11,550
have just generated. I have did

122
00:05:11,550 --> 00:05:13,050
that just for fun in order to

123
00:05:13,050 --> 00:05:14,370
demonstrate you how you are able to

124
00:05:14,370 --> 00:05:16,290
quickly generate favicon and edit

125
00:05:16,320 --> 00:05:18,270
into your HTML project. And you

126
00:05:18,270 --> 00:05:19,650
don't need necessarily to repeat

127
00:05:19,650 --> 00:05:22,170
all steps along with me. That's all

128
00:05:22,170 --> 00:05:23,880
for this small lecture where I have

129
00:05:23,880 --> 00:05:25,380
demonstrated you how you're able to

130
00:05:25,380 --> 00:05:27,690
update files, nginx server

131
00:05:27,690 --> 00:05:29,460
will be actually able to update

132
00:05:29,460 --> 00:05:31,290
them automatically and serve

133
00:05:31,320 --> 00:05:33,150
updated content each time when

134
00:05:33,150 --> 00:05:35,280
customer refreshes the web page in

135
00:05:35,280 --> 00:05:37,440
his web browser. Now let's do the

136
00:05:37,440 --> 00:05:39,510
following. Let's now try to create

137
00:05:39,570 --> 00:05:41,850
two different nginx containers,

138
00:05:41,880 --> 00:05:43,830
and run them on different ports,

139
00:05:44,070 --> 00:05:45,840
and each of them will serve

140
00:05:45,870 --> 00:05:47,940
different content. But before doing

141
00:05:47,940 --> 00:05:49,350
that, let me show you how you're

142
00:05:49,380 --> 00:05:52,050
able to get rid of this hard coded

143
00:05:52,050 --> 00:05:54,360
path that we have entered when we

144
00:05:54,360 --> 00:05:56,190
have started container. Notice that

145
00:05:56,190 --> 00:05:58,650
we have used here absolute path and

146
00:05:58,650 --> 00:06:01,170
it is not always convenient. And on

147
00:06:01,170 --> 00:06:03,000
different computers, those paths

148
00:06:03,030 --> 00:06:05,400
may differ. And if you will try to

149
00:06:05,700 --> 00:06:07,800
copy this command and execute it on

150
00:06:07,830 --> 00:06:09,780
other computer, on Windows computer,

151
00:06:09,930 --> 00:06:11,430
or any other computer with

152
00:06:11,430 --> 00:06:13,260
different username, you will fail

153
00:06:13,290 --> 00:06:15,180
because there was no such path.

154
00:06:15,720 --> 00:06:17,040
That's why let me first show you

155
00:06:17,040 --> 00:06:18,960
how you're able to replace this

156
00:06:18,990 --> 00:06:21,120
absolute path and use here variable

157
00:06:21,120 --> 00:06:22,980
instead. Let's do that next and

158
00:06:23,010 --> 00:06:24,480
afterwards we will create two

159
00:06:24,480 --> 00:06:26,580
different nginx containers. See you

160
00:06:26,580 --> 00:06:27,519
next. Bye-Bye.

161
00:06:27,519 --> 00:06:29,610
[no audio]