NGINX Tutorial for Beginners

NGINX Tutorial for Beginners_clean.docx
NGINX is an open source web server software used for reverse proxy, load balancing, and caching. It's important to understand, especially if you're a backend developer. You'll learn all about NGINX in this crash course from senior developer Laith Harb. Hello everybody, welcome back to the channel in this video. What we're going to do is we're going to cover NGINX in great, great detail. Now let's actually go ahead and begin by discussing what exactly is NGINX and what its purpose is. And I think the best way to show this is to show an example where NGINX is being used. So what I'm going to do is I'm going to go to my browser right over here, and I'm going to go to Airbnb.ca. Now as soon as I go to Airbnb.ca, you can see that my browser is served a bunch of different content. You can see there's content here. We have this huge image right over here. We have this image, et cetera, et cetera. Now the question is, is how did my browser get all of this content? Well, in order to understand this, we can actually dissect this by inspecting it, right click, inspect, and then looking at the network tabs right over here. So what I'm going to do is I'm going to refresh, and as soon as I refresh, you can see here I get bombarded with a bunch of different networks. So these are network requests that were made from the browser to a particular server in order to get content. Now I'm going to go ahead and click on the very first network request just to get a little bit more information about it. So you can see here, this is the URL that was made to a particular server. You can get a bunch of more information, but I want to go over here, scroll down a little bit, and what I want to do is I want to go to this server section right over here. So you can see here the server is actually Nginx. So Nginx was the one that served us content, served us this web content to our browser. And that's why Nginx is very typically known as a web server. It is a server that is going to serve web content to our browser. Now that's not particularly accurate because it has another definition. We'll talk about that later, but it is typically used and treated as a web server. So again, a server that is going to serve us web content to our browser. Now I hope that makes sense, but if it doesn't, I actually have a bunch of diagrams that I would like to show you. So let's actually go ahead and go through this example, but in diagram format. So over here, let's say I am on my computer and I go to Airbnb.ca. Now, typically what we would think would happen is we make a request over the internet to a server that Airbnb is hosting. I'm pretty sure Airbnb uses AWS. So let's say there is a server on AWS that it is hosting. And once we make a request is going to process that request and send back a response for that web content, whether it's the image, the content, et cetera. Now you might be thinking where in the world does Nginx fit in here? I don't see Nginx at all. Well, right here, there is no Nginx, but this is typically not how web content is served. Typically it is served something like this. So instead of when I go to Airbnb.com, instead of making a request directly to the, to the Airbnb server, I make a request to Nginx, an Nginx server. So the browser makes the request to the Nginx server. And then the Nginx server makes a request to the Airbnb server. The Airbnb server responds to the Nginx server, gives all the content. And then Nginx, what it does is it sends back the content to the browser. Now, if you're familiar with infrastructure and architecture, this is actually known as a reverse proxy. Again, treated as a web server, but the technical term for this is a reverse proxy. Now you might be thinking, why in the world do I even want this middleman here? This just seems like a whole lot of more work. Why can't I just make a request directly to the Airbnb server? Well, this wouldn't be a bad idea if we weren't getting a lot of traffic to our application. However, if we get a lot of traffic, what we need to do is we need to somehow increase the number of servers that we have inside of our AWS account. Now, the reason for this is because Airbnb is very popular, has millions and millions of users using it all the time. If you only had one server, then this over here is going to get so many requests that it's going to reach a bottleneck. And eventually the latency is going to be extremely low. So what we need to do is we just need to increase the number of servers that we have. Now, by increasing the number of servers, this actually presents another problem. Well, now what we need to do is somehow go to this server one time, go to this server another time, go to this server another time. So how do we do that? Well, this is where Nginx comes into place. So over here, the client only sends the request to Nginx. We have one instance of Nginx right over here, and Nginx is responsible for forwarding forwarding this request to a available server. Now, this is actually known as a load balancer. So Nginx can act as a load balancer. So for example, right now we make a request to Nginx, Nginx makes a request to this server, gets the response, sends it back. Maybe the next time we make a request, another person makes a request, it makes a request to Nginx. See, we're still just making a request to Nginx. But then this time Nginx is making a request to this server. And then it's getting the response and sending it back. Now the client doesn't have to do all this, it just makes a request to this load balancer. And then it's just going to get the response. And this is very good for scaling your application. Okay, so I hope you can see this is just one really, really important use case. You can see Nginx can act as a load balancer. Now another very important use case is encryption. So if you ever go to a website, you can either see that it is either HTTP or HTTPS. So if it's HTTPS, that means that the server is encrypting the data that is being sent and returned. So it's encrypting and decrypting this data. And that's the way that we get HTTPS, and we have a secure server. Now this actually presents a problem when we have multiple servers, because if you have multiple servers, we're going to have to encrypt every single one. Well, that's why we would probably want to use Nginx. Instead of encrypting every single, instead of having this encryption and decryption process in every single server, you can just have it right over here in Nginx. And then and then we can make a request, it can be encrypted, send it to the servers, get it back, decrypt it back over here. And you can see this, this is way easier to set up HTTPS. Now there's a bunch of other methods or a bunch of bunch of other good reasons why you'd want to use Nginx and reverse proxy in general. But those were the two most important, you can actually look up why you would want to use a reverse proxy, you can just search it up. And there's a bunch of different content, but I hope this diagram illustrates that. Now with that being said, let's just go ahead and get started with actually coding out Nginx. In this section of the course, what we're going to do is install Nginx on our local machine so we can get started and work with it. Now I'm going to show you how to install Nginx on a Mac. However, if you are on a Windows device, it is not that difficult, I will leave a link in the description as to how to install it. Now if you're on a Mac, let's go ahead and install it. So in order to do this, what we're going to need to do is open up our terminal. And very simply just do brew install Nginx. Now in order to do this, you're going to need to have Homebrew installed, which is the package manager, I'll have a link in the description as to how to install this again, relatively simple. Now I already did this. So you go ahead and do it if you haven't already. Now what this is going to do is is going to create an Nginx directory inside of the user slash local slash etc file. So over here, we're going to have an Nginx directory. And if you do an LS and inspect what's inside it, you can see we have a bunch of different files and folders. So to open this up in VS code, I'm just going to do code dot, let's go over here. And right away, you can see we have again, a server's directory. And then we also have a bunch of different files. Now specifically, what we're going to be working on is just one file. And that is this file right over here, the nginx.conf, which is the configuration file for configuring nginx, the reverse proxy. So this is where we're going to do a lot of the configuration where it's going to reach out to a particular server, and then serve us our web content. So this is what we're going to be editing. And in the future section, I'm going to go ahead and just completely remove everything and start from scratch. But for now, what I want to do is they want to start up nginx. To start up nginx, all you have to do is say nginx like so. And then let's go ahead over here to our browser. And let's go to localhost 880. And right away, you can see that we get this file right over here. So what's happening is we're making a request our browser, once we go to localhost 880, it's making a request to nginx, nginx is then going ahead and serving this content. And of course, we can always see this by looking at the network tabs. So let's go over here, let's do a quick refresh. And then you can see here that we're making this particular request, you can see that the server is indeed nginx. Okay, so this is looking quite good. Now let's go ahead and start actually returning some other files and folders and images that we want for our application. Now that we have installed nginx, and we are running it locally on our machine, let's just talk about some of the important nginx terminology. So in order to do this, let's go to our nginx.conf file. And let's go ahead and explore exactly what is going on here. Now there's quite a bit and this might be confusing at first. But if you look around, you can see that there are two distinct things that exist inside of this file. So the first thing that exists is something that looks like a key value pair. So right over here we have the key, in this case, the key is worker underscore processes. And then the value is one, you can see here, we also have another key include, then we have the value of mime dot types, over here, default type as the key, and then we have this value right over here. So you can see that we have a bunch of these things. But we also have this other thing right over here, this events block, so this block of code, and then within it, we have those key value pairs. So instead of referring to them as things, let's actually go ahead and define exactly what these are. So this right here, these key value pairs, they are known as directives. So over here, we have the key, we have the value, this right here is a directive, this right here is a directive, this is a directive, this is a directive. Now these blocks of code, so with the curly braces, well, these are known as the context, and within the context, you can have directives for that specific context. Now right over here, we have the HTTP context. And what that is going to do is define our HTTP server. And then within this HTTP context, we have directives that are going to define it. All right, so that's pretty much all it is that we need to know in terms of the definition, let's actually go ahead and just completely remove everything right in here. And we're going to start from scratch. All right, my good friends, now that we have that all set up, let's talk about exactly how we can start serving content to our web page. Specifically, we're going to work on serving static content. And what I mean by static content are simple files like HTML files, CSS files and images to our web browser. So let's actually go ahead and go to our terminal, I'm going to move into my desktop, I'm going to make a new directory. So with miktor, I'm going to say my site, I'm going to move into my site, and I'm going to say code dots to open up a VS code instance. So let's go over here. And I'm going to go ahead and open that up. And then right in here, I'm going to create an index dot HTML file. And I'm going to add an HTML tag, let me zoom in here, HTML tag, and then I'm going to add a body. And then I'm going to add an h1. And then in here, I'm going to say Hello, my friends, I am served from nginx. Alright, so this is looking great. So now what I want to do is somehow configure nginx to serve this index dot HTML file whenever I go to localhost 8080. So how are we going to do this? Well, of course, what we need to do is we need to define some context as well as directives. Now, because what we're doing is we're dealing with HTTP responses, what we need is we need an HTTP context, we also need an events context that we're not going to use, we just need to define it for nginx configuration to work. So right over here, what we're going to do right inside of the HTTP, we're going to define another context, and this is going to be the server. And then inside of the server, this is where we're going to define a bunch of different directives that are going to configure this nginx server. So the first thing that we want to do is we want to have the listen directive, we want to say that we want to listen on port 8080. Now the next directive is going to be is the root directive. And this is going to be a file path that is going to contain a bunch of different files that we want to serve when we go to this port right over here. Now, this path is going to be well, this folder right over here, this my sites folder. So what we can actually do here is we can go here, copy the path. And then we can say root is this path, and we can remove the index dot HTML and just have a semi colon. So we're saying once we go right over here to this port, I want to serve all the files from this route. Now what it's going to do is it's going to look for an index dot HTML and serve it once we hit this path. So that's pretty much all it is that we need to do in order to well, serve this static HTML. So let's go ahead and save that. Now if we go back to localhost 880, and we do a refresh, you can see that we're still getting this default. So it's not serving our HTML. And that's because what we need to do is we need to reload nginx with this new configuration. This is relatively easy thing to do, you can go ahead and open up any terminal, I'm using the integrated VS code terminal, and I'm going to say nginx dash s, and then reload. So that's pretty much all it is that you need to do. And now if you click refresh, you can see that now nginx is serving this wonderful, beautifully designed static HTML file. So I hope this makes sense. We have these directives, and then right in the server, we're saying, hey, we want to listen on localhost 880. And this is what we want to serve. So we this is this is where the file that we want to serve that we want to serve lives. In this video, what we're going to do is learn exactly about mime types. Now to explain what this is, what I'm going to do is I'm going to go over here to the website. And let's say I'm sick and tired of this plain old website, what I need are some styles. So I'm going to go over here, I'm going to add a styles dot CSS file. And then in here, I want to style the h1, I wanted to have a background color pink, I also wanted to have a color of aqua, like so. And then over here, what we're going to do is we're going to rework this so we can actually go ahead and use this style. So at the very top, what I want to do is I want to say doc type HTML. And then over here, inside of the HTML tag, I'm going to add a head. And then I'm going to add meta. I'm over here going to say char set is equal to UTF dash eight. Let's also add a title might as well just saying my nginx project. And then lastly, what I'm going to do is I'm going to add a link. And this is going to link the styles dot CSS. All right, so let's go ahead and refresh. And now if I go here, you can see that the styles actually isn't being applied. Now, why is that? Is it not being served by nginx? Well, let's go ahead and inspect. And you can see if we go over here to the console, you can see that well, it doesn't seem as though it is served. However, if I go to the network tab, and I were to refresh, let's go ahead and refresh this. After a few more reloading, you can see that the styles dot CSS is actually served to the web page. So why do we not see the styles inside of this HTML file? Well, the reason for this, and we can actually explore this when we click on it, let's go ahead and click on the styles dot CSS. I'm going to zoom in here. And let's, let's just give us a little bit more real estate. Actually, we can just close this. That looks good. And now if we go scroll down over here, you can see that the content type is text dash plane, whereas it should be text dash CSS. So that is the issue that we're facing right now, any type of file is going to be relayed with this content type. And what we need to do is we need to change it. So right over here, what we can actually do inside of the HTTP context, we can define all of the different types. So I'm going to say something that is text dot CSS is going to have a CSS extension. So it's gonna have dot CSS, anything that is going to be HTML. Well, this is going to have an HTML extension. So now what I'm gonna do is I'm gonna go ahead and reload this. And now if I were to refresh this, and click on the content type, you can see it's still text plane. Let's just do a hard reload now. Now you can see that it is indeed text CSS. So that's what it should have been. I just needed to do a hard reload because the caching was was showing that is text plane. So hard reload is command shift R. And I can see that finally that the styles are being applied because now we have the correct content type. Now this right over here is good, the approach that we did, but there's so many different files out there, we're gonna have to catch all of the files manually. And we're going to need to add them inside of this types right over here. Now, luckily, we actually do not have to do this, because nginx comes with default mime types. So right over here, we can actually click on the mime types. And let's go ahead over here. And you can see all of the different types that we can have, we can have gifts, we can have JPEG, and these are just a bunch of different configurations that we can add. So what we can do is we can actually copy this and paste it in here, we can actually do one better. Instead, what we can do is just completely get rid of this and use the include directive. I'm going to say I want to include the mime types. And this is just going to include include all of the different types inside of this nginx configuration. So let's go over here, I'm going to go ahead and just reload the nginx server. And of course, we need a semi colon right over here. Reload the nginx configuration, let's do a hard refresh. And now you can see that everything is working the exact same way. So that right there are mime types. In this section of the course, what we're going to do is we're going to learn about the location block or the location context. Now, this is a very, very important concept in nginx, because it allows us to specify certain endpoints, certain pages that we can hit. And then we can serve different types of HTML elements. So for example, let's go to my site. And what I'm going to do is I'm going to create a directory, let's call this fruits. So let's say over here, this is a website that is going to list a bunch of different food. And then over here inside of the index dot HTML, I'm going to go ahead and just copy everything that we have right over here. And we have an index dot HTML inside of this fruits directory. And let's just get rid of the styles here, we don't need that. And then over here, let's create a list item, or a UL, and then an li. And then inside of the li, let's say mango, add another li, let's say here strawberry. And then lastly, I want another li. And let's add another fruit watermelon, something like so. So what we want to do is when we hit the slash fruits directory, we want to serve this index dot HTML. And now we can do that with a location context. Now this is going to live inside of the server. So over here, what we can do is we can say location. And this is going to take a second argument. And this is going to be the path that we want to hit. So I'm going to say fruits. So this is when we go to localhost 8080 slash fruits, what we want you to do is we want you to serve the index dot HTML inside of the fruits directory. So what we can actually do here is very simply just grab the same exact route and paste it in here. Now what this is going to do is it's going to specify is the root when we hit the slash fruits directory, a slash user slash lathe, harp slash desktop slash my site, they might be thinking, well, is that going to serve this index dot HTML file and not this index HTML file? Well, if that was it, then yes, it would serve the this parent index dot HTML file. But when we use location, what what's going to happen is it's also going to grab this right over here, the slash fruits and add it in like so. And that's why we didn't specify slash fruits at the very end, because then what would happen is we'd grab this right over here and then append it like that. So it'd be slash fruits, slash fruits. So hope that is nice and clear. So let's go over here, let's go back to our terminal. And let's do a reload. So I'm going to go here, say engine x slash reload. And then over here, let's get rid of this for now, we don't need that. And now if we go to slash fruits, you can see that now we are serving this index dot HTML. How incredible is that? Now, let's say what we want to do now is we want to go to slash carbs, for example. And right now, of course, we're getting a 404. But what I want to do is I want to go to slash carbs, and I want to get these same fruits over here, because these are very carb heavy foods might as well reuse them for slash carbs. So how are we going to do that? Well, you might be thinking that we can just do the exact same thing, we can do slash location. And then over here, we can say carbs, and then we can specify the root over here. Now, this is going to present an issue because well, what's going to happen is, it's going to go ahead and append slash carbs right over here, a not slash fruit. And as you can see, we do not have any carbs directory inside of our application. So instead, what we're going to do is we're going to somehow need to specify, hey, I don't want to, I don't want to append this to the very end of the route. And I want it to be slash fruits. So in cases like these, instead of using groups, what you would use is alias. And so alias is not going to append this right over here into the very end. So right here, what we can say is slash fruits like so. And then let's go ahead and copy that, open up the terminal. And let's go here, reload. And now if I go to slash carbs, slash carbs, like so you can see now we're getting the exact same index dot HTML file. So remember, alias is not going to append this path over here, like root would. So anytime we use root, you actually have to make sure you have that exact same directory inside of your application. Whereas with alias, you do not need to have a carbs directory. Okay, so this is looking really, really good. This is incredible. But now what I want to do is I want to add another directory, let's add a vegetables directory. So this is a tough word to spell. So just make sure you have it right. It's V, G, E, and then tables like so. And let's say inside of this directory, we actually do not have, we actually do not have an index dot HTML file. Instead, what we have is, let's say a, let's say a veggies dot HTML file. So it's not index, it's a veggies dot HTML. I'm gonna go ahead and just copy this, paste that in there. And let's go ahead and name some vegetables, lettuce. What are some other vegetables, just say eggplants. And then one more vegetable onion. Okay, so now what we want to do is, well, we'll say when we go to, when we go to veggie tables, veggie tables, like so, what we want to do is we want, well, the specify roots because we have the vegetables directory over here. Now, do you think that this is going to work? So let's go ahead and actually just give this a quick little test. And then let's go here, let's do a quick little reload. Let's go to slash vegetables, slash veggie tables. And then you can see we're actually getting a 403 forbidden. So it's not a 404, but it's a 403. Because we cannot find an index dot HTML file in here. Now we do not want to serve the index dot HTML. Instead, what we want to serve is the veggies dot HTML. So in order to do this, what we can do is we can actually add another directive right over here called try files. So by default, it's going to look for an index dot HTML. However, when we specify try files, we can say here try files, and we can specify a bunch of different bunch of different directories that we want you to try. So over here, what we're going to say is, hey, we want you to look for vegetables, slash, and then vegetable slash, and then over here, we're going to say, veggies dot HTML. So this is going to be from the, the root path. So vegetable slash veggies, HTML. So look for this file. So if this file exists, then go ahead and use it. So use this file indeed. Now if this file does not exist, though, we can also say here is, well, use the, you can say use the index dot HTML. So this is going to be this file right over here, right in the default. So that's going to say, Hello, my friends, I am from nginx. Now, if none of these exist, then what we want you to do is just to just throw a 404 error. And so let's actually go ahead and give this a try now. So I'm going to say nginx reload. And now you can see now we have lettuce, eggplant and onion. And so what I'm going to do now is I'm going to change this. So let's say I change this to veggies with a Z. So what it's going to do is it's going to try to find this file. And if it can't find this file, then it's going to use the index dot HTML that exists in the root. So now if I refresh, you can see Hello, my friends, I am serving from nginx. Now if I can't find neither of these, it's going to throw a 404 error. So let me just quickly go ahead and maybe just rename this to let's say indie. I'm going to rename them back. Now you can see we're getting a 404. So that is the premise of try file. So let's go ahead and just rename all of these back to veggies dot HTML and HTML is all good. Another thing that we can actually do is we can actually have regular expressions to these location context. So over here, let's say I have a location, and I have maybe a pass count. And then and then over here, I want a specific number. So what we can do here is we can say from zero to nine, you can add any number. And in order to actually specify this, we can say tilde star as a regular expression. Now over here, what we can say is, well, I just want you to take me to the root of the website. And we can just add a try file right over here. So it just takes us to the index dot HTML. So I'm gonna say try file index dot HTML. And if that doesn't exist, just throw a 404. So now what we what's going to happen is anytime we go to slash count slash four slash count slash five slash count slash six, is going to redirect us to the index dot HTML in the root directory. So let's go here and let's just do a quick reload. And if I were to go to slash count slash five, you can see, now we are redirected back. If I go to two, again, we're redirected back, because now we have this really awesome, regular expression. So I think that pretty much sums up the location block the location context, pretty important to learn because it is heavily used inside of nginx. Alright, everybody, now that we have explored the location block, let's go ahead and talk about some more advanced concepts, specifically redirects and rewrites. We're going to start with redirects because they're relatively simple. So I'm going to go right over to the nginx configuration file. And let's say what I want to do is, whenever you go to slash, I don't know, let's just say slash crops, I want to show the stuff that is inside of this file right over here. So one way of doing that is of course, adding another location block, but we've already done this. Instead, what I want to do is whenever you go to slash crops, I want to redirect you to slash fruits and then show the HTML file in this route. So how are we going to do that? Well, really, really simple, actually, this is going to be another location block. So I'm going to say location. And then over here, I'm going to say that this location block is going to be slash crops. And then I'm going to say return. So I'm going to go ahead and return early this time, I'm not going to specify a route. And I'm going to return a 307. So this is a HTTP code that is going to redirect the user. And we're going to specify that we want to redirect to slash fruits. So let's go ahead and copy this and let's go ahead and reload our nginx configuration. And now what I'm going to do is I am going to go to slash crops. And now you can see we get redirected to slash fruits. And if you look at the URL, I just went ahead and copied it, you can see that whenever I go to slash crops, it will always redirect me to slash fruits. What if, however, I don't want this behavior whenever I hit slash crops, I wanted to stay at slash crops, but forward me the HTML inside of that location context, instead of the fruits location context, how are we going to do that? Let's actually look at another example. So right over here, we have this context right over here slash count slash number. Let's say I want to have another location block or another endpoint that is slash number, and then slash whatever the number is, and I want to forward it to this location context here. However, I want the URL to stay like this and not essentially change to slash count slash the particular number zero to nine. So in that case, what we're going to do instead is a rewrite rather than a redirect. Now, for a rewrite, we do not have to specify the location directive or the location context. Instead, we just have a rewrite directive. And then over here, what we can say is, well, I want number. And then after the number, what we can do is we can just wrap this in braces. And over here, we can say the back bracket w plus, and this is just a variable over here. And then what we can say is we want to rewrite this right over here. So number slash whatever to count slash. And then over here, we can say dollar sign one, which is just going to be the variable. So dollar sign one. So this right over here is going to be this right here. And then we can just close it off like so. And that's all it is that we really need to do. So let's go ahead and just do an nginx reload. And now what I'm going to do is I'm going to go to number slash, let's say three. And you can see numbers slash three stays exactly the same. However, we are essentially getting redirected to this because what we're doing is we're relaying this index dot HTML file. In this very last section, let's explore how we can configure nginx as a load balancer. So let's remember exactly what I mean about a load balancer. When our application starts getting a lot of users, what we need to do is scale our application. And the best way to scale our application is just to build multiple servers within our infrastructure. Now this obviously presents an issue, how is the client going to make the request to the server and which a server will it make the request to. So this can get really complicated. And that's why we have nginx in the middle. So instead of the client worrying exactly where to make the request to, it's just going to make a request straight to the internet. And that's going to be caught by nginx. And then it's nginx responsibility to forward that request to any particular server that it chooses. And this is typically done by a specific algorithm. Now the most common algorithm is a round robin algorithm, where, well, the first request comes in, it just forwards it to this server and then sends it right back. Then the next request comes in, well, already sent it to this one, that's going to send it to this one over here, this server and then forward the request back. And then it's going to go ahead and send it to this and then send it and forward the request back. And it can just keep going back and forth in a round robin approach. Okay, so that is what we need to configure. Now in order to do this, what we're going to need to do is actually build a well, we need to build multiple servers. And the best way to do this is through Docker, because Docker allows us to build a server containers that are completely isolated, we can actually spin up as much as we want. So that's what we are going to do. So we're going to build up a Docker container right over here. So if you're unfamiliar with Docker, and if you don't have Docker installed, that is a okay, you can just follow along. But if you do, I'll have some resources below. I also do have a Docker crash course. Alright, so what I'm going to do here is I'm going to create a brand new directory, and I'm going to call this just server. And then in here, what I'm going to do is I'm going to create an index.js. And then let's go to our terminal. And then I am going to do CD. And I'm going to move into that server directory. And I'm going to do NPM in it to initialize a node application. So let's go ahead and let's do empty NPM in it dash y. And then what I'm going to do is I'm going to go over here, and I'm going to just say NPM install Express, because that's going to be my server. So let's go here. And now I'm going to say const express is equal to require express. And then let's go ahead and do const app is equal to express. And then over here, I'm going to say app dot, let's just make a guest request here. And then I'm going to say that this is going to take in the rec and the res. And it's going to just respond with I am a endpoint or something like that something silly. Lastly, what I want to do is I want to app dot listen. So I'm going to say listen on port, let's say port 7777. And then over here, we can have a callback, we can say console dot log console dot log, listening on port 7777. So very, very simple, node application. So in order to actually start this up, what we can very simply do is we can just say node index dot j s. But a better way to do this is to go over here to our scripts. And then right here, we can say start a new script, and we can say NPM run start like so. So let's just say NPM run start now. And we should start up the server, let's give it some time. The server should start, come on, come on. I was expecting the console log, but let's actually go ahead and see if this server is running at this point. Let's go here. And of course, I'm checking MBA scores. So let's go here, let's go to local host 7777, I believe it was. And the server cannot be reached. Oh, okay, of course. So this should be node index, it shouldn't be NPM run start. This is my fault for rushing. There we go. Now listening, listening on port 777. There we go. I am an endpoint. So now what we need to do is we need to actually write a Docker file for this application. This is how we're going to build an image and spin up multiple containers of our image. Again, if you're unfamiliar with this, it's a okay, I'm actually just going to go ahead and just research Docker file for Express app, just so we don't have to build it out ourselves. So let's go here. Let's go here. Let's see. Okay, so this is looking pretty good. I'm going to go ahead and just copy this. And I am going to go over to here, and I'm going to say Docker file. I'm going to paste in this Docker file configuration. So what is going on here? So let's change this to 777. So the first thing that we're doing is we're specifying a a in an image, a base image. So it's going to have the basic configuration with just the basics of node and NPM and stuff like that. Then what we're going to do is we're going to specify a working directory. And then we're going to copy the package dot JSON. And then we're going to do an NPM install to install all the dependencies, then we're going to copy everything. And then over here, we can either do node, index.js, or we could do NPM run start. So let's go ahead and do that. NPM run. Start. And that's pretty much all it is that we need. Again, if you're interested in learning more about Docker, I do have a Docker crash course that covers all this stuff in great detail. But now what I want to do is I want to spin up, let's say, four different containers that have this particular application. So let's go over here. And what we can do now is, well, we first need to build this image, this shouldn't be a very long thing. So let's move into the server directory, I'm going to say Docker build dot, I'm going to give it the tag name of, let's say, my server, something like that. So let's go ahead and wait for this process. Now, as this goes, what you can actually do if you have the Docker utility tool, so you can go over here to Docker. And I actually have a bunch of other apps spined up, let me go ahead and remove them. Because they're all running on the ports that I probably want to run on. So these are these are the containers, what we can do now is we can actually go to the image. And we should see my server eventually pop up here. So we got the node app, let's go back over here, it's taking its sweet time, but it should pop up right over here. Let me zoom in, I guess it's not possible to zoom in. So yeah, so this is a tool that you get, which is Docker desktop, in order to see all the images that you have, as well as all of the different containers that you're running, as well as some other really cool neat things. Now, this is going to take some time. So I'm probably just going to pause the video, and I'll meet you back. So it seems like it's all done. Now that we have built the image, what we want to do is run containers based off that image. So to do this, what we can do is we can do Docker run. And then over here, I'm going to specify the ports. So remember, this application was running on port 777. So I should go ahead and close it from here. So what we can do here is we can actually do port mapping. So I can say, even though the container is running on port 7777, I can map it to port 1111 on my machine. And this is how we can spin up multiple instances of our app. So over here, I'm going to say port 1111 is going to map port 7777 inside of the container, I'm also going to run this in detached mode, and I'm going to specify the image that we have just created, which is my server. So let's go ahead and do that. And now what should happen if we go to our tools and go to container, we should see we have a container running on port 1111. And if we go on local host 1111, we should see I am an endpoint. So our server is running. Now we can do the exact same thing over here. So I can say this time 2222. And then over here, we can say 3333. And then lastly, I can say 4444. Alright, so this is looking quite nice. Now what is it that we want to do? So now let's go back to our nginx configuration. And now what we want to do is we want to add a load balancer. So whenever we hit port localhost 8080, I want to hit one of these servers. And then whenever I make another request, I want to hit the other server and then the other server and the other server, I want to round robin across these four different servers that I have created. So let's actually go right here to our configuration. And what we're going to do here is we're going to remove the route because once we hit the slash route, so just a localhost 8080 without any path, we want to serve our back end. So over here, let's just go ahead and get rid of this this route for now. So I'm going to go ahead and get rid of that route. And actually, no, we're not really know what we can actually leave the route as is. Instead, what we can do here is we can say location dash. And then whenever we hit this, we're going to specify the round robin. Now, right after right before the server context, what we're going to need to do is we're going to specify our backend. So I'm going to say here, upstream, and then I'm going to call this backend server, we can call this whatever it is that we want. And this is going to be a context. And then in here, we can specify all of the different backend URLs that we have. So well, we have 1111, we have 2222, we have 3333, and we have 4444. So over here, we can say 127.0.0.1. And then I can say colon 1111. And then I can do the exact same thing. So over here, let's just go ahead and say 2222 3333444. And then over here, what we can very simply do is say proxy pass. And then I'm going to specify HTTP colon dash dash, and then this back end server. So this name is important, you have to go over here, we're going to say backend server, dash, then we're going to close it off with the semicolon. And so by default, what this is going to do is it's going to round robin anytime we make a request to slash, it's going to round robin to this server, then this server, then this server, and then this server, and it's going to move back to this server, move back to this server, etc, etc. So that's pretty much all it is that is going to do. So let's actually go ahead and give this a quick go. So I'm going to do the nginx reload configuration seems fine. Now when I hit localhost 8080. You can see here, I have to just quickly do a refresh, you can see that it hit I am an endpoint. And then if I enter it again, it's not really visible here, maybe we should have added a log, but it is indeed round robining across all of the different servers that we have up. Again, you're probably gonna have to just take my word for it. But it is indeed doing it. Alright, so that pretty much sums up this nginx course. I hope you guys enjoyed it. And I'll see you in the next one.