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

2
00:00:04,470 --> 00:00:06,480
We already created Dockerfiles for

3
00:00:06,480 --> 00:00:08,910
frontend and api applications. And

4
00:00:08,910 --> 00:00:10,050
now it's time to create a

5
00:00:10,080 --> 00:00:11,970
'docker-compose' file with

6
00:00:11,970 --> 00:00:14,610
instructions to start both frontend

7
00:00:14,640 --> 00:00:16,860
and api containers. Let's get

8
00:00:16,860 --> 00:00:19,080
started with that. Now there are

9
00:00:19,080 --> 00:00:21,630
two containers frontend and api

10
00:00:21,660 --> 00:00:23,700
running. I could verify that using

11
00:00:23,730 --> 00:00:26,130
'docker ps' command. And now I'll

12
00:00:26,130 --> 00:00:27,960
stop both containers. And

13
00:00:27,960 --> 00:00:29,160
afterwards we'll create a

14
00:00:29,190 --> 00:00:31,320
'docker-compose' file and run them

15
00:00:31,350 --> 00:00:33,840
using 'docker-compose' feature. So

16
00:00:33,840 --> 00:00:36,090
let's stop first container 'docker

17
00:00:36,120 --> 00:00:38,070
stop', and here will be the name of

18
00:00:38,070 --> 00:00:40,920
the container, this one, like that.

19
00:00:40,950 --> 00:00:44,490
Stopping. And let's also stop

20
00:00:44,550 --> 00:00:47,550
second container with such name. In

21
00:00:47,550 --> 00:00:49,440
your case names will be completely

22
00:00:49,440 --> 00:00:51,480
different from mine. Second

23
00:00:51,480 --> 00:00:52,980
container was stopped and now there

24
00:00:52,980 --> 00:00:55,050
are no containers running. And now

25
00:00:55,050 --> 00:00:56,970
let's go to our project. And here

26
00:00:57,000 --> 00:00:58,890
in the root of the 'images-gallery'

27
00:00:58,890 --> 00:01:00,690
folder, ensure that you'll do that

28
00:01:00,750 --> 00:01:02,340
in the root of the 'images-gallery'

29
00:01:02,340 --> 00:01:04,950
folder, please create a new file

30
00:01:05,010 --> 00:01:11,040
called 'docker- compose.yml'. 'yml'

31
00:01:11,070 --> 00:01:12,720
stands for YAML, and that's

32
00:01:12,720 --> 00:01:14,430
extension for 'docker-compose'

33
00:01:14,430 --> 00:01:16,410
file. Notice that VS Code

34
00:01:16,440 --> 00:01:18,630
recognized the type of this file,

35
00:01:18,630 --> 00:01:20,730
this Dockerfile. And again ensure

36
00:01:20,730 --> 00:01:23,130
that name of this file is exactly

37
00:01:23,130 --> 00:01:27,000
like that, 'docker-compose.yml'.

38
00:01:27,630 --> 00:01:29,670
This file is located in the root of

39
00:01:29,670 --> 00:01:31,620
our project because here we will

40
00:01:31,620 --> 00:01:33,780
specify all necessary instructions

41
00:01:33,840 --> 00:01:36,630
to start both api and frontend

42
00:01:36,660 --> 00:01:39,450
services. Let's add instructions

43
00:01:39,450 --> 00:01:41,490
here. There are different versions

44
00:01:41,520 --> 00:01:42,870
of 'docker-compose', and using

45
00:01:42,900 --> 00:01:44,850
'version' keyword we need to set

46
00:01:44,850 --> 00:01:46,290
specific version that you want to

47
00:01:46,290 --> 00:01:48,450
use. And we will use third version

48
00:01:48,480 --> 00:01:50,190
of the 'docker-compose'. On the

49
00:01:50,190 --> 00:01:52,020
next line let's add the services

50
00:01:52,020 --> 00:01:53,280
that we want to run using

51
00:01:53,310 --> 00:01:54,870
'docker-compose'. And at the

52
00:01:54,870 --> 00:01:56,640
moment, we want to run two services

53
00:01:56,670 --> 00:01:59,580
api and frontend. Please add here

54
00:01:59,610 --> 00:02:01,890
'services' keyword. Notice that VS

55
00:02:01,890 --> 00:02:04,440
Code suggests you specific keys for

56
00:02:04,470 --> 00:02:06,150
'docker-compose' file that because

57
00:02:06,150 --> 00:02:08,820
we installed Docker extension, so

58
00:02:08,820 --> 00:02:11,520
'services', here add colon, and

59
00:02:11,520 --> 00:02:12,840
after colon, please move to the

60
00:02:12,840 --> 00:02:14,760
next line and press tab here.

61
00:02:14,790 --> 00:02:17,130
Ensure that tab is pressed. Here we

62
00:02:17,130 --> 00:02:19,080
will add first service, and that is

63
00:02:19,080 --> 00:02:21,840
frontend. 'frontend'. Of course

