WEBVTT 00:07.010 --> 00:07.460 All right. 00:07.460 --> 00:12.620 This video is going to be really crazy, because we're going to set up an entire e-commerce application 00:12.620 --> 00:16.220 that is composed of many different microservices. 00:16.370 --> 00:24.860 Uh, one of them is a flask microservice, spring boot, um, flask again, Node.js go, so on and so 00:24.860 --> 00:25.310 forth. 00:25.310 --> 00:31.430 All of these different microservices APIs written in different languages, different frameworks are 00:31.430 --> 00:36.470 all going to be managed and orchestrated by one e-commerce UI. 00:36.500 --> 00:40.130 So it follows that we're going to start by containerizing the e-commerce UI. 00:40.160 --> 00:41.450 First. 00:42.200 --> 00:50.660 Uh, if you go inside of Server.js, we have, uh, some instructions from the developer of this app, 00:50.690 --> 00:56.750 myself, in this case, about how this application would typically run in bare metal. 00:56.750 --> 01:02.410 And once we understand how the application runs, we can mimic that workflow using Docker. 01:02.530 --> 01:10.210 So copy everything here inside of the Docker file and comment it out. 01:10.840 --> 01:17.800 Okay, in order to run these JavaScript applications, the react app and the node server, we're going 01:17.800 --> 01:23.770 to, we're going to leverage an environment of node version 14. 01:23.800 --> 01:25.780 That's going to be the base image. 01:25.810 --> 01:33.670 Now we're going to set the working directory inside the container Workdir slash app okay. 01:33.730 --> 01:38.440 Now the working directory is going to be split in two. 01:39.250 --> 01:42.040 Uh, part of it is going to contain the client code. 01:42.040 --> 01:44.470 And the other part will contain the server code. 01:44.470 --> 01:46.390 We'll start with the server code. 01:47.350 --> 01:53.680 So here typically on bare metal you would go to the server directory and run npm install to install 01:53.680 --> 01:56.080 the server dependencies on Docker. 01:56.110 --> 01:58.920 What I'm going to do is copy Over. 01:59.820 --> 02:07.860 Um, so the Docker file is inside of the same directory as the server folder that contains all of the 02:07.860 --> 02:09.030 server files. 02:09.030 --> 02:17.790 So what I can do is copy the contents of the server folder into the working directory slash app slash 02:17.790 --> 02:19.890 server okay. 02:20.490 --> 02:28.020 And now I want to navigate to the working directory slash app server, which means everything from here 02:28.020 --> 02:30.900 on out is going to happen there. 02:31.080 --> 02:31.980 All right. 02:31.980 --> 02:37.260 Inside of the working directory slash app server we've copied over everything here. 02:37.260 --> 02:44.700 Which means we're going to have at this point at line number 14, direct visibility to package.json 02:44.700 --> 02:47.040 and package-lock.json. 02:47.040 --> 02:55.200 So if I say um run npm install here, it's going to be able to successfully install the dependencies 02:55.200 --> 03:03.070 inside the Dot JSON files inside of our slash API slash server working directory. 03:03.070 --> 03:09.070 So at this point we were able to install the server dependencies uh using Docker. 03:09.730 --> 03:15.370 Now we navigate to the client directory and run npm install for the react app dependencies. 03:15.370 --> 03:21.700 So we change back to the app directory Workdir slash app. 03:23.110 --> 03:32.710 And in order to run the application, the next step is to install the dependencies for the react app. 03:32.710 --> 03:45.790 So we're going to copy over all of the code, the contents of client into slash app slash client. 03:45.910 --> 03:52.750 And now if we change to the client directory Workdir slash app slash client, everything from here on 03:52.750 --> 04:01.290 out is going to happen inside of this directory we copied into slash app slash client everything inside 04:01.290 --> 04:02.130 of here. 04:02.130 --> 04:09.660 So at this point line number 26 we should have direct visibility to these package dot JSON. 04:09.660 --> 04:18.660 So if I run npm install at this line over here, it's going to install all of these client dependencies 04:18.660 --> 04:21.390 inside of these package dot JSON. 04:21.390 --> 04:25.230 And all of that is going to happen inside the client directory. 04:25.830 --> 04:26.730 All right. 04:26.730 --> 04:33.960 So now that we've installed the dependencies for the react application, we're ready to build the react 04:33.990 --> 04:34.560 app. 04:34.560 --> 04:38.040 We can do this by saying npm run build. 04:38.040 --> 04:45.900 So after installing the react dependencies we can run npm run build to build the react app. 04:45.900 --> 04:52.800 So all we care about is how the developer was able to run this application, this e-commerce UI locally, 04:52.800 --> 04:54.510 and we're just mimicking that. 04:54.510 --> 04:57.890 And we're just mimicking that workflow using Docker. 04:57.890 --> 05:06.350 So now we run npm run build that's going to build the client code that's inside of this working directory. 05:06.380 --> 05:14.750 After building the client code, uh, we navigate back to the server directory and run node app.js. 05:15.080 --> 05:19.100 Um, this should be node server.js. 05:19.130 --> 05:20.990 But whatever. 05:21.710 --> 05:24.860 Um change back to the app directory. 05:24.860 --> 05:27.920 So now we change back to slash app. 05:28.130 --> 05:33.290 We're actually going to change back to slash app server okay. 05:33.290 --> 05:36.050 Because we need to run Server.js. 05:36.080 --> 05:40.040 At this point we've installed the dependencies for the server. 05:40.040 --> 05:43.790 We've installed the dependencies for the client and built it. 05:43.790 --> 05:48.440 So now all we got to do is run the server and everything should work out smoothly. 05:48.440 --> 05:52.130 So we expose the port that the server is going to be running on. 05:52.130 --> 05:54.760 That's port 4000. 05:55.600 --> 05:59.380 And now we run the Node.js server when the container starts. 05:59.380 --> 06:03.580 So at this point we're inside the working directory slash app server. 06:03.610 --> 06:09.730 Now the last step is to provide the container with a command that it can use to execute the application. 06:09.730 --> 06:20.500 That's going to be node server dot js Server.js should be directly inside of the working directory slash 06:20.530 --> 06:21.340 app server. 06:21.340 --> 06:23.770 So this command should work out beautifully. 06:23.800 --> 06:29.470 It's pretty amazing how we were able to take the instructions of how this application would normally 06:29.470 --> 06:35.410 run in bare metal, and mimic that workflow using Docker. 06:35.440 --> 06:36.460 All right. 06:36.460 --> 06:38.560 Let's go ahead and build this image. 06:38.590 --> 06:44.560 Docker build t um do do do do. 06:44.560 --> 06:53.220 Oh make sure that your CD into e-commerce UI before you do this docker build t ecommerce UI followed 06:53.220 --> 06:55.650 by a dot to build a docker file. 06:55.680 --> 06:58.710 To build an image from the docker file at the current directory. 07:04.950 --> 07:09.150 All right, I do have a lot of dependencies in my react app. 07:09.780 --> 07:11.820 Um, so this should take quite a while. 07:12.450 --> 07:13.710 That's okay. 07:14.010 --> 07:15.000 We're patient people. 07:15.000 --> 07:16.140 It is what it is. 07:19.500 --> 07:20.220 All right. 07:20.220 --> 07:23.820 That took a really long time, but whatever. 07:23.850 --> 07:27.090 Now let's go ahead and create a container from this image. 07:27.270 --> 07:34.620 Uh, the container is going to map port 4000, where the Node.js server is going to run to a host machine 07:34.620 --> 07:36.240 port 4000. 07:36.270 --> 07:39.750 It is going to be called node. 07:39.780 --> 07:42.960 No, it's going to be called e-commerce UI. 07:47.370 --> 07:48.900 Um, I don't think I'm missing anything. 07:48.900 --> 07:51.070 Let's just create a container out of the image. 07:52.780 --> 07:55.690 We have the port image. 07:57.220 --> 07:58.120 Let's do it. 07:59.890 --> 08:01.840 I forgot the dash dash rm. 08:01.840 --> 08:04.300 But it's okay. 08:06.520 --> 08:12.010 I don't think it will get removed automatically anyway because there are some interlinking stuff. 08:13.030 --> 08:14.080 Um. 08:14.110 --> 08:15.190 All right. 08:15.220 --> 08:16.510 Beautiful. 08:17.140 --> 08:22.570 Now you can see here I'm already logged in because I was playing with the app earlier and it persists 08:22.570 --> 08:23.560 the state. 08:23.560 --> 08:27.880 But anyways, you should be logged out if you're not logged out. 08:27.910 --> 08:31.150 If I try to create an account, it should fail. 08:31.270 --> 08:37.330 I'm going to say something like Bill, Bob, address 123. 08:37.330 --> 08:38.860 Private road. 08:39.490 --> 08:40.630 Postal code. 08:40.630 --> 08:42.250 Some postal. 08:44.410 --> 08:45.160 Code. 08:45.190 --> 08:46.210 Some email. 08:46.240 --> 08:48.190 Bob at gmail.com. 08:48.190 --> 08:48.850 Password. 08:48.850 --> 08:50.340 Let's say love. 08:51.480 --> 09:00.540 Um, I'm just gonna screenshot this for later in case I forget it if I try to sign up. 09:00.570 --> 09:02.340 It's obviously not going to work, right. 09:02.370 --> 09:06.690 Because the only thing we have running is the e-commerce UI. 09:07.200 --> 09:15.660 Um, in order for us to be able to sign up or sign in, we need to also run the authentication microservice, 09:15.660 --> 09:20.850 the profile management microservice, and connect our e-commerce UI to it. 09:21.090 --> 09:21.960 All right. 09:22.380 --> 09:25.200 So we can start by creating a network. 09:25.530 --> 09:31.110 Uh, both containers need to be running on the same network for them to be able to talk to each other. 09:31.110 --> 09:33.720 So we're going to create a network called Docker. 09:35.730 --> 09:36.930 Network. 09:36.930 --> 09:39.360 Create my network. 09:40.500 --> 09:41.640 All right. 09:42.330 --> 09:45.840 I'm going to stop the e-commerce UI from running. 09:45.870 --> 09:50.180 And I'm going to Docker rm E-commerce ui f. 09:51.620 --> 09:52.400 Okay. 09:54.230 --> 10:02.390 Uh, now I'm going to CD into workbook starter projects, oh three starter projects, and I'll CD into 10:02.390 --> 10:03.890 profile management. 10:05.990 --> 10:11.780 We need to run our profile management inside of the same network as the e-commerce UI, in order for 10:11.780 --> 10:15.830 the e-commerce UI to be able to authenticate our dear friend Bob. 10:16.820 --> 10:17.720 All right. 10:17.720 --> 10:26.690 I didn't leave any instructions for this file because all it is is a Node.js application that can be 10:26.690 --> 10:29.510 run using node auth API. 10:29.690 --> 10:30.260 JS. 10:30.290 --> 10:34.580 This one doesn't have a react front end that it needs to render to the browser. 10:34.580 --> 10:35.360 So. 10:35.450 --> 10:37.460 Uh containerizing. 10:37.460 --> 10:38.960 This one is going to be really easy. 10:38.990 --> 10:43.640 All we got to do is install the dependencies inside of package.json and then run the app. 10:43.640 --> 10:47.980 Very similar to how we were containerizing the flask applications. 10:47.980 --> 10:50.770 So from node 14 that's going to be the base image. 10:50.770 --> 10:57.220 We can use the pre-configured environment node 14 to run our node app the working directory slash app. 10:57.250 --> 11:00.250 Notice how repetitive this becomes. 11:00.280 --> 11:02.200 Um repetition is good. 11:02.200 --> 11:04.480 It means you're getting the hang of things. 11:04.570 --> 11:08.020 Then we're going to copy both package.json. 11:08.020 --> 11:10.570 I can do this by saying package star. 11:10.570 --> 11:16.600 So star should include anything between package and the dot JSON. 11:18.250 --> 11:23.500 So that's going to copy over both files into the working directory. 11:23.530 --> 11:24.550 Okay. 11:25.270 --> 11:32.260 Um then I'm going to install the dependencies inside of the package dot JSON that I copied into the 11:32.260 --> 11:33.010 working directory. 11:33.010 --> 11:38.770 So run npm install that's going to install all the dependencies. 11:38.770 --> 11:41.260 Then I can copy the rest of the application source code. 11:41.260 --> 11:43.360 So copy the rest of the source code. 11:43.360 --> 11:49.350 I can just copy everything from the current directory into the containers is working directory. 11:49.380 --> 11:50.190 I have. 11:50.220 --> 11:53.580 I already have a docker ignore that ignores the docker file in the readme. 11:53.580 --> 12:01.260 So we can do that without having to worry about the wrong thing going in there. 12:01.890 --> 12:02.760 Explore. 12:02.790 --> 12:05.850 Expose the port that the API listens on. 12:06.120 --> 12:08.490 Um, the API listens on. 12:08.490 --> 12:12.540 Port is going to be listening on the container port 3003. 12:12.540 --> 12:17.670 So we tell whoever is creating a container from this image that that's the port they need to map to 12:17.700 --> 12:19.080 a host machine port. 12:19.170 --> 12:22.800 Run the Node.js application when the container starts. 12:22.800 --> 12:30.600 So here we provide um, the container, not maven, the container with the command that it can use to 12:30.630 --> 12:31.200 run the app. 12:31.200 --> 12:36.780 So it's going to be node um auth API dot js. 12:39.750 --> 12:40.860 All right. 12:40.890 --> 12:42.120 Very simple. 12:42.180 --> 12:47.470 Docker build dash t profile management. 12:52.720 --> 12:53.920 Build an image. 12:56.260 --> 12:57.220 How easy was that? 12:57.220 --> 12:59.020 Now we say docker run. 12:59.950 --> 13:02.380 Um, did I already create a network? 13:04.420 --> 13:06.340 Docker network ls. 13:07.450 --> 13:10.180 So we have a network called my network. 13:10.180 --> 13:16.330 We're going to run, um, every service on my network so that they can talk to each other. 13:16.330 --> 13:21.370 So Docker run network is going to be set equal to my network. 13:21.640 --> 13:23.140 All right. 13:23.170 --> 13:26.260 We're going to call this dash dash name. 13:27.160 --> 13:30.580 Uh profile management. 13:30.610 --> 13:37.480 It's really important that you keep track of what the container name is, because that's going to be 13:37.480 --> 13:42.370 the host that the e-commerce UI will use to connect to this app. 13:42.610 --> 13:51.540 Uh dash port 3303 will map the container port 3303 to the host machine port 333003. 13:51.870 --> 13:57.930 Um, you don't actually need to map the container port to a host machine port, because the e-commerce 13:57.930 --> 14:03.000 UI is going to be connecting to this profile management microservice directly. 14:03.000 --> 14:09.960 But if you want to access this microservice through the browser and test some of its endpoints, you 14:09.960 --> 14:11.040 can feel free. 14:11.040 --> 14:15.630 So I'm just going to map the container port anyway. 14:16.200 --> 14:20.640 And we're going to create a container from the image profile management. 14:21.060 --> 14:21.660 All right. 14:21.690 --> 14:23.220 Am I missing anything. 14:24.480 --> 14:25.620 No I'm not. 14:25.650 --> 14:26.220 Okay. 14:26.250 --> 14:28.170 Now let's go to the e-commerce UI. 14:28.200 --> 14:33.750 The e-commerce UI has a list of environment variables. 14:33.780 --> 14:34.770 Okay. 14:34.860 --> 14:39.480 Each environment variable by default is going to be set equal to local host. 14:39.510 --> 14:45.680 Unless we set those variables in the environment that the app is running in inside of the container. 14:45.680 --> 14:54.830 So what we need to do is set the profile API host equal to HTTP slash the container name. 14:54.830 --> 15:02.390 We need to use the container name as the host, so that our e-commerce UI is able to find the application 15:02.390 --> 15:06.260 that's running inside of that container within the same network. 15:06.260 --> 15:14.330 So if you're curious about where this environment or environment variable is being used, go to the 15:14.330 --> 15:19.790 server, go to the routes uh auth dot js. 15:19.820 --> 15:21.200 It's being used right here. 15:21.200 --> 15:28.370 So if we set the environment variable properly this should translate to HTTP slash the container name 15:28.370 --> 15:29.900 profile management. 15:29.900 --> 15:34.970 That's going to allow it to find the application that's running inside of this container within the 15:35.000 --> 15:35.630 same network. 15:35.630 --> 15:45.130 My network uh, followed by the container port 3003 followed by whatever paths are provided by the API 15:45.160 --> 15:47.110 by the microservice itself. 15:47.140 --> 15:48.610 Anyways, enough talking. 15:48.610 --> 15:56.290 Let's just give the application the environment variable that it needs to connect to the microservice 15:56.290 --> 15:57.580 that's running on the same network. 15:57.580 --> 16:02.170 So dash e, the environment variable is the following. 16:02.170 --> 16:07.360 We need to set that equal to http slash slash. 16:07.930 --> 16:13.720 Um, the container name running on the same network as profile management. 16:13.750 --> 16:15.520 All right. 16:16.360 --> 16:17.740 Fingers crossed. 16:18.280 --> 16:21.400 So remember before authentication didn't work. 16:21.430 --> 16:22.780 Let's try it again. 16:22.780 --> 16:24.010 Create an account. 16:24.010 --> 16:25.300 Bob. 16:25.600 --> 16:26.740 Bill. 16:27.400 --> 16:28.030 Um. 16:28.060 --> 16:28.780 Bob. 16:28.780 --> 16:29.800 Crescent. 16:32.200 --> 16:38.200 Um B1BB2B email Bob at gmail.com. 16:38.230 --> 16:39.430 Password. 16:39.460 --> 16:40.710 Let's say love. 16:43.890 --> 16:44.610 Request two. 16:44.640 --> 16:47.130 Profile management 3003. 16:50.610 --> 16:52.200 So what happened there? 16:52.290 --> 16:58.950 The fetch request failed because I'm not running it inside of the same network. 16:58.950 --> 16:59.910 Sorry, guys. 16:59.910 --> 17:08.580 So Docker rm uh, e-commerce UI dash f and then after. 17:11.340 --> 17:18.840 Um, before setting the port, I'm going to say dash dash network my network. 17:19.800 --> 17:21.150 Let's try that again. 17:23.190 --> 17:23.610 All right. 17:23.640 --> 17:25.080 Create an account. 17:25.260 --> 17:26.610 Bob. 17:26.640 --> 17:32.160 Bill, address B-1b, B2B postal code. 17:32.580 --> 17:33.510 Um. 17:35.130 --> 17:36.990 Oh, that's not an address, but whatever. 17:37.020 --> 17:39.010 The information doesn't have to be accurate. 17:39.040 --> 17:41.140 Bob at gmail.com. 17:41.440 --> 17:42.640 Love. 17:42.820 --> 17:44.170 Sign up. 17:45.490 --> 17:47.200 Beautiful. 17:48.370 --> 17:49.120 Go away. 17:49.960 --> 17:51.130 So sign up. 17:51.130 --> 17:51.490 Worked. 17:51.520 --> 17:53.950 Now we can sign in using Bob's credentials. 17:53.980 --> 17:55.570 Bob at gmail.com. 17:55.570 --> 17:57.550 Love sign in. 17:57.580 --> 17:58.450 Great. 17:58.450 --> 18:00.430 Everything worked beautifully. 18:00.430 --> 18:02.050 So here we're signed in as Bob. 18:02.080 --> 18:02.590 Bill. 18:02.620 --> 18:08.770 Notice that Bob, by virtue of connecting to the profile microservice, we also have access to profile 18:08.770 --> 18:15.820 management because all the profile management is happening inside of this service, which means the 18:15.820 --> 18:19.960 e-commerce UI is able to successfully connect to it whenever it needs to. 18:19.990 --> 18:25.630 Now the address doesn't make any sense, so I can change it to one, two, three private road or something 18:25.840 --> 18:28.330 and maybe make this Bob slim. 18:29.890 --> 18:30.400 All right. 18:30.400 --> 18:31.300 Beautiful. 18:32.200 --> 18:34.480 So everything worked beautifully. 18:34.480 --> 18:40.680 If I refresh, notice that this is now BS for Bob slim, not for you know what? 18:40.800 --> 18:44.700 All right, so now we still need to connect to the product catalog inventory. 18:44.700 --> 18:45.480 Contact us. 18:45.480 --> 18:46.200 Shipping. 18:46.200 --> 18:52.260 Let's dockerize all of these microservices and connect our e-commerce UI to it. 18:53.670 --> 18:56.550 So let's create another terminal. 18:56.970 --> 19:01.170 And the next one we're going to do is shipping and handling. 19:01.170 --> 19:04.140 So this application is written in go. 19:04.170 --> 19:11.040 And in order to run this application all you need to do is say go run Main.go pretty simple. 19:11.400 --> 19:13.680 That's why I didn't really leave instructions. 19:13.890 --> 19:18.450 But instead of running this bare metal, we're going to run it inside of a Docker container because 19:18.480 --> 19:21.990 I don't feel like installing go into my machine first and foremost. 19:22.020 --> 19:25.380 We'll already have go on my machine, but I don't want you to install it. 19:25.860 --> 19:33.960 Um, all right, let's go ahead and set up a base image of Golang 1.20. 19:33.990 --> 19:37.310 That's the image that's going to be used to run everything. 19:37.310 --> 19:39.950 Working directory is going to be slash app. 19:39.950 --> 19:41.690 We're going to copy. 19:42.140 --> 19:47.750 So the Docker file is inside of the same directory as the main.go file. 19:47.750 --> 19:51.290 So we can just say copy main.go into the working directory. 19:51.320 --> 19:54.380 Expose the port that the API listens on. 19:54.380 --> 19:59.630 That's excuse me, port 8080. 20:00.350 --> 20:06.530 This must be the longest video I've ever made because I am getting really thirsty. 20:06.560 --> 20:09.050 Run the code when the container starts. 20:09.320 --> 20:09.950 Uh. 20:09.950 --> 20:11.090 Go! 20:11.510 --> 20:12.470 Run! 20:12.860 --> 20:13.970 What am I doing? 20:14.330 --> 20:16.460 Go run! 20:17.060 --> 20:18.500 Main.go. 20:20.750 --> 20:21.290 All right. 20:21.290 --> 20:22.370 Pretty simple. 20:23.090 --> 20:28.130 So all I needed to know was this information and I was able to make an image. 20:28.160 --> 20:29.600 Isn't that beautiful? 20:29.690 --> 20:33.050 Docker build t o sees. 20:33.050 --> 20:35.440 I need to go to CD workbook. 20:35.440 --> 20:45.820 Starter Projects oh three Starter Projects shipping and handling and Docker build dash t shipping and 20:45.850 --> 20:46.750 handling. 20:48.160 --> 20:50.830 Um, what am I trying to autocomplete a name? 20:50.860 --> 20:53.440 Docker build t shipping and handling. 20:53.440 --> 20:57.100 Build an image out of the docker file in the current directory. 20:57.430 --> 20:59.440 Hope I didn't make any mistakes. 20:59.470 --> 21:00.760 Now we're good. 21:13.150 --> 21:14.350 Docker run. 21:14.350 --> 21:22.810 We need to run it in the same network as every other service, which is my network dash P will. 21:22.840 --> 21:28.300 We don't really need to map the container port to a host machine port, because I'm not going to access 21:28.300 --> 21:29.680 this from my browser. 21:29.980 --> 21:39.800 Uh, the e-commerce UI is going to connect directly to it, but whatever docker run dash, that's it. 21:39.830 --> 21:47.330 We just create a container from this image, and I need to name the container so that I'm able to access 21:47.330 --> 21:49.970 it using its name later on. 21:50.570 --> 21:52.490 Shipping and handling. 21:55.280 --> 21:56.120 All right. 22:03.740 --> 22:11.060 So now that's running on port 8080, which means in the e-commerce UI I can stop this control Z. 22:11.420 --> 22:14.750 I can stop this and remove the container. 22:14.750 --> 22:19.730 So docker rm e-commerce ui dash f rerun the container. 22:19.910 --> 22:22.010 Adding another environment variable. 22:22.010 --> 22:25.880 So the e-commerce UI relies on another environment variable. 22:26.240 --> 22:35.590 Uh react app shipping API host that it uses in its code to connect to a shipping API. 22:35.740 --> 22:41.410 The default is localhost unless we override this within our container environment. 22:41.410 --> 22:49.570 So dash e shipping API host and we give the application the information that it needs to connect to 22:49.570 --> 22:51.400 the microservice. 22:51.400 --> 22:57.250 So http uh the container name was shipping and handling. 23:00.940 --> 23:08.560 So the application itself has no idea where the, uh, shipping API is going to be. 23:08.590 --> 23:13.570 It relies on us to give it a host so that it can find where it's running. 23:13.570 --> 23:20.170 In this case, we tell it that it's running inside of the shipping and handling container, which happens 23:20.170 --> 23:23.290 to be inside of the same network oopses. 23:23.320 --> 23:24.850 Let me remove that. 23:26.620 --> 23:28.060 All right. 23:28.360 --> 23:33.210 Localhost 4000 Shipping beautiful. 23:33.210 --> 23:38.130 It's able to connect to the shipping and handling API showing us this beautiful table. 23:38.130 --> 23:43.530 The next thing I want to connect to is the Contact Us API. 23:44.070 --> 23:50.100 So this one is a very, very simple flask app. 23:50.100 --> 23:53.700 I bet at this point that you can do this with your eyes closed. 23:53.700 --> 23:56.790 If not, no worries, we'll go through it now. 23:56.790 --> 24:01.410 So let's use Python 3.8 slim. 24:03.150 --> 24:03.810 All right. 24:03.840 --> 24:09.480 Now we're going to set the working directory to be slash app. 24:10.230 --> 24:18.750 Then we're going to copy um so the Docker file is inside the same directory as the requirements.txt. 24:18.780 --> 24:22.470 So we can just say copy requirements.txt into the working directory. 24:22.470 --> 24:24.660 We can install the dependencies. 24:25.080 --> 24:26.880 Um you don't have to know the command. 24:26.880 --> 24:32.420 You can ask whoever developed this app, but I know it to be dash r requirements.txt. 24:32.450 --> 24:42.950 After installing the dependencies, we can copy, uh, we only need to copy server.py into the working 24:42.950 --> 24:44.930 directory, the app. 24:44.930 --> 24:48.710 The container port that it's going to use is port 8000. 24:49.130 --> 24:52.940 So expose port 8000. 24:53.060 --> 24:55.250 Run the flask app when the container starts. 24:55.280 --> 24:57.710 Remember there are two ways to run flask applications. 24:57.710 --> 25:03.020 The annoying way which is to use flask run to set a shell environment variable, and the simple way 25:03.020 --> 25:06.530 which is just to say Python server.py. 25:06.560 --> 25:08.810 You know me, I like to keep things simple. 25:08.810 --> 25:11.240 So let's do that. 25:11.690 --> 25:17.150 Uh, create another terminal for the contact support API. 25:17.180 --> 25:23.570 So we'll go CD workbook starter projects oh three starter projects. 25:23.930 --> 25:28.960 Um, contact support team all right. 25:28.990 --> 25:34.390 Docker build t contact support team. 25:36.910 --> 25:38.890 Build an image from the Docker file. 25:46.240 --> 25:46.750 All right. 25:46.750 --> 25:49.720 And then we're going to say docker run. 25:54.610 --> 25:56.620 Keep the image name there for reference. 25:57.340 --> 26:01.630 Docker run dash dash network my network. 26:02.260 --> 26:06.490 We don't have to map it to a host machine port, but we will anyways. 26:09.250 --> 26:11.080 Um, is that it? 26:11.080 --> 26:12.940 No, we need to name the container. 26:12.970 --> 26:22.450 That's really important so that we're able to identify the host from our e-commerce UI app. 26:24.640 --> 26:25.720 Beautiful. 26:26.620 --> 26:27.590 Next, you know what? 26:27.620 --> 26:31.280 Just for you, I'm going to access it from my browser just to show you an example. 26:32.660 --> 26:41.600 So if we go to localhost 8000 slash this endpoint, it shows us the message that it would send to the 26:41.600 --> 26:45.320 e-commerce UI when the e-commerce UI asks for it. 26:45.680 --> 26:49.820 Anyways, uh, let's copy over the container name. 26:50.570 --> 26:55.640 Stop this thing, remove the container. 26:55.790 --> 26:59.720 Rerun it using the environment by passing into it. 26:59.720 --> 27:01.400 An environment variable. 27:02.090 --> 27:06.320 Uh, sorry, my brain froze for a sec. 27:07.040 --> 27:08.720 Environment variable. 27:08.720 --> 27:10.580 Contact API host. 27:13.010 --> 27:14.120 HTTP. 27:16.970 --> 27:20.300 The container name is contact support team. 27:23.120 --> 27:23.780 All right. 27:23.780 --> 27:29.140 So in the interests of transparency. 27:29.140 --> 27:34.240 So that's going to be HTTP contact support team 8000. 27:34.270 --> 27:34.990 Whatever. 27:34.990 --> 27:43.750 So um this tells our e-commerce UI to connect to the application that's running inside of the contact 27:43.780 --> 27:45.760 support team container. 27:45.910 --> 27:47.080 All right. 27:47.110 --> 27:51.760 Which happens to be running on the same network as the container that's running this app. 27:51.760 --> 27:54.160 So that should work out beautifully. 27:55.240 --> 27:58.390 Server is running on port 4000. 27:59.050 --> 27:59.800 Let's test it out. 27:59.800 --> 28:01.750 So now it should connect to contact us. 28:01.750 --> 28:03.010 Let me refresh. 28:04.540 --> 28:05.590 Nice. 28:05.590 --> 28:11.110 If I put a subject uh, worried about purchase. 28:12.160 --> 28:15.010 Uh, I bought the wrong product. 28:15.010 --> 28:16.420 Submit. 28:17.020 --> 28:19.180 Everything works beautifully. 28:19.360 --> 28:20.260 So contact us. 28:20.260 --> 28:20.830 Is working. 28:20.830 --> 28:22.660 Profile management is working. 28:22.660 --> 28:25.470 Shipping I think is what we made work before. 28:25.500 --> 28:26.100 All right. 28:26.100 --> 28:27.720 There's still three more things we got to do. 28:27.750 --> 28:30.870 Product catalog, inventory and order management. 28:31.860 --> 28:33.390 We'll do inventory. 28:33.930 --> 28:34.890 Um. 28:37.050 --> 28:47.970 By the way, um, this one is a Python application, so you can feel free to pause and try this Docker 28:47.970 --> 28:48.810 file out yourself. 28:48.810 --> 28:51.270 It's going to be very similar to this one. 28:51.600 --> 28:55.470 I'm just going to go ahead and copy it because I'm getting a bit tired and lazy. 28:55.740 --> 28:58.680 Uh so we'll go to product inventory. 29:00.330 --> 29:02.490 Uh the base image won't change. 29:02.490 --> 29:04.080 Work directory won't change. 29:04.140 --> 29:06.330 There's a requirements.txt file. 29:06.660 --> 29:08.220 Uh, dependencies. 29:08.220 --> 29:11.640 What's the Python app called? 29:11.640 --> 29:15.000 Inventory API dot p y. 29:15.150 --> 29:21.210 The port is 3002, by the way. 29:21.240 --> 29:22.380 Repetition is good. 29:22.380 --> 29:24.380 It means we're getting the hang of things. 29:24.410 --> 29:28.940 Python inventory api.py. 29:30.440 --> 29:37.430 All right, so now, um, let's make sure we didn't miss anything. 29:37.970 --> 29:39.770 Create another terminal. 29:41.630 --> 29:49.130 We'll CD into workbook starter projects zero three starter projects product inventory. 29:51.290 --> 29:54.140 Okay so we're at the product inventory. 29:54.140 --> 29:57.050 Uh, we're going to go ahead and build an image from this Docker file. 29:57.080 --> 30:03.200 Docker build dash t calling this product inventory. 30:04.220 --> 30:07.700 Create an image from the docker file at the current directory. 30:08.510 --> 30:15.830 All right then I'm going to say docker run dash dash network my network. 30:16.550 --> 30:21.200 Um we don't need to map the container port but we will anyways 30:24.880 --> 30:26.020 Okay. 30:26.530 --> 30:29.200 Um, the image name is Product inventory. 30:29.200 --> 30:33.280 I'm going to set that as the container name as well. 30:33.310 --> 30:34.330 Dash dash name. 30:34.330 --> 30:35.620 Product inventory. 30:35.650 --> 30:40.270 We'll create a container from the following image. 30:40.510 --> 30:41.770 Run that. 30:42.520 --> 30:43.630 All right. 30:44.230 --> 30:48.400 And now from the e-commerce UI we set another environment variable. 30:48.400 --> 30:52.090 So first delete the stopped container. 30:52.150 --> 31:01.030 Set another environment variable dash e and the environment variable that the application expects and 31:01.030 --> 31:04.630 embeds into its API routes. 31:04.660 --> 31:07.270 Be this environment variable that we set. 31:12.160 --> 31:20.740 Is equal to product inventory HTTP colon slash slash. 31:20.740 --> 31:24.110 We want this to map to product inventory. 31:24.140 --> 31:34.280 3002 the inventory management option relies on us setting up the inventory API, as well as the product 31:34.280 --> 31:37.520 API, which currently has an undefined environment variable. 31:37.520 --> 31:44.450 We haven't set up the product API yet, so we should have set up the product catalog first, which we'll 31:44.450 --> 31:45.500 do right now. 31:46.250 --> 31:54.470 So we'll CD into um, workbook starter projects. 31:54.500 --> 31:56.090 Oh three starter projects. 31:56.090 --> 31:58.850 We'll CD into the product catalog. 31:59.390 --> 32:00.650 All right. 32:00.680 --> 32:02.000 What is this. 32:02.840 --> 32:04.760 It is a node JS app. 32:06.200 --> 32:13.640 And running it is going to be very similar to something we've done before right over. 32:15.530 --> 32:16.130 What was it. 32:16.130 --> 32:17.120 Profile management. 32:17.150 --> 32:17.810 Yep. 32:17.840 --> 32:23.500 We can literally just copy this over into product catalog. 32:23.680 --> 32:24.550 All right. 32:24.550 --> 32:26.050 From node 14. 32:26.080 --> 32:27.640 Da da da da da da. 32:28.090 --> 32:33.580 Uh, the port that this one uses, the container port is going to be port 3001. 32:35.290 --> 32:36.220 Okay. 32:38.800 --> 32:41.770 Uh, port 3001. 32:41.800 --> 32:45.130 Now, here we run node index.js. 32:45.730 --> 32:46.570 All right. 32:47.830 --> 32:48.910 Simple. 32:49.210 --> 32:51.400 So we clear the output. 32:51.400 --> 32:58.480 Uh, docker build t, um, product catalog. 33:05.290 --> 33:10.390 Then I'm going to create a container docker run. 33:11.140 --> 33:13.630 I'm going to create a container named. 33:15.670 --> 33:21.360 Um, actually before we start with the name Create a container at the network. 33:21.660 --> 33:23.220 My network? 33:24.510 --> 33:33.210 Um, whose port 3001 container port is mapped to a host machine port 3001. 33:33.240 --> 33:40.230 Again, the e-commerce UI is going to be connecting to the product catalog directly within the same 33:40.230 --> 33:40.770 network. 33:40.770 --> 33:44.220 So we don't need to map this to the host machine. 33:44.220 --> 33:51.030 Uh, it's only for us if we decide to access this API's endpoints through the browser. 33:52.020 --> 33:55.170 Um, and that's pretty much it. 33:57.360 --> 33:57.750 Oh no. 33:57.750 --> 34:00.960 We still need to name our container. 34:05.010 --> 34:05.430 And okay. 34:05.460 --> 34:09.450 And we're creating a container from the image that we just built. 34:11.160 --> 34:12.480 All right. 34:12.480 --> 34:27.840 And now I can stop this process and remove the e-commerce UI app container and create another container. 34:28.080 --> 34:31.350 With another environment variable this time. 34:32.580 --> 34:36.030 To do to do so many folders. 34:36.030 --> 34:36.660 Uh. 34:39.180 --> 34:50.190 Product API host set that equal to HTTP slash product catalog I believe is what we called the container. 34:50.790 --> 34:52.230 So you get the point by now. 34:55.170 --> 34:56.580 Go to inventory management. 34:56.610 --> 35:01.680 Now it works because this page relied on two APIs in order to run properly. 35:01.680 --> 35:05.970 And if we go to product catalog this one works as well. 35:05.970 --> 35:08.910 The final service we need to configure is the order management. 35:08.910 --> 35:11.940 Because if I try to add to cart, I'm going to get an error. 35:11.940 --> 35:15.450 If I try to go to order management, I'm going to get an error as well. 35:15.450 --> 35:18.640 So let's fix that and we should be done. 35:18.970 --> 35:20.320 All right. 35:21.040 --> 35:23.950 Isn't that crazy how much progress we've made in one video? 35:23.980 --> 35:30.910 You're you're running an e-commerce application, uh, having just learned Docker. 35:30.910 --> 35:32.290 So I hope you're proud of yourself. 35:32.290 --> 35:34.720 If you're if you've been able to keep up so far. 35:34.780 --> 35:36.280 Let's continue. 35:36.280 --> 35:41.020 Uh, we're going to CD into, uh, order management. 35:41.020 --> 35:48.070 So CD workbook Starter projects, CD oh three Starter Projects order management. 35:48.400 --> 35:54.820 And let us create the Docker file for this Spring Boot app. 35:54.880 --> 36:00.460 So we've already created one, uh, in the previous lesson before. 36:00.460 --> 36:07.000 So what I'm going to do, remember we need to use a maven as well as a Java runtime. 36:07.000 --> 36:14.110 I'm going to use Maven 3.6.3 open JDK 17 slim. 36:14.110 --> 36:19.880 This was actually the the version of Maven and Java that I used when building the Spring Boot app. 36:19.910 --> 36:25.610 I'm going to set the working directory inside the container Workdir slash app. 36:25.640 --> 36:29.000 I'm just going to copy everything over. 36:30.770 --> 36:36.320 Then I'm going to run Maven install. 36:36.350 --> 36:43.400 That is going to be used to install all the dependencies inside of Pom.xml. 36:43.700 --> 36:44.510 All right. 36:44.960 --> 36:48.320 Uh, expose the port that the application listens on. 36:48.470 --> 36:53.810 Uh, the application I'm sure listens on port 9000 or something. 36:54.680 --> 36:56.240 Port 9090. 36:56.660 --> 36:58.760 Okay, I'm going to. 37:02.030 --> 37:06.260 So expose port 9090. 37:07.130 --> 37:09.620 Define the command to run when the container starts. 37:09.620 --> 37:18.280 So after running Maven install, we can simply Say Maven spring boot run. 37:19.300 --> 37:20.440 All right. 37:23.500 --> 37:25.180 Docker build. 37:25.240 --> 37:26.410 So this is nothing new. 37:26.440 --> 37:27.760 We did this in the lessons. 37:27.760 --> 37:31.030 I'm not going to bother re-explaining the maven build process. 37:32.440 --> 37:38.470 Docker build t we're going to call this order and management. 37:39.190 --> 37:43.270 We're going to create an image from the Docker file in the current directory. 37:44.500 --> 37:50.470 All right installing all the dependencies from the pom.xml file. 37:50.470 --> 37:57.550 So in node that's a package.json file in uh in Python that's the requirements.txt file. 37:57.550 --> 37:59.140 You'll get the hang of it. 37:59.290 --> 38:01.180 Um anywho. 38:01.180 --> 38:06.220 So now we simply create a container docker run dash dash network. 38:06.250 --> 38:09.880 My network needs to run in the same network as all the other containers. 38:09.880 --> 38:17.160 And now this Microservice relies on three other microservices. 38:17.160 --> 38:23.730 It relies on the product inventory API host on the Product Inventory API, the Product Catalog API, 38:23.730 --> 38:25.260 and the Shipping and Handling API. 38:25.290 --> 38:31.530 These are the default values that are given to these variables, which will be overridden if we provide 38:31.530 --> 38:36.480 these variables from the environment that the app will be running in from the container itself. 38:36.480 --> 38:42.690 So now, um, before starting up the container, let's just name it. 38:43.740 --> 38:47.340 I'll name it Order Management, the same name as the image. 38:47.340 --> 38:55.020 Why we before specifying the image from which we will create this container, let's specify a port mapping 38:55.020 --> 38:57.030 9090, 90, 90. 38:57.060 --> 39:02.370 We don't actually need to map the container port to a host machine port once again, because the e-commerce 39:02.370 --> 39:11.390 UI is going to connect to this application directly via the Docker network, not through our host network 39:11.390 --> 39:12.740 anyways. 39:13.610 --> 39:19.850 And before we finalize this command, we provide it with the environment variables that it needs in 39:19.850 --> 39:21.650 order to function properly. 39:21.650 --> 39:33.710 So we set the product inventory api API host environment variable equal to HTTP, followed by the container 39:33.740 --> 39:41.960 name where the product inventory API is running, which happens to be inside of the same Docker network. 39:42.230 --> 39:45.410 Then we give this information another. 39:45.440 --> 39:53.390 We give this application another environment variable called product catalog API host, which we set 39:53.420 --> 40:02.120 equal to the container that's running the product catalog HTTP product catalog. 40:03.920 --> 40:08.060 Once again we say dash e shipping handling API host. 40:08.090 --> 40:12.910 Setting this variable equal to HTTP slash slash. 40:14.350 --> 40:19.840 Um, the container where the shipping and handling API is running. 40:22.480 --> 40:23.260 Make sure I got everything. 40:23.290 --> 40:23.560 Shipping. 40:23.560 --> 40:24.670 Handling API host. 40:24.670 --> 40:26.290 Product catalog API host. 40:26.290 --> 40:28.270 Inventory API host. 40:28.300 --> 40:28.930 All right. 40:28.960 --> 40:34.870 Now we simply specify the image from which this container will be created. 40:35.890 --> 40:37.720 And I'm pretty sure we're done. 40:41.950 --> 40:43.150 Sweet. 40:44.350 --> 40:45.550 We run this app. 40:52.810 --> 41:00.070 Um, need to remove the e-commerce UI container dash e. 41:01.330 --> 41:14.030 So the final microservice that we need to manage from our e-commerce UI is the order API. 41:14.180 --> 41:18.740 So this is the environment variable that the e-commerce UI application expects. 41:18.770 --> 41:27.530 We set that equal to HTTP slash the container that's running the app. 41:33.020 --> 41:33.860 And that's it. 41:34.010 --> 41:42.830 Now it has the information it needs to connect to every single microservice, thereby finalizing every 41:42.830 --> 41:45.050 moving part for our app. 41:45.080 --> 41:51.380 So if I go back here and add the Bluetooth headphones product, add it to the cart, and actually, 41:51.380 --> 41:58.850 um, made this application so that if you add it again, already exists, it's a pretty complete e-commerce 41:58.880 --> 41:59.480 app. 41:59.480 --> 42:05.450 The only thing is that I didn't actually add a payment system or whatever, and obviously some corners 42:05.450 --> 42:07.930 were cut because it's just a tutorial app. 42:07.930 --> 42:14.620 But anyways, this is a pretty significant application to containerize and run all at once. 42:14.620 --> 42:16.180 I hope you're proud of yourself. 42:16.180 --> 42:21.730 If you were able to follow along, you should now have the skills to containerize pretty much any app 42:21.730 --> 42:22.960 that you want. 42:23.200 --> 42:23.890 All right. 42:23.890 --> 42:27.310 This is very similar to what you can experience in the real world. 42:27.310 --> 42:29.170 We've got authentication. 42:29.170 --> 42:31.000 We've got order management. 42:31.000 --> 42:39.370 We have over seven different terminal sessions running these microservices, all of them forming a big 42:39.370 --> 42:40.810 e-commerce app. 42:41.200 --> 42:46.000 Now on that same note, we do have six different terminal sessions. 42:46.000 --> 42:53.380 Things are getting very tedious, which is why in the next section we're going to introduce uh, Docker 42:53.380 --> 42:59.530 Compose which is going to streamline our container creation workflow. 42:59.560 --> 43:01.450 I'm excited to see you then. 43:01.780 --> 43:03.700 I hope you enjoyed this lesson. 43:03.700 --> 43:05.830 And on to the next