1
00:00:04,240 --> 00:00:11,410
Well, we have just successfully created the basic web server using an image called Nginx.

2
00:00:11,410 --> 00:00:18,100
And for that we have used also port mapping in order to be able to connect to web server from our local

3
00:00:18,100 --> 00:00:18,880
computer.

4
00:00:18,880 --> 00:00:27,070
And we have exposed port 8080 and mapped that external port on our computer to internal port 80 inside

5
00:00:27,070 --> 00:00:28,570
of the Nginx container.

6
00:00:28,570 --> 00:00:31,510
And that's why we are able to see this page here.

7
00:00:31,540 --> 00:00:38,920
Now this container is still running and we are able to stop it using key combination Ctrl C like so.

8
00:00:38,920 --> 00:00:46,510
And if I'll enter now Docker PS, I should see that there are no containers running and if I'll try

9
00:00:46,510 --> 00:00:53,620
to refresh page here, I will see that this page can be reached because container is now stopped and

10
00:00:53,620 --> 00:00:57,370
this port is no longer exposed on my computer.

11
00:00:57,820 --> 00:00:58,530
Great.

12
00:00:58,540 --> 00:01:08,690
Let's now try to create a custom HTML page on our computer and try to map folder with this custom HTML

13
00:01:08,690 --> 00:01:15,110
page to container and serve this HTML page from inside of the container.

14
00:01:15,320 --> 00:01:16,730
Let's try to do that.

15
00:01:16,760 --> 00:01:24,110
Let me clear terminal and let me CD to desktop and on the desktop I'll create a folder called Containers.

16
00:01:24,110 --> 00:01:30,200
And inside of that folder I'll create different folders for further lectures where we will create the

17
00:01:30,200 --> 00:01:37,700
different containers using Java, Python, Nginx and for example, NodeJS images.

18
00:01:37,730 --> 00:01:40,850
Okay, let me create a folder called containers.

19
00:01:41,030 --> 00:01:44,720
Mkdir containers.

20
00:01:44,720 --> 00:01:51,710
And here let's CD to containers and create one more folder inside of it called nginx.

21
00:01:52,010 --> 00:01:56,780
Mkdir enginex and let's CD to nginx.

22
00:01:57,020 --> 00:02:01,340
And now we are actually starting creating and editing text files.

23
00:02:01,340 --> 00:02:04,700
And for that you could use any text editor you like.

24
00:02:04,730 --> 00:02:09,889
You are even able to use such terminal applications as vim or nano.

25
00:02:09,889 --> 00:02:16,550
But I understand that there are different students and you could use either Windows or Mac or Linux.

26
00:02:16,550 --> 00:02:22,250
And in order to be consistent, let me show you how to create and edit files in Visual Studio Code.

27
00:02:22,250 --> 00:02:27,900
Visual Studio Code is Open source editor and it is available for all mentioned platforms.

28
00:02:27,920 --> 00:02:32,960
That's why if you don't have Visual Studio code installed, I recommend you to install it right now.

29
00:02:32,960 --> 00:02:36,440
And for that please go to web browser type here.

30
00:02:37,010 --> 00:02:39,530
Visual Studio code.

31
00:02:40,030 --> 00:02:41,710
And open first link.

32
00:02:42,570 --> 00:02:43,500
This one.

33
00:02:44,290 --> 00:02:47,110
And download for your operating system.

34
00:02:47,110 --> 00:02:51,430
Again, as I have told you before, it is available for Mac, for Windows and for Linux.

35
00:02:51,460 --> 00:02:53,740
Installation process is pretty straightforward.

36
00:02:53,740 --> 00:02:55,290
I will not repeat it here.

37
00:02:55,300 --> 00:02:58,300
I have already Visual Studio code installed on this computer.

38
00:02:58,300 --> 00:02:58,940
That's why.

39
00:02:58,960 --> 00:03:00,640
Let me open it up.

40
00:03:00,700 --> 00:03:01,690
Type here.

41
00:03:01,840 --> 00:03:04,120
Visual Studio code press enter.

42
00:03:04,240 --> 00:03:10,180
And now I'll open the folder called Containers that have created on desktop.

