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

2
00:00:04,620 --> 00:00:06,690
We just created such a basic 'docker-

3
00:00:06,690 --> 00:00:09,390
compose.yml' file with description

4
00:00:09,480 --> 00:00:12,600
of two services frontend and api.

5
00:00:13,200 --> 00:00:15,150
And now let's using 'docker-compose'

6
00:00:15,150 --> 00:00:18,000
command, try to run both containers

7
00:00:18,000 --> 00:00:20,730
frontend and api. Let's go to the

8
00:00:20,730 --> 00:00:22,590
terminal here, and first we need to

9
00:00:22,590 --> 00:00:25,050
'cd' to the 'images-gallery' folder.

10
00:00:25,410 --> 00:00:27,180
I'll go to the 'Desktop', 'images-

11
00:00:27,210 --> 00:00:29,460
gallery'. Ensure that you also go

12
00:00:29,460 --> 00:00:31,200
to the 'images-gallery' folder, and

13
00:00:31,200 --> 00:00:33,240
here inside you should find 'docker-

14
00:00:33,270 --> 00:00:36,510
compose.yml' file and both folders

15
00:00:36,570 --> 00:00:39,930
'api' and 'frontend'. Here please type

16
00:00:39,930 --> 00:00:42,150
following command 'docker-

17
00:00:42,150 --> 00:00:45,150
compose up'. Let's go ahead and see

18
00:00:45,150 --> 00:00:47,640
what will happen. Also notice that

19
00:00:47,670 --> 00:00:49,500
you're able to run 'docker-compose'

20
00:00:49,500 --> 00:00:52,050
using 'docker-compose up' command.

21
00:00:53,010 --> 00:00:54,870
First Docker has created such

22
00:00:54,870 --> 00:00:57,060
network as 'images-gallery_default',

23
00:00:57,540 --> 00:00:59,790
and notice name here, it matches

24
00:00:59,820 --> 00:01:01,950
with name of the folder where we

25
00:01:01,950 --> 00:01:03,810
run 'docker-compose' command and

26
00:01:03,810 --> 00:01:06,060
where 'docker-compose.yml' file is

27
00:01:06,060 --> 00:01:09,030
located. Afterwards 'docker-compose'

28
00:01:09,060 --> 00:01:10,530
started the 'build' process for the

29
00:01:10,530 --> 00:01:13,200
frontend service, here it is, and

30
00:01:13,200 --> 00:01:15,030
it started from the first step

31
00:01:15,180 --> 00:01:17,430
where it is needed to pull Docker

32
00:01:17,460 --> 00:01:19,860
image called 'node' with corresponding

33
00:01:19,890 --> 00:01:22,830
tag '15.14-alpine' from the Docker

34
00:01:22,830 --> 00:01:24,990
Hub. Docker will go through the

35
00:01:24,990 --> 00:01:26,940
next steps much faster. This way let

36
00:01:26,940 --> 00:01:28,827
me get back to you when 'docker-compose'

37
00:01:28,827 --> 00:01:30,240
will complete its work.

38
00:01:30,690 --> 00:01:32,880
Finally I see such logs. But now

39
00:01:32,880 --> 00:01:34,380
let me scroll to the very beginning

40
00:01:34,410 --> 00:01:36,210
of this output and explain to you

41
00:01:36,270 --> 00:01:39,017
what happened next after 'docker-compose'

42
00:01:39,017 --> 00:01:40,710
started building frontend

43
00:01:40,710 --> 00:01:44,070
application. So it reused few cached

44
00:01:44,070 --> 00:01:46,050
layers, for instance, this layer or

45
00:01:46,050 --> 00:01:48,450
this layer or this layer, but in

46
00:01:48,450 --> 00:01:50,820
this layer notice that it performed

47
00:01:50,820 --> 00:01:52,920
copy operation once again from

48
00:01:52,920 --> 00:01:55,350
scratch. And the reason for that is

49
00:01:55,350 --> 00:01:57,000
that at the moment of the previous