64
00:02:21,840 --> 00:02:23,370
here you don't see any suggestions

65
00:02:23,370 --> 00:02:24,960
to autocomplete name because this

66
00:02:24,960 --> 00:02:26,880
actual name for the service, you

67
00:02:26,880 --> 00:02:28,980
choose it. Here will be colon.

68
00:02:29,130 --> 00:02:30,840
Let's go to the next line and press

69
00:02:30,840 --> 00:02:33,120
tab once again. And here we need to

70
00:02:33,120 --> 00:02:34,140
add instructions for

71
00:02:34,170 --> 00:02:36,540
'docker-compose', how to start our

72
00:02:36,540 --> 00:02:39,030
frontend application and first

73
00:02:39,030 --> 00:02:41,670
instruction is 'build'. Using this

74
00:02:41,670 --> 00:02:44,010
instruction, we need to tell Docker

75
00:02:44,040 --> 00:02:47,400
where to find necessary Dockerfile

76
00:02:47,490 --> 00:02:49,410
for corresponding custom image,

77
00:02:49,650 --> 00:02:51,240
because 'docker-compose' needs to

78
00:02:51,240 --> 00:02:53,730
know how to build custom images for

79
00:02:53,730 --> 00:02:56,940
frontend and api service. Well,

80
00:02:56,940 --> 00:02:58,710
here for the 'build' key needs to be

81
00:02:58,710 --> 00:03:01,350
path to the folder where Docker

82
00:03:01,350 --> 00:03:03,660
file is located. And here we

83
00:03:03,660 --> 00:03:06,240
describe frontend service. This way

84
00:03:06,240 --> 00:03:09,840
path here will be './frontend',

85
00:03:09,930 --> 00:03:12,720
like that. It is our frontend

86
00:03:12,720 --> 00:03:15,030
folder here, because inside of this

87
00:03:15,030 --> 00:03:16,860
folder, there was corresponding

88
00:03:17,460 --> 00:03:19,890
Dockerfile that we created before.

89
00:03:20,850 --> 00:03:22,920
All right, build instruction was

90
00:03:22,950 --> 00:03:25,500
added. Next, let's add port mapping

91
00:03:25,530 --> 00:03:28,320
using 'ports' instruction. Type 'ports',

92
00:03:28,320 --> 00:03:30,510
colon, go to the next line, here

93
00:03:30,510 --> 00:03:33,240
press Tab, minus, and here I'll

94
00:03:33,240 --> 00:03:37,800
type 3000:3000. Instructions here

95
00:03:37,800 --> 00:03:39,660
will be similar to those that we

96
00:03:39,660 --> 00:03:42,420
used in '-p' publish option when we

97
00:03:42,420 --> 00:03:44,220
run our frontend service

98
00:03:44,250 --> 00:03:46,920
separately. Internal container port

99
00:03:46,950 --> 00:03:50,070
3000 will be mapped to port 3000 on

100
00:03:50,100 --> 00:03:52,920
your local machine. So that's port

101
00:03:52,920 --> 00:03:55,620
instruction. That's it for frontend

102
00:03:55,620 --> 00:03:57,810
service for now. And now let's add

103
00:03:57,840 --> 00:03:59,790
one more service, ensure that you

104
00:03:59,790 --> 00:04:01,410
move to the same level where

105
00:04:01,410 --> 00:04:03,990
frontend key is located, and here

106
00:04:03,990 --> 00:04:06,960
type 'api'. 'api' service needs to

107
00:04:06,960 --> 00:04:08,760
be built using a Dockerfile

108
00:04:08,760 --> 00:04:10,920
located in the 'api' folder. That's

109
00:04:10,920 --> 00:04:14,040
why 'build' keyword will have value

110
00:04:14,070 --> 00:04:18,060
'./api', that is 'api' folder here,

111
00:04:18,240 --> 00:04:20,156
and there was corresponding Dockerfile

112
00:04:20,156 --> 00:04:23,160
inside. Also, let's add here

113
00:04:23,160 --> 00:04:26,339
ports mapping; 'ports:', on the next

114
00:04:26,339 --> 00:04:29,460
line, tab, '-', and here let's

115
00:04:29,460 --> 00:04:32,130
expose port 5050, to the same port

116
00:04:32,160 --> 00:04:33,960
on your local computer, like that.

117
00:04:34,680 --> 00:04:36,300
This is actually it for the first

118
00:04:36,300 --> 00:04:37,680
version of the 'docker-compose'

119
00:04:37,680 --> 00:04:39,780
file. Let's save changes in this

120
00:04:39,780 --> 00:04:42,150
file and next after a small pause

121
00:04:42,210 --> 00:04:44,700
let's try to run both containers -

122
00:04:44,790 --> 00:04:47,040
frontend and api using

123
00:04:47,100 --> 00:04:50,100
'docker-compose' command. I'll see you guys next.

124
00:04:50,100 --> 00:04:52,300
[no audio]