43
00:03:10,180 --> 00:03:13,210
For that, I'll go to file and open.

44
00:03:15,560 --> 00:03:18,770
And on desktop, I'll select folder containers.

45
00:03:18,770 --> 00:03:24,800
This one click open and folder containers was opened here in Visual Studio Code.

46
00:03:24,830 --> 00:03:31,850
Notice that it now has already one folder inside of it called Nginx, but at the moment this folder

47
00:03:31,850 --> 00:03:32,560
is empty.

48
00:03:32,570 --> 00:03:35,300
You could close this welcome message if you want to.

49
00:03:35,510 --> 00:03:36,140
Great.

50
00:03:36,140 --> 00:03:41,960
Let's now create a simple index.html file inside of the Nginx folder.

51
00:03:41,960 --> 00:03:46,310
For that please click on this folder and next click on this file icon.

52
00:03:46,310 --> 00:03:50,750
Create new file and name it index.html like.

53
00:03:50,750 --> 00:03:57,830
So here inside of this HTML file you could simply type for example, H1.

54
00:03:57,830 --> 00:04:04,010
We are creating an H1 tag and inside of this H1 tag let's type for example.

55
00:04:04,040 --> 00:04:06,170
Hello from the custom.

56
00:04:06,890 --> 00:04:16,310
Let me hide this left pane from the custom web page, exclamation mark and let's save this file using

57
00:04:16,320 --> 00:04:22,980
key combination command s or you could save a file going to file and select save here.

58
00:04:23,010 --> 00:04:23,670
Great.

59
00:04:23,670 --> 00:04:32,130
If I'll go back to terminal and list files now in nginx folder, I'll see index.html file on the list.

60
00:04:32,340 --> 00:04:40,020
Now we are all set and we are ready to try to serve this file using nginx container.

61
00:04:40,020 --> 00:04:47,360
And let's suppose that we want to serve this page over external port 8081, not 8080.

62
00:04:47,370 --> 00:04:52,110
And for that we will use port mapping and volume mapping.

63
00:04:52,110 --> 00:05:01,290
We will map our local folder that has this index.html file inside to specific folder inside of the container

64
00:05:01,290 --> 00:05:05,790
and that folder will be used for serving of this page.

65
00:05:05,880 --> 00:05:07,770
Let me show you how to do so.

66
00:05:07,890 --> 00:05:14,250
Let's again use Docker run command and recap that we have already Nginx image in local cache.

67
00:05:14,250 --> 00:05:22,410
We could verify that the Docker images and yes, here is nginx image and its size is 127MB.

68
00:05:22,710 --> 00:05:23,280
Great.

69
00:05:23,280 --> 00:05:28,530
Let me clear our terminal and let's use Docker run command first.

70
00:05:28,530 --> 00:05:33,390
We will map port and I want to map internal port 80.

71
00:05:33,420 --> 00:05:38,430
It is again default port for nginx to external port 8081.

72
00:05:38,520 --> 00:05:41,850
Let's type first external port 8081.

73
00:05:41,880 --> 00:05:45,450
Next comes colon and after colon comes port 80.

74
00:05:45,450 --> 00:05:47,940
It is internal port inside of the container.

75
00:05:48,180 --> 00:05:54,330
Next I will map volume and for that I'll use dash V option.

76
00:05:54,330 --> 00:06:01,170
And if you want to map volume from your computer, from Windows Computer or macOS computer or Linux

77
00:06:01,170 --> 00:06:09,600
computer, you need to use here absolute path to specific folder and you could find specific path using

78
00:06:09,600 --> 00:06:10,990
command CD.

79
00:06:11,040 --> 00:06:19,350
Let me show you that in new tab and let me CD first to desktop containers and nginx and if I'll type

80
00:06:20,250 --> 00:06:23,220
CD, I'll see path to current folder.

81
00:06:23,220 --> 00:06:24,240
Here it is.

82
00:06:24,240 --> 00:06:27,870
And actually I'm able to copy this path from here.

83
00:06:27,900 --> 00:06:29,070
Let me do so.