50
00:01:57,000 --> 00:01:59,130
build when we used 'docker build'

51
00:01:59,130 --> 00:02:01,980
command we removed node modules

52
00:02:01,980 --> 00:02:04,980
folder before and afterwards we entered

53
00:02:04,980 --> 00:02:07,260
up 'npm install' command and node

54
00:02:07,260 --> 00:02:09,180
modules folder was added in the

55
00:02:09,180 --> 00:02:11,550
frontend folder in our 'images-

56
00:02:11,550 --> 00:02:13,500
gallery' project. That's why it

57
00:02:13,500 --> 00:02:15,570
wasn't possible to reuse cached

58
00:02:15,570 --> 00:02:18,450
layer and Docker has initiated copy

59
00:02:18,450 --> 00:02:21,000
operation again and created a brand

60
00:02:21,030 --> 00:02:22,980
new layer here on this step.

61
00:02:23,580 --> 00:02:25,980
Afterwards it exported resulting

62
00:02:25,980 --> 00:02:28,590
layers to the image, and here is the

63
00:02:28,620 --> 00:02:31,440
SHA Hash of resulting from an

64
00:02:31,500 --> 00:02:35,430
image and name of it is 'images-

65
00:02:35,430 --> 00:02:38,940
gallery_frontend'. This

66
00:02:38,940 --> 00:02:41,040
name was chosen by 'docker-compose'

67
00:02:41,100 --> 00:02:44,430
automatically. 'images-gallery is

68
00:02:44,430 --> 00:02:48,145
name of the folder where 'docker-compose.yml'

69
00:02:48,145 --> 00:02:50,370
file is located. It is

70
00:02:50,370 --> 00:02:52,380
name of our project folder, 'images-

71
00:02:52,380 --> 00:02:55,680
gallery, and after '_' it

72
00:02:55,710 --> 00:02:58,080
added the name of the service that is

73
00:02:58,080 --> 00:03:00,690
being built, and name of the service

74
00:03:00,750 --> 00:03:03,150
is frontend. That's what we

75
00:03:03,150 --> 00:03:06,400
defined here in the 'docker-compose.yml'

76
00:03:06,400 --> 00:03:08,200
file here with this service

77
00:03:08,250 --> 00:03:11,610
name, frontend. Alright, frontend

78
00:03:11,640 --> 00:03:14,430
image was built. And afterwards you

79
00:03:14,430 --> 00:03:16,770
see some additional outputs from

80
00:03:16,770 --> 00:03:18,720
'docker-compose' like 'Successfully

81
00:03:18,720 --> 00:03:22,140
built' image with such ID; and also

82
00:03:22,140 --> 00:03:24,360
you see the 'WARNING: Image for service

83
00:03:24,360 --> 00:03:26,820
frontend was built because it did

84
00:03:26,820 --> 00:03:30,060
not already exist. To rebuild this

85
00:03:30,090 --> 00:03:32,340
image you must use `docker-

86
00:03:32,340 --> 00:03:36,210
compose build` or `docker-compose up

87
00:03:36,240 --> 00:03:39,240
--build`'; and you need to

88
00:03:39,240 --> 00:03:41,430
perform rebuild of 'docker-compose'

89
00:03:41,460 --> 00:03:43,710
services if for instance, you

90
00:03:43,710 --> 00:03:45,540
install additional packages in the

91
00:03:45,540 --> 00:03:47,970
frontend application, and 'package

92
00:03:47,970 --> 00:03:50,878
.json' file and 'package-lock.json'

93
00:03:50,878 --> 00:03:53,280
files change. Next you see

94
00:03:53,310 --> 00:03:57,000
starting 'Building api' log. And from

95
00:03:57,000 --> 00:03:59,070
this moment 'docker-compose' actually

96
00:03:59,100 --> 00:04:02,310
started building api service. It

97
00:04:02,310 --> 00:04:04,530
also went through all steps defined

