Installing and configuring NGINX as a web server and reversed proxy

in this demo we will have a look at engine x and using nginx as a proxy or a reversed proxy in front of our server applications so let's first off start by looking at the end goal so this is kind of what we want to achieve on our computer or on on our css cloud computer the red one in this case is illustrating uh this is cloud computer and what we need to notice about those computers is that those are open to the world so they are publicly accessible over the internet and because of that we have tried to to keep their footprint as minimal as possible when it comes to open ports so by default the ports that are accessible is the port 22. port 443 and port 80. so port 443 and 80 because we want to use this as a web server so we need to be able to access those ports and port 22 so that we are able to access the computer using ssh however if we were to create our own applications inside of this server and start applications on different ports the applications will start however they will not be accessible from the outside world so if i were to to spin up a node application on port 5050 that application will start however if we try to to to to enter our address colon 5050 we will not get an answer because the firewall is blocking that port this is where engine x com comes in and we can use any nx as a reversed proxy so what we will do is to install nginx and we will configure it so that it listens for port 80 and port 4 for free in the long run and as soon as something is coming into this port ndnex will look at the traffic and decide what to do with it so we can route this traffic to for instance our node application running on port 5050 or another running on 5051 depending on what url is being used we could of course also do this by by having sub domains to our cloud computers however that's a more advanced topic uh that that that is required that we we use uh dns and have control over the dns and we don't in this case so we will have to do with routing the traffic using just the url part or the path part of the url so in this case uh the browser is is heading for lnu.sc or the cs cloud 244l new dot se for instance and the next we'll look at the traffic see that this is going to the root of of the application and it will route it to port 5050 and the application running on port 5050. if you write for instance gitlab it will notice that this is a different url and it will route it to a different application for instance some application running on port 5051 and we can also of course install docker on that server have the application running in a docker environment uh with an exposed port of for instance 5052 and then route some traffic to that one internally inside of docker it will utilize for instance port 80 but that is just inside the docker container um so this is kind of what we want to achieve another advantage of using a reverse proxy like engine x is that we can add the the certificates for https in the ndnx and that will handle it for for for every application so if we are installing more applications on our server we can just route it internally using http there is no need to have https in in internally since i mean if you control the server you will be able to listen in other traffic anyway using https internally on the server is just adding performance issues because that then we need a lot of of uh decrypting and encrypting messages all the time so we can have it like this https over the public internet enginex is responsible for the certificates and then it just process it forward to to over hdp internally so we will set up this we will not look in at https in this step we'll take that in the next step however so let's start off by installing engine x and of course you can go to ndx.com and have a look at the documentation for how to do this but it's it's it's really simple so we will start off by by ssh into our our server like that and now as usual when we try to install something new we should always do and sudo apt get update just to to get the latest references to the latest packages like that uh now let's install uh nunex and it's it's a quite simple project since we're using apt-get to do this so sudo apt-get install engine x like that and it shouldn't take that long just let it finish the neat thing with engine x is when it's installed it's also automatically started as a process so so so right now that the engine x is actually running on our server and we can have a look at the version for engine x by doing antenna x minus v and we are currently at version 1.18 we could also have have a look at the status of of enginex by doing system ctl status engine x i don't think we need service i think it's like that yeah so it's active it's running basically so we quit that one first of all we could have a look at our server and see what it serves so 198 well what was it 194 force 47 177 216 i think it was so it says welcome to engine x so this is actually alive and kicking and serving pages on this ip address we can also see that it's not secure we're not serving this over https at the moment of course we can also try to uh do a we can actually do an ns lookup just to uh to learn that command so if we want to know what dns name is corresponding to this hyper ip address we can do an ns lookup by providing our ip address like that and we can see that this name is cloud 7.216. so we can replace that one by by that the nest name and we see with that we we will basically come to the same same site so everything looks like it's up and running and now we need to do some configuration of the engine x so and your next config files are located at uh at the folder uh and you next on the e2c and the config file there are basically three types of config files that are working together so the first one is uh and we can have a look at that one uh it's called ninex.conf in this one basic things about http and which ssl protocols we are utilizing and things like this is set up we will not need to of course we could go in on all the things in this file if we like we can even add our routing in this file we see some examples down here on the mail for instance how how you can route things uh we however we will leave this file as is uh if we look at the virtual host configs that are the ones that we will have a look at uh they are located in two different places so basically what then x is doing it's looking in the conf d folder for any dot conf file so if we place a dot conf file in this folder ndnx will include it and execute it if we include anything under that backslash the slash sites enabled folder uh ndnx will look at those as well if we were to to to have subdomains i would recommend adding a configuration for each subdomain in the site's enabled folder or not in the site's enable folder actually how this works is i can show that if we do an ls we can see that we have two folders uh here we have the sites available and sites enabled if we look look in sites enabled we will see that we have something called default so this one is actually being used the default if we looked at size available we will see the same thing note that take note of the color though so so what this default file is is just a symbolic link to this folder the site's available so so when whenever we want to edit or add configurations we can add them to the site's available folder and then we could in the site's enable folder create a symbolic link to point at files in the sites available folder by doing that we can have a lot of sites available that are not activated yet and as soon as we want to activate it we just make a symbolic link into the sites enabled that means that we can also just remove files from sites enabled because they are only symbolic links so we can actually do that so if i go into sites enabled and we can have a look at the default the little like that we can see that in this one we have a lot of uh information about how to write server blocks uh for our configuration in this case it's like listening on port 80 if that does some things with pointing at a root folder for for storing our files it has a server name and a location and this location block is saying basically that serve any frame from the root directory it from this folder the var vvv.html for the server named in this case the underscore is just you can add whatever in that case it's just an invalid domain name so this is not active right now however if we were to to activate it using our domain name uh cs cloud 7 dot lnu.c then this will become active in this case i mean you can you can go in and alter this default if you like that is totally fine we can do all the configuration in this one however we will not do that and i will just to show remove this default site like that so now we have nothing in the sites enabled if we go back and look in um sites available instead we have the default file there so if and i guess that i've actually not tried this so to reload engine x you can do that in in a couple of ways the simplest way is he has to do a pseudo service nginx uh reload reload will not take will not restart and the next will only reload the configuration uh so that is totally fine for now and it's quite it's quick and it will not interrupt the traffic to to the ndnx um so whoops if we reload this one where are we when i remove the default site it says now that the site cannot be reached anymore because since we removed this default server block so right now we don't have any a configuration anymore if we were to go to sites enabled uh and create a symbolic link back to this site available folder you do that by the command ln minus s for a symbolic link we need to point to the absolute path of that file engine x sites available and it was called default and where where do we want to add this to we want to add it to etc engine x sites enabled and i don't need to write the file name if we look in this case we have the default file back and now we need to do a sudo reload engine x and refresh this page and we are back um yeah so that that's the first step so i will actually once again remove this one uh well default and i will just reload so that we know that we are in the correct stage and we are and i would add my configuration to the conf directory instead so we will go into the conf directory it's empty and now i will create my configuration from from scratch so i will do that by by creating a file and we can do that by just editing a file name in whatever file we would like i would like to name it cloud cloud 7-216.lnu.sc.com remember in the in the conft directory we need to add the the extension conf for for any next to look at this file so i i basically name it the name of the site so so if i have multiple sites in this configuration it's it's easy to to control them all um oh i forgot now no to edit it and create it uh okay i will start off by actually copying pasting some commands because it will take me a while to write them down so let's just have a look at this one so well oh wasn't that good whoop it's not sensitive off of the tab and the spaces so so don't it's not like yaml where you need to be observant of of the tabs but so what enginex is working with this is server blocks uh in this case i will add a server block for my and i tested this on another server so that's why um i am adding a server block for the server named cs cloud 7 216 lnu.se so this server block will be active when you go to this address basically and not if you have multiple dns names you can you can just add them as server blocks what is this server doing well it's listening on port 80 for for normal web http traffic and it's also listening on port 80 on ipv6 but we don't need to care about that we just add it and it's trying to find index files in which a folder on our ubuntu machine on the var vvv folder we will have a look at that soon and maybe we could actually do it like this we added because this was the default then i will remove this one um don't care about the this location just yet uh just have a look at this one so we are basically telling when we are going to the root try to find files in this root folder uh if if we are not finding the files uh try to add a backslash if it's a folder and if you can't find it then then just return a 404 that this file wasn't found so let's try it out i will save that one i will do a reload of the service we could do that one uh it says forbidden and that is basically because i am trying to well let's have a look look at this folder so i will go into var vvv this folder is created by nginx and you can see that it has an html folder uh like that and we have some kind of index.next.debian.http and that's just an indication that this file is actually not the one that is being served on a ubuntu system because that file were located somewhere else however in this case when we have taken control we can add the files to this var vvv folder and i will rename this index file to index.html and we will need to do sudo so i renamed that one we can try to reload this page and now we can see that we are actually accessing this index file uh and hello instead of welcome engine next week and of course do a simple hello world and that one save it no need to reload engine x when we are just adding different content to the html files and now it says hello world so this is actually the ah this is actually the file that we are trying to to access um okay going back to uh we will edit our configuration file once again that one so in this case i have the root folder in the html however if if i would like to add something else to this server it could be a nice thing to actually uh have like a location crude in this case so so if i were to do crude for a crude application just an example you can name this of course whatever you like but i will go with could and have that being served from another folder different than the html folder then we could actually add another root here and say that okay the root for for this is var uh var vvv like that so so then it will recognize that okay the root folder is the vvv folder and inside of the vvv folder it will look for the crude folder as well exiting that one reloading it's far away reloading that one and adding a folder uh called crude sudo make directory crude go into the crude folder whoa index.html [Applause] [Music] hello again i will not write a lot of html in this one save it uh hopefully if we go to this slash crude folder we will get the hello again so now the crude folder is is in in like one application in the vvvv crude and the root is in html instead so so now we can differentiate between the applications and that meaning that in this this folder we could actually go back to how we worked with node and npn and uh in this one i could just remove uh the index.html and we can do a actually we just create a app dot mjx um writable sudo nano app.mjx add a simple simple web server running uh wow come on like that uh on port in this case if we go back to to do this one we could try to replicate uh 5050 for instance we could use 50 50 for this one the important thing when you choose a a port in this case is that you are not allowed to choose ports between 1024 if i remember correctly so it's often that you use like 50 60 70 80 uh 88 this is a classic classic example i will not i will do hello world from node in this case and i'm forgetting one thing actually so yeah so i saved that one and now we have an app.mjx in this folder but when we are trying to reach that crude folder like that no is that the wrong machine crude uh yeah now it says forbidden because we don't have an index html file so so what this configuration that we have written is trying to do [Music] is to just serve static files from this crude folder however when we have a node application it's not static files that we want to serve we we want to we create our own web server so so we want we don't want the web server in ndnex to be active we just want nginx to act as a proxy and not not not just fetching the files for us so what we need to do then is to to actually configure nginx to be a proxy instead and we do that by removing this root var direct directive and instead use the proxy pass directive so we add a proxy pass what one to what url do we want this to to uh to proxy to well if we have a look at this one we want the nginx to proxy to the local host over http and port 5050. so proxy passed to http colon localhost colon 5050 and a c mycolon semicolon to to end that row and we save that one now we need to reload our configuration file once again and hopefully it's always a little bit tricky hopefully it will say yeah not founded i thought i would actually should have gotten a bad gateway oh that is not good uh well let's see if we can get it to work what have i done wrong it's it's it's good that it's not working because we don't have any application running uh at the port 5050 however it shouldn't say not phone it should actually say bad gateway uh well i will try to just start this application nano app dot mjx sorry the node it's too close uh we start that one we get a warning module uh ah we need to do a uh no type module in the mjx extension mjx oh i'm sorry uh why did i name it that sudo app mjx to app dot mjs of course and nothing else move like that okay node app dot mjs instead and it looks like it's actually running now that's a good thing however not think that will work actually huh i will need to just take a quick break oh well you have probably already guessed what was the problem uh i forgot this line right so so what was this one is telling us try try to find the fights however when we are using a proxy we are not trying to serve static files so we need to remove this line as well so by doing that saving reloading and as you can see now we get a bad gateway and that is indicating that we are actually correct and using and in excess of proxy since it's it's it's it gets the request it's just not that it cannot proxy it forward because that port 5050 is not it's it's a bad gateway basically it does not respond so let's once again start up the node application uh node.js it's up and running on port 5050 and since that one is up and running it's responding and it's now hidden hidden behind this url so if i go to this one we are serving static files from the html directory and in this case we are using enginex as a proxy to proxy it to the node so so we are basically doing doing this um okay uh when we are doing uh when we are trying to to proxy something like this if um yeah of course we we shouldn't run node we have already discussed this but if i run node like this i need to to cancel it and now we will once again get a bad gateway so we will later on have a look at how to start node in a proper way however looking at the configuration once again if our um crude this application if this one were to use websocket we need to add some additional lines to to tell the proxy to to forward the upgrade traffic remember when you're using web sockets you are upgrading from http to websocket and in order to do to be able to do this we add those li i can actually copy them basically whoops making sure that we can proxy the the upgraded traffic yes http version 1.1 i will get back to the http version in a later recording proxy set header upgrade to the variable http upgrade proxy set header connection upgrade by doing this we will allow the screwed application to actually uh work together with websockets so so that can be a good thing to remember to to to add that to to your file um just test that it works looks like that this one is still not working of course and this one is is answering uh if you want for some reason restart engine x i mean when we are in development mode doesn't really matter it just takes a little bit extra time but if if you if you find yourself in a situation where stuff doesn't make sense could be a good thing to just restart any nx as well just to make sure that everything is like restarted and up to date i think basically that is it uh well one more thing actually and that that comes down to to serving web manifest files if we are writing pvas so let's go to the configuration folder um and have a look at the mime types so so the the file uh um no no mime types so so so this file is actually telling what mime types will be used for different kind of files so so of course we have the all the regular files that we like ping e should be served with this mime type css files html files javascript files json files and whatever but i don't think that the web manifest files are present in this one and web manifest files of course you can serve them as application.json that is totally fine um however let's see where to add it well i'll i'll actually add it to the top so that we have it where all the other files are and and the web manifest file should be served as application slash manifest plus jason and the extension is that we will use this web manifest as i said of course you can serve your web manifest files as dot json files and then they will get the extension or the mime type application slash json and the browsers will accept that however if we are want to do it according to standard we should serve web manifest files as application manifest dot plus json and then we could add this one save that file and we reload the engine x and everything is still working however now we have also added a mind type for for for our pvas to be served

Channel: Computer Science LNU

Views: 1,508

Rating: 4.4285712 out of 5

Keywords:

Id: 9GYAJqdLIas

Length: 33min 58sec (2038 seconds)

Published: Fri Dec 04 2020