84
00:06:29,070 --> 00:06:32,160
Go to previous tab paste path here.

85
00:06:32,160 --> 00:06:32,430
Right.

86
00:06:32,430 --> 00:06:41,250
So and afterwards I'll add here colon and next you need to map this folder to specific folder inside

87
00:06:41,250 --> 00:06:42,390
of the container.

88
00:06:42,390 --> 00:06:49,590
And because we are running Nginx web server, we need to use specific folder name that is used for serving

89
00:06:49,590 --> 00:06:51,390
of HTML files.

90
00:06:51,570 --> 00:06:59,910
And this folder for nginx server is following user slash share slash nginx slash HTML.

91
00:07:00,060 --> 00:07:05,010
Please be specific and type this path same as I just did.

92
00:07:05,250 --> 00:07:07,350
And afterwards please add space.

93
00:07:07,350 --> 00:07:11,250
And next comes name of the image you want to use.

94
00:07:11,250 --> 00:07:15,300
And we will use nginx image like this again.

95
00:07:15,300 --> 00:07:15,870
This command.

96
00:07:15,870 --> 00:07:17,550
We have created port mapping.

97
00:07:17,550 --> 00:07:25,290
We have exposed internal port 80 to external port 8081 and also we have used volume mapping.

98
00:07:25,290 --> 00:07:33,210
We tell Docker that we want to map this folder that is located on our computer to specific internal

99
00:07:33,210 --> 00:07:33,720
folder.

100
00:07:33,720 --> 00:07:36,180
And in this case this folder is here.

101
00:07:36,180 --> 00:07:37,980
User share Nginx.

102
00:07:38,190 --> 00:07:43,800
HTML and this folder is used for serving of content by Nginx server.

103
00:07:43,950 --> 00:07:47,730
Let's now try to run this container and see what will happen.

104
00:07:47,730 --> 00:07:49,290
Let's press enter here.

105
00:07:49,290 --> 00:07:52,830
You see that Docker would like to access files in your desktop folder.

106
00:07:52,830 --> 00:07:53,820
It's a good sign.

107
00:07:53,820 --> 00:07:56,670
It tries to access files in this folder.

108
00:07:56,670 --> 00:07:58,260
Nginx in this path.

109
00:07:58,260 --> 00:07:59,430
Let's allow it.

110
00:07:59,430 --> 00:08:00,210
Okay.

111
00:08:00,420 --> 00:08:03,060
And now nginx is running.

112
00:08:03,060 --> 00:08:05,490
You could verify that in another tab.

113
00:08:05,490 --> 00:08:10,320
Let's type here Docker PS and yes Nginx is running.

114
00:08:10,320 --> 00:08:15,270
And also here you see this port mapping that we have just created we have mapped.

115
00:08:15,360 --> 00:08:18,870
External port 8081 to internal port 80.

116
00:08:18,870 --> 00:08:25,920
And those four zeros mean here that you will be able to connect to this port using any of the IP addresses

117
00:08:25,920 --> 00:08:32,159
of this computer of your computer, and you could find IP addresses using, for example, command ifconfig

118
00:08:32,159 --> 00:08:34,380
on Mac on windows this ipconfig.

119
00:08:34,380 --> 00:08:40,740
And here you'll see a list of interfaces on your computer, on your local computer with IP addresses

120
00:08:40,740 --> 00:08:41,750
assigned to them.

121
00:08:41,760 --> 00:08:47,880
For example, here I see that here is IP address assigned to Ethernet zero interface on my computer.

122
00:08:47,880 --> 00:08:53,220
And if I'll scroll up I should find localhost or loopback interface.

123
00:08:53,220 --> 00:08:59,670
Here it is and here is IP address that is assigned to it and that is actually localhost address and

124
00:08:59,670 --> 00:09:07,770
you are able to use either this IP address or localhost or this IP address in order to connect to your

125
00:09:07,770 --> 00:09:09,000
nginx web server.

126
00:09:09,000 --> 00:09:12,380
And of course everywhere you should use port 8081.

127
00:09:12,390 --> 00:09:19,750
Let's first use localhost address as we have used before localhost, but port will be now 8081.

