WEBVTT 00:00.410 --> 00:00.980 All right. 00:00.980 --> 00:07.250 This one is going to be fun because we're going to be connecting one application to another. 00:07.250 --> 00:13.070 We have a node API and we have a great submission portal. 00:13.070 --> 00:17.960 And the great submission portal is going to be submitting grades to the node API. 00:17.960 --> 00:23.840 And the node API is going to be storing them for the portal to be able to access them later. 00:24.230 --> 00:28.400 Anyways, um, so here's the setup that we're going to have. 00:28.400 --> 00:37.370 We're going to have a node server that's running and a flask app running as well, each, uh, each 00:37.370 --> 00:39.920 one running in their own respective container. 00:40.100 --> 00:46.130 The container that's running the flask app, it's going to provide the application with an environment 00:46.130 --> 00:46.910 variable. 00:46.940 --> 00:54.440 That environment variable is going to somehow help the application connect to the application inside 00:54.440 --> 00:57.530 of this node server container. 00:58.160 --> 00:58.970 Okay. 00:59.000 --> 01:05.860 So the first thing we're going to do is build an image for the node app, build an image for the flask 01:05.890 --> 01:08.230 app before we can talk about anything else. 01:08.230 --> 01:10.540 So let's just go ahead and do that. 01:10.690 --> 01:14.920 We're going to start by building an image for the node application. 01:15.310 --> 01:18.220 Now let's assume that we know nothing about node. 01:18.250 --> 01:23.320 We're relying on the developer who built this application to tell us how they would normally run the 01:23.320 --> 01:24.730 app bare metal. 01:24.730 --> 01:32.380 So first they're telling us, um, that you need to install the dependencies listed in so package dot 01:32.380 --> 01:36.190 JSON as well as Package-lock.json. 01:36.340 --> 01:41.290 Then they're telling us that once the dependencies are installed, start the API server with node app 01:41.290 --> 01:41.860 dot js. 01:41.860 --> 01:48.730 So very similar to what we would have done with a flask application instead of package dot JSON, it 01:48.730 --> 01:50.440 would have been requirements.txt. 01:50.470 --> 01:55.690 Then instead of node app dot js it would have been python app dot pi. 01:55.720 --> 02:01.980 So again you can probably see, uh things repeating themselves a lot. 02:02.130 --> 02:12.930 So the image that we're going to use in order to run node applications, let's just say node version 02:12.930 --> 02:14.760 14, that should be fine. 02:15.360 --> 02:21.510 Then we're going to set the working directory of uh we're going to set the working directory equal to 02:21.540 --> 02:22.320 slash app. 02:22.320 --> 02:27.510 So everything from here on out is going to happen inside of this working directory. 02:28.440 --> 02:35.220 So here we need to copy package-lock.json as well as package.json. 02:35.250 --> 02:43.470 Notice that the docker file is directly inside of the project itself which means it is in. 02:43.800 --> 02:47.700 It is in the same directory as both package dot JSON files. 02:47.700 --> 02:57.180 So we can just directly say copy package dot JSON into the working directory slash app and copy package 02:57.180 --> 03:03.130 lock dot JSON into the working directory slash app. 03:03.310 --> 03:03.850 You know what? 03:03.850 --> 03:05.410 This is kind of repetitive. 03:05.440 --> 03:11.860 What we can do is say copy package star dot JSON. 03:12.430 --> 03:16.450 So this should include the package dot JSON. 03:16.450 --> 03:23.500 And since star basically means whatever comes after uh, and just before the dot, it should also include 03:23.500 --> 03:25.570 the package dot JSON. 03:25.570 --> 03:32.830 So after we copy over the uh, both package dot JSON files, according to our developer, we can use 03:32.830 --> 03:37.270 this npm install command in order to install the dependencies. 03:37.270 --> 03:42.610 So let's go ahead and run this command during the image building process. 03:43.000 --> 03:48.280 So remember the dependencies are going to be installed inside of the image. 03:48.280 --> 03:53.530 That way once we're ready to create a container to run the app, all the dependencies are already going 03:53.560 --> 04:01.440 to be there and it can just run the app easily Now we're going to say copy the rest of the source code 04:01.440 --> 04:02.490 into. 04:02.520 --> 04:08.340 Copy the rest of the source code inside the current directory into the working directory. 04:08.340 --> 04:17.640 And before we do that, what I want to do is include a dot docker ignore file. 04:18.420 --> 04:27.060 Um, because we're installing the dependencies inside of the image, we don't need to include this node 04:27.060 --> 04:35.100 module so we can remove it, or we can tell Docker to ignore it when building the image. 04:35.100 --> 04:43.770 We definitely don't want to include the docker file, so we specify that in our Docker ignore we don't 04:43.770 --> 04:45.480 want to include the readme. 04:45.510 --> 04:47.220 More on that later. 04:49.200 --> 04:54.000 And that's pretty much it I think now. 04:54.030 --> 04:55.830 Well, we're not ready to do anything yet. 04:56.160 --> 04:59.270 Um our API is going to be running on some port. 04:59.300 --> 05:02.840 Which port seems to be port 3000? 05:02.870 --> 05:07.160 Because we're going to be running this inside of a container, it's going to be serving requests on 05:07.160 --> 05:11.810 port 3000 of the container, which means we'll have to map it to. 05:11.840 --> 05:15.710 Or actually we won't have to map it anywhere because it's only. 05:15.770 --> 05:16.700 Yeah, sure. 05:16.700 --> 05:18.710 We'll we'll map it to a host machine port. 05:18.710 --> 05:19.580 Why not. 05:19.580 --> 05:25.010 And then we provide the container with a command that it can use to execute the API. 05:25.040 --> 05:32.480 So as our dear developer told us, after the dependencies have been installed, we can simply run the 05:32.480 --> 05:35.990 API using app dot js. 05:35.990 --> 05:44.090 So node app dot js and I think we're good. 05:44.090 --> 05:47.660 Seems like I'm already seated into great submission portal. 05:47.840 --> 05:54.200 Let me CD out of it CD into great submission API. 05:54.890 --> 06:03.790 Oops Clear and then docker build t. 06:03.820 --> 06:10.120 Now, before we do anything, what I want you to do is make sure that you're logged in. 06:13.660 --> 06:17.440 Make sure make sure that you're logged in to your Docker Hub account. 06:17.440 --> 06:19.120 So here you can see I am logged in. 06:19.120 --> 06:22.240 It shows my username are slim 087. 06:22.240 --> 06:29.740 So name your image, start with your username and then go slash whatever you want to name it. 06:29.740 --> 06:34.510 In this case I'm going to call it Great Submission API. 06:38.890 --> 06:45.340 And we're going to build an image from the docker file inside the current directory create submission 06:45.370 --> 06:46.300 API. 06:48.880 --> 06:49.810 All right. 06:51.640 --> 06:54.610 And we are good. 06:54.640 --> 06:59.620 Now what I want to do is create a container docker run. 06:59.830 --> 07:10.810 I'm going to call the container node server and I'm going to specify dash dash rm so that the container 07:10.810 --> 07:12.940 is removed as soon as we're done with it. 07:12.970 --> 07:18.790 I'm going to specify a port, um, of 3001. 07:19.780 --> 07:26.920 So whatever requests are served on the container port, 3000 will be mapped to our local machine port 07:26.950 --> 07:28.570 3001. 07:29.710 --> 07:36.880 Um, then we're going to say create a container from the image that we just created, our slim 087 slash 07:36.910 --> 07:40.240 grade submission API. 07:41.170 --> 07:42.460 Am I missing anything? 07:43.030 --> 07:43.990 I think we're good. 07:45.910 --> 07:54.610 Great service is running on port 3000, in this case 3000 of our container, but 3001 of our local hosts 07:54.610 --> 07:56.690 of our local machines is port. 07:56.690 --> 08:04.850 And if I have a look here, we can see that, uh, the node server accepts post requests on slash grades. 08:04.850 --> 08:11.090 It's probably going to be the great submission portal that makes Post requests to this API. 08:11.120 --> 08:14.000 We're going to make a Get request from our browser. 08:14.000 --> 08:19.340 So we're going to say localhost 3001 slash grades. 08:23.690 --> 08:31.850 And we get back an empty array because no grades have been submitted to this node server. 08:32.420 --> 08:33.440 All right. 08:33.470 --> 08:39.350 Not a problem because we need to connect our grade submission portal to this API. 08:40.580 --> 08:46.100 Um we're going to keep this container running. 08:46.160 --> 08:51.770 Press plus and we're going to start on a new terminal. 08:52.250 --> 08:55.110 So now I'm going to CD into Lesson. 08:55.110 --> 08:58.920 Starter projects zero seven Starter Code. 08:58.950 --> 09:02.280 When a CD into great submission portal. 09:02.790 --> 09:06.900 And now let's go ahead and build up this Docker file. 09:06.930 --> 09:09.120 So this is a flask app. 09:09.150 --> 09:13.020 Uh, we've dealt with flask apps before. 09:13.050 --> 09:14.610 Here's what we got to do. 09:14.880 --> 09:19.920 Um, we'll start by creating a Docker file to actually run the grade submission portal. 09:19.920 --> 09:31.560 So from the base image let's say Python 3.8 slim the working directory of the container we'll just set 09:31.560 --> 09:38.280 to slash app install the dependencies inside of the requirements.txt file. 09:38.340 --> 09:43.920 So the docker file is in the same directory as requirements.txt. 09:43.920 --> 09:51.540 So we can just say copy uh requirements.txt inside of the working directory. 09:51.540 --> 10:02.090 And after doing so we can run pip install dash r requirements.txt, installing all the dependencies 10:02.090 --> 10:04.310 during the image building phase. 10:04.340 --> 10:10.370 After the dependencies that the app relies on have been installed inside of the image, we can copy 10:10.370 --> 10:19.160 the remaining source code, but we don't want to copy over the um, the readme file and the docker file. 10:19.190 --> 10:23.510 So how come I already have a docker ignore here? 10:23.840 --> 10:29.660 I must have pushed it by mistake to the to GitHub, and it seems like I've already done that. 10:29.660 --> 10:32.000 Excluded the docker file in the readme. 10:32.030 --> 10:33.410 Okay, cool. 10:33.440 --> 10:35.030 Make sure to do it as well. 10:35.780 --> 10:37.730 Uh, the container port. 10:38.570 --> 10:42.380 This app is going to be serving requests on port 5001. 10:42.380 --> 10:48.770 So it'll be, uh, serving requests on port 5001 of the container. 10:49.340 --> 10:50.210 Okay. 10:50.420 --> 10:51.560 Then we're going to exit. 10:51.710 --> 10:55.900 Then we're going to provide the container with commands that it can use to execute the application. 10:55.900 --> 11:02.410 So you'll remember we can either set a shell environment variable that the flask run command can use 11:02.410 --> 11:06.070 to figure out what the entry point of this flask app is. 11:06.100 --> 11:10.270 Or we can just say Python app dot pi. 11:10.300 --> 11:11.440 Keep it simple. 11:11.590 --> 11:17.470 And I'm saying so now we're going to say Docker build dash t. 11:17.530 --> 11:19.540 Once again start with your username. 11:19.540 --> 11:22.240 In this case mine is our slim 087. 11:22.240 --> 11:24.010 Please make sure to use your username. 11:24.010 --> 11:31.930 That way we can push these onto your Docker Hub repo, which is lots of fun. 11:34.240 --> 11:37.840 We'll build an image from the docker file at the current directory. 11:40.180 --> 11:48.250 And now we're going to create a container docker run uh to do do do dash dash name I'm going to call 11:48.250 --> 11:50.920 the container flask app. 11:51.460 --> 11:54.490 And I'm going to say Dash P. 11:55.630 --> 11:59.290 Um, the app is running on port 5001. 12:01.600 --> 12:04.540 Let's map the container port to a host machine. 12:04.540 --> 12:08.320 Port dash. 12:08.350 --> 12:08.920 You know what? 12:08.920 --> 12:12.820 I don't want to pass any environment variables in yet. 12:14.740 --> 12:20.140 Let's just create a container out of the image 087 Grade Submission Portal. 12:20.140 --> 12:30.280 And don't forget the dash dash r m command or flag which will remove the container once we're done with 12:30.280 --> 12:31.060 it. 12:33.910 --> 12:38.680 Okay, let's go to Local host 5001. 12:39.580 --> 12:48.790 So upon pressing submit, it should make a Post request to the Grade Submission API, which should receive 12:48.790 --> 12:55.160 that request and then send back a response which will allow it to go to the next page. 12:55.160 --> 13:02.720 So we're going to say Harry got a score of 92 on, let's say, potions press submit connection error. 13:02.720 --> 13:05.390 It wasn't able to connect to the API. 13:05.420 --> 13:13.910 So right after the port mapping I'm going to set an environment variable grade service host. 13:14.090 --> 13:21.920 So to give the application running inside the container with an environment variable, specify dash 13:21.950 --> 13:26.840 e followed by the variable that you want to give it the key value pair. 13:26.840 --> 13:36.230 So we're going to give it a grade service host of node server which means now this is going to read 13:36.260 --> 13:43.700 HTTP node server 3000 slash grades okay. 13:43.700 --> 13:50.240 So this should allow it to connect to the container that's running our node application. 13:50.270 --> 13:51.770 Is it going to work? 13:54.260 --> 13:55.490 Let's find out. 14:00.200 --> 14:02.480 Submit a grade for Harry. 14:02.510 --> 14:04.400 Score of 93. 14:04.400 --> 14:15.140 Subject potions didn't work, so it did actually try to do HTTP slash no node server port 3000, but 14:15.140 --> 14:17.000 it wasn't able to connect. 14:17.030 --> 14:18.620 Why not? 14:19.190 --> 14:20.600 Well, here's the thing. 14:21.020 --> 14:24.980 Right now, the containers are completely isolated from each other. 14:25.010 --> 14:32.810 What we need to do is create a network, run them inside the same network, and then from the flask 14:32.840 --> 14:37.670 app, then it's going to be able to connect to the application that's running inside of the node server 14:37.670 --> 14:38.690 container. 14:39.290 --> 14:39.890 Okay. 14:39.920 --> 14:55.010 So what I want to do is stop both containers control Z and I'm going to Create another terminal where 14:55.010 --> 14:56.270 we're going to create a network. 14:56.300 --> 14:58.460 Docker network. 14:58.580 --> 15:01.520 Create my network. 15:02.000 --> 15:06.410 And then we're going to run both containers on the exact same network. 15:06.620 --> 15:10.430 So let me make sure I have no stopped containers. 15:10.700 --> 15:16.010 Docker rm dash f I'm going to remove this container. 15:17.210 --> 15:18.260 All right. 15:19.130 --> 15:21.770 And going back to this command. 15:24.050 --> 15:33.440 Uh, right after we name our app our container flask app, I am going to make sure that this runs on 15:33.440 --> 15:34.550 the network. 15:35.060 --> 15:36.950 My network. 15:38.630 --> 15:43.220 So our great submission portal is running on the My Network. 15:43.220 --> 15:44.000 Network. 15:44.030 --> 15:48.920 Now we need to make sure that the Great Submission API is running on the same network. 15:48.920 --> 15:53.500 Because it's only then that they'll be able to actually talk to each other. 15:53.530 --> 15:54.340 Okay. 15:54.340 --> 15:57.040 So network. 15:58.270 --> 15:59.890 My network. 16:01.390 --> 16:02.590 Beautiful. 16:03.160 --> 16:04.630 Just test it out in the UI. 16:04.660 --> 16:06.370 So I'm going to say Ryan. 16:06.400 --> 16:10.780 Score of 85 subject potions. 16:10.780 --> 16:11.740 Submit. 16:11.740 --> 16:13.570 Everything works beautifully. 16:14.320 --> 16:15.700 Um, yeah. 16:15.700 --> 16:21.040 So you just got to ultimately make sure that they're both running on the exact same network. 16:21.070 --> 16:28.660 And then from this app, you simply http, you set the host equal to the other container that's running 16:28.660 --> 16:32.740 the API, because the application is running on container port 3000. 16:32.770 --> 16:35.950 We say node server port 3000. 16:35.950 --> 16:42.580 And then we'll be able to talk to the application serving requests on that port. 16:42.610 --> 16:45.280 Pretty simple stuff, don't you think? 16:46.000 --> 16:50.470 Uh, so this concludes, uh starter code seven.