1 00:00:04,430 --> 00:00:12,770 We just created such basic docker compose yaml file with description of two services front end and API. 2 00:00:12,890 --> 00:00:19,430 And now let's using Docker compose command, try to run both containers front end and API. 3 00:00:19,790 --> 00:00:25,190 Let's go to the terminal here and first we need to CD to the images gallery folder. 4 00:00:25,220 --> 00:00:31,460 I'll go to the desktop Images gallery, ensure that you also go to the images gallery folder and here 5 00:00:31,490 --> 00:00:39,250 inside you should find docker-compose.yaml file and both folders API and front end here. 6 00:00:39,260 --> 00:00:43,670 Please type following command Docker compose up. 7 00:00:43,700 --> 00:00:46,070 Let's go ahead and see what will happen. 8 00:00:46,460 --> 00:00:52,220 Also notice that you are able to run Docker, compose using Docker, compose up command. 9 00:00:52,870 --> 00:00:58,440 First Docker has created such network as images, gallery default and notice name. 10 00:00:58,440 --> 00:01:04,920 Here it matches with name of the folder where we run Docker, compose command and where Docker compose 11 00:01:04,920 --> 00:01:06,840 Yaml file is located. 12 00:01:07,260 --> 00:01:11,820 Afterwards Docker compose started build process for the front end service. 13 00:01:11,820 --> 00:01:19,080 Here it is and it started from the first step where it is needed to pull Docker image called Node with 14 00:01:19,080 --> 00:01:23,400 corresponding tag 15.14 Alpine from the Docker Hub. 15 00:01:23,700 --> 00:01:26,730 Docker will go through the next steps much faster this way. 16 00:01:26,730 --> 00:01:30,420 Let me get back to you when Docker Compose will complete its work. 17 00:01:30,480 --> 00:01:35,940 Finally, I see such logs and now let me scroll to the very beginning of this output and explain to 18 00:01:35,940 --> 00:01:37,530 you what happened next. 19 00:01:37,530 --> 00:01:44,520 After Docker Compose started building front end application so it reused few cached layers. 20 00:01:44,520 --> 00:01:51,150 For instance this layer or this layer or this layer, but on this layer, notice that it performed copy 21 00:01:51,150 --> 00:01:53,680 operation once again from scratch. 22 00:01:53,800 --> 00:01:59,950 And the reason for that is that at the moment of the previous build, when we used Docker build command, 23 00:01:59,980 --> 00:02:07,690 we removed node modules folder before and afterwards we entered NPM install command and node modules 24 00:02:07,690 --> 00:02:12,610 folder was added in the front end folder in our Images gallery project. 25 00:02:12,610 --> 00:02:20,170 That's why it wasn't possible to reuse cached layer and Docker has initiated copy operation again and 26 00:02:20,170 --> 00:02:23,260 created brand new layer here on this tab. 27 00:02:23,530 --> 00:02:32,320 Afterwards it exported resulting layers to the image and here is Sha hash of resulting front end image 28 00:02:32,980 --> 00:02:38,050 and name of it is images dash gallery underscore front end. 29 00:02:38,410 --> 00:02:46,510 This name was chosen by Docker compose automatically images dash gallery is name of the folder where 30 00:02:46,540 --> 00:02:49,540 docker compose yaml file is located. 31 00:02:49,900 --> 00:02:57,900 It is name of our project folder images gallery and after underscore it added name of the service that 32 00:02:57,900 --> 00:03:02,040 is being built and name of the service is front end. 33 00:03:02,070 --> 00:03:05,280 That's what we defined here in the docker. 34 00:03:05,280 --> 00:03:06,780 Compose Yaml file. 35 00:03:06,780 --> 00:03:09,360 Here is this service name front end. 36 00:03:09,960 --> 00:03:17,640 All right, front end image was built and afterwards you see some additional outputs from Docker compose 37 00:03:17,640 --> 00:03:24,330 like successfully build image with such ID and also you see warning image for service. 38 00:03:24,330 --> 00:03:28,350 Front end was built because it did not already exist. 39 00:03:28,500 --> 00:03:34,650 To rebuild this image you must use command, Docker, compose, build or Docker. 40 00:03:34,650 --> 00:03:42,360 Compose up dash, dash, build and you need to perform rebuild of Docker compose services. 41 00:03:42,360 --> 00:03:48,540 If for instance, you install additional packages in the front end application and package, the Json 42 00:03:48,540 --> 00:03:51,750 file and package dislodged Json files change. 43 00:03:51,990 --> 00:04:00,310 Next you see starting building API log and from this moment Docker Compose actually started building 44 00:04:00,310 --> 00:04:01,600 API service. 45 00:04:01,900 --> 00:04:07,060 It also went through all steps defined in the Docker file for the API service. 46 00:04:07,060 --> 00:04:14,680 And notice that here it reused all cached layers starting from the step number two till the step number 47 00:04:14,680 --> 00:04:19,209 seven because we did not modify anything in the folder. 48 00:04:19,209 --> 00:04:24,040 That's why it was able to reuse even this layer for copy step. 49 00:04:24,040 --> 00:04:27,700 No files were modified in the folder. 50 00:04:28,120 --> 00:04:35,950 After that it exported layers to resulting image and here is resulting Sha hash of the API image. 51 00:04:35,950 --> 00:04:39,760 And here is name of the resulting image images. 52 00:04:39,760 --> 00:04:46,870 Dash gallery underscore API and approach for the naming of this image is the same as for front end API. 53 00:04:46,900 --> 00:04:51,670 Here is service name defined here in the Docker compose file. 54 00:04:51,670 --> 00:04:58,960 Here it is and images gallery is name of the folder where we run Docker compose up command. 55 00:04:59,410 --> 00:05:00,040 Great. 56 00:05:00,040 --> 00:05:05,500 Also you see warning that the image for the API service was built because there was no previously built 57 00:05:05,500 --> 00:05:07,090 image and you could. 58 00:05:07,090 --> 00:05:14,680 Same as for front end rebuild API service using Docker, compose, build or Docker compose up dash dash, 59 00:05:14,680 --> 00:05:15,700 build command. 60 00:05:15,850 --> 00:05:22,930 But notice that in such case, Docker compose will rebuild all services defined in the Docker compose 61 00:05:22,930 --> 00:05:23,650 file. 62 00:05:24,130 --> 00:05:31,660 All right, next to it you see such two logs creating images gallery front end one and creating images 63 00:05:31,660 --> 00:05:33,190 gallery API one. 64 00:05:33,310 --> 00:05:41,470 And on those steps, Docker compose creates actually new containers based on the previously built images. 65 00:05:42,020 --> 00:05:46,190 And it automatically gives such names to those containers. 66 00:05:46,220 --> 00:05:51,470 Images Dash gallery front end one and images gallery one. 67 00:05:51,860 --> 00:05:59,960 Afterwards it attached to standard output of images gallery front end one and images gallery one containers 68 00:05:59,960 --> 00:06:04,510 in order to produce here logs that are generated by those containers. 69 00:06:04,520 --> 00:06:09,890 And for instance here you see logs that are coming from the API container. 70 00:06:10,010 --> 00:06:13,340 All those logs are from the container. 71 00:06:14,110 --> 00:06:19,480 And you see that flask Web server is now actually running at port 5050. 72 00:06:19,600 --> 00:06:25,000 And also next to those logs, you see logs that come from the front end container. 73 00:06:25,120 --> 00:06:30,280 And we see finally the development server has started compiled successfully. 74 00:06:30,280 --> 00:06:34,660 It means that React scripts successfully created development build. 75 00:06:34,780 --> 00:06:40,000 And now I see that same as before React application is running at port 3000. 76 00:06:40,480 --> 00:06:41,050 Great. 77 00:06:41,080 --> 00:06:45,460 Now let's try to verify whether our application is accessible or not. 78 00:06:45,490 --> 00:06:48,700 Let's go to web browser and refresh page here. 79 00:06:49,850 --> 00:06:52,500 And see that application is available. 80 00:06:52,520 --> 00:06:54,080 Let's search here for something. 81 00:06:54,080 --> 00:06:55,190 For instance, phone. 82 00:06:56,150 --> 00:06:57,800 And get results. 83 00:06:57,830 --> 00:07:02,870 It means that both front end and API service work as expected. 84 00:07:02,900 --> 00:07:06,020 They are running using Docker compose. 85 00:07:06,110 --> 00:07:11,030 And here basically I see log additional log that comes from the container. 86 00:07:11,060 --> 00:07:14,990 It tells us that there was get request to this API endpoint. 87 00:07:15,320 --> 00:07:15,900 Great. 88 00:07:15,920 --> 00:07:19,640 Let's now go to another tab and here enter Docker. 89 00:07:19,640 --> 00:07:24,870 PS in order to see a list of the running containers and EC2 containers. 90 00:07:24,890 --> 00:07:32,240 And here are names of those containers Images Gallery API one and images gallery front end one. 91 00:07:32,420 --> 00:07:35,560 And those container names are no longer random. 92 00:07:35,570 --> 00:07:42,970 They were assigned by Docker Compose based on the folder name images, gallery and service name API 93 00:07:42,980 --> 00:07:44,300 and front end. 94 00:07:44,810 --> 00:07:49,820 And now, of course, if you want, you could stop those containers or run over again. 95 00:07:49,940 --> 00:07:55,040 But the best way to stop all containers simultaneously is to use Docker. 96 00:07:55,040 --> 00:07:56,880 Compose down command. 97 00:07:56,910 --> 00:08:02,730 Also, it's possible to run Docker containers using Docker, compose in background and let's try all 98 00:08:02,730 --> 00:08:04,290 of that after the small pause.