1 00:00:02,080 --> 00:00:05,060 So let's get started by dockerizing this app. 2 00:00:05,060 --> 00:00:09,340 And as so often, of course, feel free to pause the video 3 00:00:09,340 --> 00:00:13,060 at this point and try dockerizing this on your own. 4 00:00:13,060 --> 00:00:15,860 It's basically the same, what we already did 5 00:00:15,860 --> 00:00:18,210 in the last lectures and modules. 6 00:00:18,210 --> 00:00:21,870 After a short pause which would give you to pause the video, 7 00:00:21,870 --> 00:00:23,653 we're going to do that together. 8 00:00:26,360 --> 00:00:29,540 So, let's now dockerize this app together. 9 00:00:29,540 --> 00:00:34,180 And for this, I'm again going to create a Dockerfile here. 10 00:00:34,180 --> 00:00:38,010 Now in this Dockerfile, I wanna dockerize this app. 11 00:00:38,010 --> 00:00:41,360 It's a Node app and they are for my base image, 12 00:00:41,360 --> 00:00:45,400 pulled in with the from instruction, will be node. 13 00:00:45,400 --> 00:00:47,960 And I'll go for a version 14 here, 14 00:00:47,960 --> 00:00:52,303 but you could also go for 12, but I'll take 14. 15 00:00:53,240 --> 00:00:55,910 Next, I will set my working directory 16 00:00:55,910 --> 00:00:57,990 and I will again, set it to app, 17 00:00:57,990 --> 00:01:01,113 but as I mentioned before, of course, this is up to you. 18 00:01:02,130 --> 00:01:06,000 Now that this is set, we can copy the package.json file, 19 00:01:06,000 --> 00:01:08,930 which contains the dependencies of this application, 20 00:01:08,930 --> 00:01:13,613 into our working directory, with copy packaged.json. 21 00:01:15,110 --> 00:01:17,530 or again, repeating the working directory, 22 00:01:17,530 --> 00:01:19,080 but since it's already set, 23 00:01:19,080 --> 00:01:21,183 we can always just use a dot here. 24 00:01:22,120 --> 00:01:25,970 With that done, we can run the npm install command, 25 00:01:25,970 --> 00:01:27,890 to install all dependencies 26 00:01:27,890 --> 00:01:31,430 that are mentioned in package.json. 27 00:01:31,430 --> 00:01:36,000 And once this is set up, we can copy over the remaining code 28 00:01:36,000 --> 00:01:39,700 with dot pointing at the entire folder here 29 00:01:39,700 --> 00:01:41,510 in which the Dockerfile lives 30 00:01:41,510 --> 00:01:43,976 and the second dot which refers to the working directory. 31 00:01:43,976 --> 00:01:44,809 We also should expose a port 32 00:01:44,809 --> 00:01:49,809 and this application listens on port 80. 33 00:01:53,640 --> 00:01:56,473 So that's the port I'll expose here. 34 00:01:58,300 --> 00:01:59,670 And now last but not least, 35 00:01:59,670 --> 00:02:02,660 we can specify the command which we want to execute, 36 00:02:02,660 --> 00:02:05,400 when a container is started based on this image. 37 00:02:05,400 --> 00:02:08,199 And here, I wanna use the Node executable 38 00:02:08,199 --> 00:02:10,143 to execute server.js. 39 00:02:11,420 --> 00:02:13,680 So that's my Dockerfile here. 40 00:02:13,680 --> 00:02:17,780 Nothing too fancy, basically just again, what we did before 41 00:02:17,780 --> 00:02:20,410 and therefore now, we can open up a terminal, 42 00:02:20,410 --> 00:02:24,640 and run Docker build, to build this as an image. 43 00:02:24,640 --> 00:02:27,880 And I'll give this image attack with the -t flag, 44 00:02:27,880 --> 00:02:31,183 and I will name it feedback-node. 45 00:02:32,470 --> 00:02:34,770 Since it's a feedback application 46 00:02:34,770 --> 00:02:39,350 taking in some user feedback and based on Node.js. 47 00:02:39,350 --> 00:02:42,390 We could also add a tag with a colon thereafter, 48 00:02:42,390 --> 00:02:45,480 but I'll go for the default tag of latest, 49 00:02:45,480 --> 00:02:47,210 which is assigned automatically 50 00:02:47,210 --> 00:02:49,143 if you don't assign your own tag. 51 00:02:50,100 --> 00:02:53,420 So with that, we created this image with all the steps, 52 00:02:53,420 --> 00:02:57,100 and now we can start a container based on that image. 53 00:02:57,100 --> 00:03:01,470 For that, we can use docker run on our feedback-node image, 54 00:03:01,470 --> 00:03:03,180 which we just created. 55 00:03:03,180 --> 00:03:05,730 Again, you can point at a specific tag, 56 00:03:05,730 --> 00:03:09,650 but since we only got one tag here the latest tag, 57 00:03:09,650 --> 00:03:11,663 we can also just go with the name. 58 00:03:12,500 --> 00:03:16,100 But of course, I also wanna publish the port. 59 00:03:16,100 --> 00:03:19,377 Let's say, I wanna publish the internal port 80, 60 00:03:19,377 --> 00:03:23,250 on port 3000 on my machine here. 61 00:03:23,250 --> 00:03:25,190 A launched is in detached mode, 62 00:03:25,190 --> 00:03:27,385 so that we can use the terminal right 63 00:03:27,385 --> 00:03:29,483 after launching this container. 64 00:03:30,550 --> 00:03:34,970 And I'll give the container a name of Feedback App. 65 00:03:34,970 --> 00:03:38,930 We can also add --rm to ensure that this container 66 00:03:38,930 --> 00:03:42,003 is automatically removed whenever we stop it. 67 00:03:43,130 --> 00:03:46,180 If we now enter this starts this container, 68 00:03:46,180 --> 00:03:48,233 with docker ps we can see it. 69 00:03:49,650 --> 00:03:52,630 And if you now visit local host 3000, 70 00:03:52,630 --> 00:03:55,680 you will see your application there. 71 00:03:55,680 --> 00:03:57,820 And if I add a little feedback here 72 00:03:57,820 --> 00:04:01,360 with the title of awesome, this is awesome, 73 00:04:01,360 --> 00:04:03,500 I can click save, and this should work. 74 00:04:03,500 --> 00:04:07,460 As a side note, this is a very simple application 75 00:04:07,460 --> 00:04:11,390 and the title which you enter here, is used as a filename. 76 00:04:11,390 --> 00:04:14,190 The only transformation I do to this title 77 00:04:14,190 --> 00:04:17,760 is that I transform it to be all lowercase. 78 00:04:17,760 --> 00:04:20,790 So if you enter a lot of special characters here, 79 00:04:20,790 --> 00:04:23,020 saving might not work. 80 00:04:23,020 --> 00:04:26,030 So therefore, keep this title simple for this demo, 81 00:04:26,030 --> 00:04:29,260 it's best If you use one word titles, 82 00:04:29,260 --> 00:04:31,320 without any special characters. 83 00:04:31,320 --> 00:04:34,610 I kept this example simple since it's about Docker 84 00:04:34,610 --> 00:04:36,403 and not Node.js. 85 00:04:37,410 --> 00:04:41,550 Now, with that saved and I chose awesome as a name, 86 00:04:41,550 --> 00:04:44,073 in this app, we can actually also visit, 87 00:04:44,073 --> 00:04:49,073 /feedback/awesome.txt to view this stored file. 88 00:04:52,100 --> 00:04:54,470 This is not a bug but this is actually, 89 00:04:54,470 --> 00:04:57,060 something I am enabling my code here. 90 00:04:57,060 --> 00:04:59,270 You can access the feedback folder. 91 00:04:59,270 --> 00:05:02,090 As a user of this web app you are allowed 92 00:05:02,090 --> 00:05:05,910 to look into files stored in that folder. 93 00:05:05,910 --> 00:05:07,360 Now, as a side note, 94 00:05:07,360 --> 00:05:11,710 if you look into the feedback folder on your local machine, 95 00:05:11,710 --> 00:05:14,910 you will not see this file there. 96 00:05:14,910 --> 00:05:17,820 It only exists inside of the Docker container 97 00:05:17,820 --> 00:05:21,230 which is why we can view it there, but not here. 98 00:05:21,230 --> 00:05:25,040 And the reason for that is that, in the Dockerfile, 99 00:05:25,040 --> 00:05:29,050 we copy our local folder into the image 100 00:05:29,050 --> 00:05:31,910 and the container is then based on that image. 101 00:05:31,910 --> 00:05:33,630 But that means that the image 102 00:05:33,630 --> 00:05:36,070 and therefore also the container 103 00:05:36,070 --> 00:05:38,130 has its own file system, 104 00:05:38,130 --> 00:05:40,390 based on our local folder here, 105 00:05:40,390 --> 00:05:43,090 because we copy it in, but they're after 106 00:05:43,090 --> 00:05:45,960 there is no connection between our local folder 107 00:05:45,960 --> 00:05:50,200 and this image internal file system. 108 00:05:50,200 --> 00:05:52,470 And that's how it's intended to work. 109 00:05:52,470 --> 00:05:55,300 The containers should be isolated after all. 110 00:05:55,300 --> 00:05:56,680 It would be pretty bad, 111 00:05:56,680 --> 00:06:00,370 if files would be created inside of the container 112 00:06:00,370 --> 00:06:04,060 and suddenly would end up somewhere on our hard drive, 113 00:06:04,060 --> 00:06:05,560 on our host machine. 114 00:06:05,560 --> 00:06:08,393 That's not the idea behind Docker at all. 115 00:06:09,310 --> 00:06:12,730 And that's by the way, the same thing as earlier 116 00:06:12,730 --> 00:06:15,220 in this course when we changed something 117 00:06:15,220 --> 00:06:18,840 in our source code locally on our host machine 118 00:06:18,840 --> 00:06:20,830 and the change wasn't reflected 119 00:06:20,830 --> 00:06:23,000 in the running Docker container. 120 00:06:23,000 --> 00:06:26,530 You might remember that we had to rebuild the image, 121 00:06:26,530 --> 00:06:30,840 to copy in the changed code, create a new image based on it, 122 00:06:30,840 --> 00:06:34,500 and then containers running based on that changed image 123 00:06:34,500 --> 00:06:36,990 would have our code changes. 124 00:06:36,990 --> 00:06:40,650 For the same reason, we copy code into an image, 125 00:06:40,650 --> 00:06:44,470 it then is in a special file system inside of the image, 126 00:06:44,470 --> 00:06:48,570 it's locked in, there is no connection to the host folder 127 00:06:48,570 --> 00:06:51,420 or to the host machine and the container, 128 00:06:51,420 --> 00:06:55,430 therefore also has this isolated file system 129 00:06:55,430 --> 00:06:59,390 where only this snapshot was copied in 130 00:06:59,390 --> 00:07:01,410 when we built the image; 131 00:07:01,410 --> 00:07:05,610 this snapshot of our local folder in this case. 132 00:07:05,610 --> 00:07:07,900 That's all something we covered already 133 00:07:07,900 --> 00:07:10,890 but it is important to always keep this in mind, 134 00:07:10,890 --> 00:07:13,900 there is no connection between your container 135 00:07:13,900 --> 00:07:17,110 or your image and your local file system. 136 00:07:17,110 --> 00:07:19,770 You just initialized his image once, 137 00:07:19,770 --> 00:07:24,210 you can copy in a snapshot of your local folders and files, 138 00:07:24,210 --> 00:07:25,920 but there after, that's it. 139 00:07:25,920 --> 00:07:27,240 There is no connection, 140 00:07:27,240 --> 00:07:30,160 and that's why we don't see the text file 141 00:07:30,160 --> 00:07:33,210 in the feedback folder here on our hosting machine, 142 00:07:33,210 --> 00:07:34,260 in this folder. 143 00:07:34,260 --> 00:07:36,470 We only have it available inside 144 00:07:36,470 --> 00:07:39,053 of the running Docker container. 145 00:07:41,340 --> 00:07:44,683 There we can access it, there it exists. 146 00:07:45,790 --> 00:07:47,980 So, that's how this application works. 147 00:07:47,980 --> 00:07:49,210 Let me go back here, 148 00:07:49,210 --> 00:07:52,720 and if I now would submit the same feedback again, 149 00:07:52,720 --> 00:07:55,040 so with the same title I mean, 150 00:07:55,040 --> 00:07:58,920 I would actually see this, 'Exists already page', 151 00:07:58,920 --> 00:08:03,920 and the file would not be stored in the feedback folder. 152 00:08:04,120 --> 00:08:08,200 If I visit awesome.txt we still see the old text in there, 153 00:08:08,200 --> 00:08:10,690 so it was not overwritten. 154 00:08:10,690 --> 00:08:13,940 And it is not overwritten because in the Node code, 155 00:08:13,940 --> 00:08:18,880 I have the logic for creating a temporary file first 156 00:08:18,880 --> 00:08:22,010 and only copying it into the final folder, 157 00:08:22,010 --> 00:08:23,750 into the feedback folder, 158 00:08:23,750 --> 00:08:26,460 if the file doesn't exist there yet. 159 00:08:26,460 --> 00:08:29,640 that's the logic I have here in my Node app. 160 00:08:29,640 --> 00:08:33,073 So that's why we're not overwriting existing files.