How the Internet Works for Developers - Pt 2 - Servers & Scaling

Key Takeaways

hey this is video two of how does the internet work from a web development perspective uh if you're just jumping in now go back and watch video one I'll put links around for that and let's get into what does the server world look like from a web development perspective how does the internet work from the backend perspective of the internet so we we narrowed it down the basis of the internet is browsers or clients sometimes they're called clients are making requests to your server and my server is going to post back respon my server is 100% responsible for what those responses are you could say give me google.com and my Google server could give you an image right you could say mysite.com and my site could just give you back a CSS file every time I'm in control of what happens let's look at how that actually works let me go ahead and drag over don't get confused here if this looks a little freaky this is what I will call a basic website server configuration now there are tons of different kinds of server configurations um if you went to say host skater and sign up for a website package you're going to get what's called a c panel C panel sits on top of your server it's software that manages some things for you and here's what it's setting up for you is they're going to set up an Apache web server uh you're going to get probably a lamp machine lamp is it's running Linux it's using Apache for the web server MySQL for the database PHP for the backend language this is kind of the most popular for anything up to to Enterprise or you know anything up to professional level stuff if you want a basic website this is the way to go it's just easy Apache as a web server is very flexible it can do a lot of stuff but what it's most often used for is just basic serving up of files websites we call them so here's what Apache does Apache is the web server program that runs on your server this Square here represents this machine so this is my machine this is an actual computer plugged into the internet with an IP address and so Apache is set up to listen to Port 80 now don't freak out I just said Port what port 80 is is that's the default HTTP Port so if I went to http col SL slash if I could spell if I went to that IP address it's the same as going to that IP address colon 80 so the colon 80 gives it a port I can request Port 3000 uh but by default it's basically going to request Port 80 so the reason your computer has an IP address address but you can't go to that IP address and get your files is you don't have a web server program running it'd be very dangerous if anybody who accesses your IP address can just surf your computer that's terrible so a web server runs and it will listen to requests and it will kind of have access to certain parts so Apache is set up to listen to Port 80 and you configure different hosts to different folders if you remember from our example here I'm requesting google.com no path so when I request that my browser actually goes to the DNS lookup the DNS lookup sends me to my server so my server just gets a request to the IP address now but it still knows from my headers that you're looking for google.com so Apache knows ah mysite.com well mysite.com let's look in the sitm mysite.com www folder and so the basic Apache configuration is just going to serve you files from that folder that's it no smart stuff it's just going to give you files So when you say mysite.com it's going to go to the folder that's configured for that website and it's going to give you the index.html if it exists or the index.php if it exists that's pretty much your basic configuration so you could configure 10 different websites mysite.com yoursite.com our site.com and you could make them all look to this folder or you can make your site.com look to another folder on your computer you can make our site.com look at this folder and so that's kind of Apache can serve one server can handle multiple websites uh so you go to mysite.com it by default apache's website configuration it's going to look for the index file and you know if you give it a path say IMG logo2 well then it's going to look it's going to look at that path and say well does that file exist let's see if there's an IMG folder let's look in that IMG folder to see if logo jpeg exists hey it does let's send that back in the response and since that's a JPEG we're just going to be smart enough to give it a a content type of image/jpeg that's your basic Apache setup it's going to automatically grab you files and it's going to automatically set content types uh for you and you can configure the content types that you want to return so that's kind of your basic website setup if you get a website you're just building content for people that's what's going on let's look at something more complicated so clearly Twitter doesn't do this uh Twitter has to manage users and tweets and all that stuff they're not just handing you a JPEG file how does a a bigger company handle these things so they're running what's called a web application a web application server is set up a little bit differently so you've got your web application itself this will be Ruby on Rails or this will be if your PHP it will be laravel or code igniter or node.js um this will be net uh your web application right here is is set up to respond to stuff so let's say your web application is also listening to Port 80 uh let's say I've configured this to listen to Port 80 so now I'm going to get when requests come to my IP address from this machine uh this web application will pick up on them haha what are they looking for they're looking for twitter.com okay twitter.com is not my twitter.com homepage is not just a homepage it's not just an an HTML page it has all the tweets baked into it so what I'm going to do is I'm first going to go to my database which would be like my SQL or mongodb give me all the tweets from this user's timeline and now I'm going to go get my template I'll have what's called a template which says it looks kind of like HTML says head body but then it also says for each tweet spit out this piece of code and put the tweets information in it so then I'm going to template that together and then I'm going to to send that that template mixed with the tweets as a response I'm basically going to generate HTML on the Fly send that as my response back to the user and I'm going to set the content type as text/html so as far as you're concerned the user just gets HTML blah blah blah they don't care how it was made they don't care what framework made it they don't care if code igniter made it or if Ruby on Rails made it the browser just says here's what I got and the header the response typee is text HTML so as far as I'm concerned you gave me an HTML file I'm going to spit out an HTML file and so that's kind of how web application server works if you request it's also smart enough to know that if you request images logo. jpeg Ah that's just a file I can go grab that from the file system and send it back with a content type of imagejpeg and so it also will reply to JavaScript requests so say JavaScript makes a delete request uh Delete tweet id1 then your web application is listening to a request on mysite.com delete1 so or SL tweet1 delete request on that so if I send that request in delet tweet SL1 it knows aha that's that's got a method of delete so I'm now going to go find it in the database I'm going to send a delete boom you're out of the database I'm just going to send them a 200 okay no content back just a 200 okay response absolutely no content back JavaScript can pick up on that and say woohoo we deleted it and then JavaScript can make it go poof from your web page so that's kind of how your web application server has you're going to manage three different things you're going to manage templating of stuff and generating HTML on the Fly you're going to manage API which is Javascript talking to you uh JavaScript says delete Del this I don't need HTML back I just want you to delete this tweet and tell me it was done okay so oh okay delete request to this delete it from the database it's gone and it's also going to handle static assets it's going to handle serving up of images that never change uh you request this image I'll hand hand it back you can break this up into three applications one just for the HTML one just for the API one just for all the logos you can do a million different things with it but that's kind of how everything goes in the web application World um and so let's say what happens when this server starts getting so overloaded because your website is so popular it can't handle it anymore well you got two choices either upgrade to a more powerful machine with more RAM more processing speed all that uh and that will get you by for a short term but you're going to run out eventually Google and Twitter can't run this all on one big pimped out laptop they need something more powerful than that so what you're going to do at that point points is you're going to let me see if this will work okay that that got ugly um but what you're going to do is you're going to then run multiple copies of your exact web application so this is on its own 6345 I'm just making something up this is running on say your. two box uh it's its own machine with its own IP address this is going to be its own machine with its own IP address and this is going to be its own machine with its own IP address and then let's see if I can pull this out here gotcha then you're going to actually this will be a machine with its IP address here um and you will run a load balancer which sounds complicated but it's really not uh what's the let's just make some up 34 dot I'll say one so this your DNS for mysite.com points to your load balancer now so you go mysite.com DNS points to here this guy is going to keep track of how each of these guys are doing and he is going to real time send traffic to each box um each web application in the Box um so if you've got your first user will go here your second user will go here your third user will go here and then depending on how this is set up different load balancing programs handle it different some will always go one two 3 one two 3 one two three some will look at keep a track of who's the busiest and send people to the server that has the most capacity so then it's called scaling your website then say your users are getting more and more and more you just add another server in there a five server configure this guy to also have a five server that he processes request to and boom and so you just keep adding servers on and you have to figure out at that point a deployment process so how do I actually send this code to all the servers in one command and that can get a little fun but that's basically what the backend side of things looks like I probably covered a ton if especially if you're new to web development this is a lot of information uh but that's basically what the backend side of things looks like and now you're free to start messing with the server technology Ruby on Rails nodejs PHP laravel you know whatever you want to get into now you're free to get into it I hope this was a help to you and uh if you have any questions stuff that just isn't clear feel free to leave comments below all right have a great day