98
00:04:04,560 --> 00:04:06,180
in the Dockerfile for the api

99
00:04:06,180 --> 00:04:08,880
service. And notice that here, it

100
00:04:08,880 --> 00:04:11,790
reused all cached layers starting

101
00:04:11,790 --> 00:04:13,740
from the step number 2 till the

102
00:04:13,770 --> 00:04:16,709
step number 7. Because we did

103
00:04:16,709 --> 00:04:18,570
not modify anything in the api

104
00:04:18,570 --> 00:04:20,700
folder, that's why it was able to

105
00:04:20,700 --> 00:04:23,550
reuse even this layer for copy

106
00:04:23,550 --> 00:04:26,399
step. No files were modified in the

107
00:04:26,430 --> 00:04:29,700
'api' folder. After that, it exported

108
00:04:29,730 --> 00:04:32,130
layers to resulting image. And here's

109
00:04:32,160 --> 00:04:34,980
resulting SHA Hash of the api

110
00:04:35,100 --> 00:04:37,980
image. And here was name for the

111
00:04:37,980 --> 00:04:40,410
resulting image, 'images-gallery

112
00:04:40,470 --> 00:04:43,200
_api', and approach for the

113
00:04:43,200 --> 00:04:45,060
naming of this image is the same as

114
00:04:45,060 --> 00:04:48,240
for frontend. 'api' here is service

115
00:04:48,240 --> 00:04:51,326
name defined here in the 'docker-compose'

116
00:04:51,326 --> 00:04:54,254
file, here it is. And 'images-gallery'

117
00:04:54,254 --> 00:04:55,110
is the name of the

118
00:04:55,110 --> 00:04:57,840
folder where we run 'docker-compose

119
00:04:57,900 --> 00:05:00,720
up' command. Great. Also, you see

120
00:05:00,720 --> 00:05:03,100
'WARNING: Image for service api

121
00:05:03,100 --> 00:05:04,200
was built because there was

122
00:05:04,260 --> 00:05:06,690
no previously built image'. And you

123
00:05:06,690 --> 00:05:09,480
could same as for frontend rebuild

124
00:05:09,570 --> 00:05:11,880
api service using 'docker-compose

125
00:05:11,900 --> 00:05:14,900
build', or 'docker-compose up -- build'

126
00:05:14,900 --> 00:05:16,700
command. But notice that

127
00:05:16,770 --> 00:05:19,110
in such case, 'docker-compose' will

128
00:05:19,110 --> 00:05:22,110
rebuild all services defined in the

129
00:05:22,110 --> 00:05:24,780
'docker-compose' file. All right,

130
00:05:25,080 --> 00:05:27,540
next to it, you see such two logs,

131
00:05:27,750 --> 00:05:30,387
'Creating images-gallery_frontend_1',

132
00:05:30,387 --> 00:05:32,900
and 'Creating images-gallery_api_1'

133
00:05:33,510 --> 00:05:35,760
And in those steps 'docker-compose'

134
00:05:35,790 --> 00:05:38,280
creates actually new containers

135
00:05:38,580 --> 00:05:40,560
based on the previously built

136
00:05:40,620 --> 00:05:43,830
images, and it automatically gives

137
00:05:43,860 --> 00:05:46,170
such names to those containers,

138
00:05:46,470 --> 00:05:48,750
'images-gallery_frontend_1',

139
00:05:48,960 --> 00:05:51,300
and 'images-gallery_api_1'.

140
00:05:52,050 --> 00:05:54,270
Afterwards, it attached to standard

141
00:05:54,300 --> 00:05:57,113
output of 'images-gallery_frontend_1',

142
00:05:57,113 --> 00:05:59,070
and 'images-gallery_api_1'

143
00:05:59,190 --> 00:06:01,800
containers in order to produce here

144
00:06:01,830 --> 00:06:03,660
logs that are generated by those

145
00:06:03,660 --> 00:06:06,060
containers. And for instance, here

