Welcome back to the Knowledge Portal Video series.
In the last chapter, we already looked into the basics of static assets and why static assets are used.
So today we'll be implementing static assets in our Nginx proxy server and we'll look into how it can
improve our performance.
So just revising again on what was the scenario.
So this is the scenario without static assets where the client.
Send a get request for index.html.
This get request comes to the nginx proxy.
It then sends back it to the upstream server and the upstream server will.
Fetch the index.html and send it back to the reverse proxy and reverse proxy in turn sends it back to
the.
Web browser.
Now the index.html has six files over here.
So that means for each of the six files.
The web browser will.
Send a get request.
So total in total there will be.
Seven get request.
Which the web browser will have to make in order to retrieve the whole index.html.
Now, this was the earliest scenario.
And if we look into the better scenario where the static assets are implemented, what we are actually
doing is we'll take all the static content and we'll move it to the Nginx reverse proxy server.
This is called as static assets.
And here what will happen is for the six requests.
For six requests, which are the static assets.
The response will come from the Nginx itself.
And just for one request, which is index.html, the request will be moved to the upstream server.
So.
In a lab setup.
We have two servers right now.
So this is the Nginx reverse proxy and this is the upstream server.
So I'll say reverse proxy over here and here I'll say upstream server.
Now there'll be a test domain.
College captain.
The name open in Italy.
It will move to the reverse proxy and from there it will go to the upstream server.
Now.
For the index.html.
For this particular website, there will be around 40 to 50 get requests which will be made because
there are a lot of contents inside the index.html.
So this will be the first normal scenario.
In second scenario, what we will do for the static contents.
We will move everything to the reverse proxy and then we will see the logs and see on how much improvement
we have made.
So let's see on how we can implement this.
So I'll go to our favorite engine X machine.
And this is the reverse proxy.
This is machine one and this is machine two, which is the upstream server.
So let me show you the.
Configuration file.
I'll say Etsy, Nginx conf D.
CPT Conniff and here for servername in it is doing a proxy pass on the upstream server.
And this is the simple configuration file.
If I go to the upstream server and let's open the configuration file here itself e.t.c. enginex conf.d
conf and in the upstream server for server name kept in the root is var websites.
So if I just do a ls on var dub dub dub.
Websites.
So these are all the website files.
Now.
Let's.
Open up a web browser.
I'll close this up.
Let's open a new session of web browser and let's try to open Captain.
So before we do that, I'll just let me go to var log Nginx.
So we have access, an error log.
Let's empty both of them so it will be much more clearer to parse them.
I'll say f asterisk.
So this is access and error log.
So let open in.
And this will essentially open the knowledge portal in website.
Now, if I go back to the logs, you see there are so many logs generated.
So this is something that we already looked into the PowerPoint presentation.
Just to load a simple index.html file.
There are so many dependencies of JavaScript or image that are present in there.
And this is what we want to improve upon.
So what we will do is.
If I go to dub, dub dub websites.
And so this is the whole website file.
So what we can do is there are a lot of CSS image and JavaScript files.
What we can do is we can move all of these files to the reverse proxy and.
We remove it from the year.
Now what I've done, I have copied this entire folder to the reverse proxy.
So if I go to my desktop.
And this is the entire folder.
Now, we won't need the entire folder.
All we need to do is we want to move the static assets here.
So what we'll do, I'll go to nginx, I'll see nginx dhcp conf.
Oops, I'll do a nano.
And let's add a location block.
Say for location anything that ends with CSS or JavaScript.
Or see Jpeg.
Or JPG.
Or maybe even PNG.
I'll say root is equal to dub, dub, dub say assets.
And I also include a dry file block.
So what I'm essentially saying to the reverse proxy is if any file that ends with CSS, JS, Jpeg or
PNG, try to give the response from this particular folder.
So I'll save this particular configuration and let's create that folder for dub dub dub assets.
Now we'll move the static contents to this particular assets folder.
So I'll say CPR, we'll move CSS, we'll move image, we'll move JavaScript as well.
And let's move Master.
As well as vendor to the dub dub dub assets.
Great.
Doing a little on dub dub dub assets.
Now we have all of the static files over here.
So now whenever the request will be made for CPU in, the dynamic files will be fetched from the Or
the index dot.
HTML will also be fetched from the upstream server.
However, for all the files related to stylesheet, image, JavaScript etcetera, it will be fetched
from the local assets folder itself.
So let me do next to check if the configuration is proper and it is not.
Let's open conf.d and we are missing.
One.
Okay, let's verify once and it is successful.
So let's let me reload the nginx and everything is set.
So essentially now we have moved the static assets to the reverse proxy itself and we will test the
logs again.
So I'll go to war.
Dub.
Websites.
So let's go to var log nginx.
And let's do a go again on both the log files.
An error log.
And along with that, what we were doing was I went to websites and let's remove the.
Static assets that we have moved to the.
Reverse proxy machine.
So I've deleted those static assets.
And now let's do a tail again.
So I'll go to var dub dub dub Nginx.
Sorry, var logs Nginx.
And let's do a tale.
Now if I open.
Oh, let me refresh.
Captain.
And essentially.
What has happened is the amount of requests that you see over here has decreased considerably from what
it was previously, and you can decrease it much more further by moving more static contents to the
reverse proxy.
And essentially this will do the job for you.
Now, static assets is something which is implemented in most of the enterprise related websites or
the websites which has getting a lot of traffic.
Nginx is also very, very good in serving static contents.
So ideally if you have a two node server then it is better to move everything to the Nginx reverse proxy
itself and let it do the magic.
So this is it about.
How to move the static assets to the Nginx reverse proxy.
I hope this has been informative for you and I really urge you to try this once because it is very important
that you try it out and this will help you have a clear concept itself.
So this is it.
I hope this has been informative for you and I'd like to thank you for viewing.