128
00:09:19,750 --> 00:09:24,550
Let's press enter and I see hello from the custom web page.

129
00:09:24,790 --> 00:09:31,270
And that means that now Nginx basically serves content from the folder located on my computer.

130
00:09:31,890 --> 00:09:38,550
We have just connected to this page using localhost address and this address basically resolves to loopback

131
00:09:38,820 --> 00:09:39,230
address.

132
00:09:39,240 --> 00:09:50,760
Let me show you that if I'll go to terminal and type here nslookup localhost, I'll get 127 001 and

133
00:09:50,760 --> 00:09:54,920
I could use this IP address in order to connect to our Nginx server.

134
00:09:54,930 --> 00:10:05,610
Let me go back to Google Chrome and instead of localhost here, type 127 001 and I'll get same page.

135
00:10:05,730 --> 00:10:11,670
Also, as I have told you before, you are able to connect to the same page using any other IP addresses

136
00:10:11,670 --> 00:10:13,110
assigned to your computer.

137
00:10:13,110 --> 00:10:18,210
And in my case I see here this IP address assigned to Ethernet zero interface.

138
00:10:18,210 --> 00:10:20,190
I could copy this address from here.

139
00:10:20,220 --> 00:10:27,330
Go to Google Chrome, please find your address here and paste address here and connect to the same port

140
00:10:27,330 --> 00:10:27,690
press.

141
00:10:27,690 --> 00:10:31,390
Enter and I'll get same page as before.

142
00:10:31,390 --> 00:10:36,400
That's how you are able to connect to this web page using different IP addresses.

143
00:10:36,400 --> 00:10:42,940
But the main idea is that we were able to connect to our custom, let's say HTML page that is served

144
00:10:42,940 --> 00:10:44,770
from inside of the container.

145
00:10:44,860 --> 00:10:46,510
Let's now try to the following.

146
00:10:46,510 --> 00:10:52,600
Let's try to adjust this HTML page inside of the Visual Studio code and afterwards refresh the page

147
00:10:52,600 --> 00:10:56,500
and verify whether Nginx will update this page or not.

148
00:10:56,530 --> 00:11:03,280
Let's go to Visual Studio code and modify this text here and let's, for example, make it hello from

149
00:11:03,280 --> 00:11:05,500
the updated custom web page.

150
00:11:05,860 --> 00:11:13,240
Let's save the file and go back to this web browser and refresh page here and I'll see updated page.

151
00:11:13,450 --> 00:11:21,310
That means that we are actually able to modify files on our local computer inside of the Nginx folder

152
00:11:21,310 --> 00:11:28,480
and Nginx server inside of the container will automatically actually refresh data inside of it and will

153
00:11:28,480 --> 00:11:30,400
serve updated files.

154
00:11:30,580 --> 00:11:34,810
You could verify that there were actually no changes in the container.

155
00:11:34,810 --> 00:11:40,180
It is still up and running and if I'll go back to terminal and type here, Docker.

156
00:11:40,180 --> 00:11:42,190
PS Let me clear terminal Docker.

157
00:11:42,190 --> 00:11:46,030
PS you'll see that Nginx is still up and running.

158
00:11:46,030 --> 00:11:51,370
Here is port forwarding information and this container is up eight minutes.

159
00:11:51,670 --> 00:11:57,970
Also, if I'll go to this step where we have started actually nginx container, you'll see a bunch of

160
00:11:57,970 --> 00:12:03,670
logs that were created when we have connected to our web page using different IP addresses.

161
00:12:03,670 --> 00:12:12,280
Here are those logs still, you see that request to favicon.ico is failed because we have not created

162
00:12:12,280 --> 00:12:14,680
such file inside of our folder.

163
00:12:14,680 --> 00:12:16,810
And let me actually quickly fix that.

164
00:12:16,810 --> 00:12:22,720
But let's do that in the next lecture and let's add the favicon.ico inside of our Nginx folder on our

165
00:12:22,720 --> 00:12:23,650
local computer.

166
00:12:23,650 --> 00:12:25,360
Let's do that next by by.