146
00:06:06,150 --> 00:06:07,920
you see logs that are coming from

147
00:06:07,920 --> 00:06:11,370
the api container. All those logs

148
00:06:11,460 --> 00:06:14,670
are from the api container. And you

149
00:06:14,670 --> 00:06:17,040
see that Flask web server is now

150
00:06:17,040 --> 00:06:20,130
actually running at Port 5050. And

151
00:06:20,130 --> 00:06:22,170
also next to those logs, you see

152
00:06:22,170 --> 00:06:24,150
logs that come from the frontend

153
00:06:24,150 --> 00:06:26,610
container. And we see finally the

154
00:06:26,610 --> 00:06:28,410
development server has started,

155
00:06:28,950 --> 00:06:30,840
'Compiled successfully'. It means

156
00:06:30,840 --> 00:06:32,640
that React screens successfully

157
00:06:32,640 --> 00:06:35,550
greeted development build. And now

158
00:06:35,550 --> 00:06:37,350
I see that same as before React

159
00:06:37,350 --> 00:06:39,030
application is running at Port

160
00:06:39,060 --> 00:06:42,060
3000. Great. Now let's try to

161
00:06:42,060 --> 00:06:44,160
verify whether our application is

162
00:06:44,160 --> 00:06:46,530
accessible or not. Let's go to web

163
00:06:46,530 --> 00:06:50,250
browser and refresh page here. And

164
00:06:50,250 --> 00:06:52,350
I see that application is available.

165
00:06:52,800 --> 00:06:54,300
Let's search here for something, for

166
00:06:54,300 --> 00:06:57,660
instance 'phone', and I get results.

167
00:06:58,110 --> 00:07:00,570
It means that both frontend and api

168
00:07:00,570 --> 00:07:03,660
service work as expected. They are

169
00:07:03,660 --> 00:07:06,630
running using 'docker-compose', and

170
00:07:06,630 --> 00:07:08,130
here basically I see a log,

171
00:07:08,250 --> 00:07:09,870
additional log that comes from the

172
00:07:09,870 --> 00:07:12,030
api container. It tells us that

173
00:07:12,060 --> 00:07:14,160
there was GET request to this api

174
00:07:14,160 --> 00:07:16,860
endpoint. Great. Let's now go to

175
00:07:16,860 --> 00:07:19,680
another tab, and here enter 'docker

176
00:07:19,680 --> 00:07:21,780
ps' in order to see a list of the

177
00:07:21,780 --> 00:07:24,060
running containers. And I see two

178
00:07:24,060 --> 00:07:26,250
containers. And here are names of

179
00:07:26,250 --> 00:07:28,320
those containers, 'images-gallery_

180
00:07:28,350 --> 00:07:32,247
api_1', and 'images-gallery_frontend_1';

181
00:07:32,247 --> 00:07:34,110
and those container names

182
00:07:34,170 --> 00:07:36,390
are no longer random. They were

183
00:07:36,420 --> 00:07:38,640
assigned by 'docker-compose' based on

184
00:07:38,640 --> 00:07:40,680
the folder name, 'images-gallery';

185
00:07:40,830 --> 00:07:44,199
and service name, api, and frontend.

186
00:07:44,199 --> 00:07:46,440
And now of course, if you want

187
00:07:46,470 --> 00:07:48,510
you could stop those containers or

188
00:07:48,510 --> 00:07:51,210
run over again. But the best way to

189
00:07:51,210 --> 00:07:53,820
stop all containers simultaneously

190
00:07:53,970 --> 00:07:56,100
is to use 'docker-compose down'

191
00:07:56,100 --> 00:07:58,110
command. Also, it's possible to

192
00:07:58,110 --> 00:08:00,580
run Docker containers using 'docker-compose'

193
00:08:00,580 --> 00:08:02,340
in background and let's

194
00:08:02,340 --> 00:08:04,242
try all of that after the small pause.

195
00:08:04,242 --> 00:08:06,208
[no audio]