WEBVTT 00:00.230 --> 00:02.960 Welcome back to the Knowledge Portal Video series. 00:03.380 --> 00:12.080 In the last chapter, we already looked into the basics of static assets and why static assets are used. 00:12.380 --> 00:20.150 So today we'll be implementing static assets in our Nginx proxy server and we'll look into how it can 00:20.150 --> 00:21.470 improve our performance. 00:22.640 --> 00:27.590 So just revising again on what was the scenario. 00:27.680 --> 00:31.340 So this is the scenario without static assets where the client. 00:32.140 --> 00:34.690 Send a get request for index.html. 00:34.900 --> 00:37.870 This get request comes to the nginx proxy. 00:38.440 --> 00:44.230 It then sends back it to the upstream server and the upstream server will. 00:45.630 --> 00:53.400 Fetch the index.html and send it back to the reverse proxy and reverse proxy in turn sends it back to 00:53.400 --> 00:53.820 the. 00:54.880 --> 00:55.840 Web browser. 00:56.650 --> 01:01.270 Now the index.html has six files over here. 01:01.420 --> 01:04.270 So that means for each of the six files. 01:04.810 --> 01:06.790 The web browser will. 01:07.860 --> 01:09.180 Send a get request. 01:09.180 --> 01:12.210 So total in total there will be. 01:13.530 --> 01:15.000 Seven get request. 01:16.010 --> 01:22.490 Which the web browser will have to make in order to retrieve the whole index.html. 01:24.270 --> 01:26.340 Now, this was the earliest scenario. 01:26.340 --> 01:32.580 And if we look into the better scenario where the static assets are implemented, what we are actually 01:32.580 --> 01:40.740 doing is we'll take all the static content and we'll move it to the Nginx reverse proxy server. 01:40.950 --> 01:42.960 This is called as static assets. 01:43.290 --> 01:47.760 And here what will happen is for the six requests. 01:49.520 --> 01:51.950 For six requests, which are the static assets. 01:51.950 --> 01:55.190 The response will come from the Nginx itself. 01:55.400 --> 02:03.260 And just for one request, which is index.html, the request will be moved to the upstream server. 02:04.740 --> 02:05.640 So. 02:06.660 --> 02:07.800 In a lab setup. 02:07.800 --> 02:09.720 We have two servers right now. 02:10.600 --> 02:14.980 So this is the Nginx reverse proxy and this is the upstream server. 02:15.100 --> 02:19.540 So I'll say reverse proxy over here and here I'll say upstream server. 02:24.690 --> 02:27.480 Now there'll be a test domain. 02:27.490 --> 02:28.950 College captain. 02:30.520 --> 02:33.310 The name open in Italy. 02:33.340 --> 02:38.560 It will move to the reverse proxy and from there it will go to the upstream server. 02:38.590 --> 02:39.670 Now. 02:40.560 --> 02:42.420 For the index.html. 02:42.450 --> 02:49.110 For this particular website, there will be around 40 to 50 get requests which will be made because 02:49.110 --> 02:52.530 there are a lot of contents inside the index.html. 02:52.800 --> 02:55.650 So this will be the first normal scenario. 02:56.250 --> 02:59.270 In second scenario, what we will do for the static contents. 02:59.310 --> 03:06.480 We will move everything to the reverse proxy and then we will see the logs and see on how much improvement 03:06.480 --> 03:07.410 we have made. 03:09.220 --> 03:14.170 So let's see on how we can implement this. 03:15.530 --> 03:18.050 So I'll go to our favorite engine X machine. 03:18.050 --> 03:20.330 And this is the reverse proxy. 03:20.330 --> 03:24.380 This is machine one and this is machine two, which is the upstream server. 03:24.680 --> 03:26.510 So let me show you the. 03:27.960 --> 03:29.310 Configuration file. 03:29.310 --> 03:33.240 I'll say Etsy, Nginx conf D. 03:34.470 --> 03:42.510 CPT Conniff and here for servername in it is doing a proxy pass on the upstream server. 03:43.960 --> 03:46.360 And this is the simple configuration file. 03:46.750 --> 03:55.360 If I go to the upstream server and let's open the configuration file here itself e.t.c. enginex conf.d 03:56.100 --> 04:04.560 conf and in the upstream server for server name kept in the root is var websites. 04:06.010 --> 04:09.490 So if I just do a ls on var dub dub dub. 04:12.030 --> 04:12.660 Websites. 04:13.860 --> 04:16.650 So these are all the website files. 04:18.300 --> 04:19.320 Now. 04:24.140 --> 04:25.190 Let's. 04:29.920 --> 04:32.610 Open up a web browser. 04:32.650 --> 04:33.780 I'll close this up. 04:33.790 --> 04:38.860 Let's open a new session of web browser and let's try to open Captain. 04:38.860 --> 04:44.230 So before we do that, I'll just let me go to var log Nginx. 04:46.060 --> 04:48.190 So we have access, an error log. 04:48.190 --> 04:55.540 Let's empty both of them so it will be much more clearer to parse them. 04:55.900 --> 04:58.150 I'll say f asterisk. 04:58.150 --> 05:00.460 So this is access and error log. 05:01.570 --> 05:03.940 So let open in. 05:10.110 --> 05:13.440 And this will essentially open the knowledge portal in website. 05:15.030 --> 05:20.620 Now, if I go back to the logs, you see there are so many logs generated. 05:20.640 --> 05:24.540 So this is something that we already looked into the PowerPoint presentation. 05:24.820 --> 05:27.960 Just to load a simple index.html file. 05:28.260 --> 05:33.900 There are so many dependencies of JavaScript or image that are present in there. 05:34.920 --> 05:39.150 And this is what we want to improve upon. 05:39.360 --> 05:41.070 So what we will do is. 05:42.710 --> 05:45.690 If I go to dub, dub dub websites. 05:45.710 --> 05:49.540 And so this is the whole website file. 05:49.550 --> 05:55.370 So what we can do is there are a lot of CSS image and JavaScript files. 05:56.010 --> 06:01.770 What we can do is we can move all of these files to the reverse proxy and. 06:02.600 --> 06:04.670 We remove it from the year. 06:05.060 --> 06:09.860 Now what I've done, I have copied this entire folder to the reverse proxy. 06:09.860 --> 06:11.660 So if I go to my desktop. 06:15.880 --> 06:17.770 And this is the entire folder. 06:18.040 --> 06:21.570 Now, we won't need the entire folder. 06:21.580 --> 06:26.570 All we need to do is we want to move the static assets here. 06:26.590 --> 06:33.560 So what we'll do, I'll go to nginx, I'll see nginx dhcp conf. 06:35.270 --> 06:37.010 Oops, I'll do a nano. 06:43.500 --> 06:45.960 And let's add a location block. 06:46.980 --> 06:54.720 Say for location anything that ends with CSS or JavaScript. 06:56.600 --> 06:58.850 Or see Jpeg. 07:02.230 --> 07:03.370 Or JPG. 07:05.130 --> 07:06.620 Or maybe even PNG. 07:10.460 --> 07:14.720 I'll say root is equal to dub, dub, dub say assets. 07:17.540 --> 07:19.820 And I also include a dry file block. 07:29.530 --> 07:39.550 So what I'm essentially saying to the reverse proxy is if any file that ends with CSS, JS, Jpeg or 07:39.550 --> 07:46.000 PNG, try to give the response from this particular folder. 07:46.990 --> 07:53.650 So I'll save this particular configuration and let's create that folder for dub dub dub assets. 07:56.740 --> 08:01.180 Now we'll move the static contents to this particular assets folder. 08:01.180 --> 08:08.350 So I'll say CPR, we'll move CSS, we'll move image, we'll move JavaScript as well. 08:08.800 --> 08:11.230 And let's move Master. 08:12.400 --> 08:16.900 As well as vendor to the dub dub dub assets. 08:20.520 --> 08:21.300 Great. 08:22.590 --> 08:25.590 Doing a little on dub dub dub assets. 08:26.040 --> 08:29.250 Now we have all of the static files over here. 08:29.940 --> 08:38.900 So now whenever the request will be made for CPU in, the dynamic files will be fetched from the Or 08:38.940 --> 08:39.620 the index dot. 08:39.870 --> 08:42.570 HTML will also be fetched from the upstream server. 08:42.690 --> 08:50.580 However, for all the files related to stylesheet, image, JavaScript etcetera, it will be fetched 08:50.580 --> 08:53.880 from the local assets folder itself. 08:55.170 --> 09:00.930 So let me do next to check if the configuration is proper and it is not. 09:01.890 --> 09:07.260 Let's open conf.d and we are missing. 09:09.530 --> 09:09.980 One. 09:11.690 --> 09:15.020 Okay, let's verify once and it is successful. 09:15.380 --> 09:19.650 So let's let me reload the nginx and everything is set. 09:19.670 --> 09:28.010 So essentially now we have moved the static assets to the reverse proxy itself and we will test the 09:28.010 --> 09:29.000 logs again. 09:31.590 --> 09:32.790 So I'll go to war. 09:32.820 --> 09:33.030 Dub. 09:33.030 --> 09:33.210 Dub. 09:33.210 --> 09:33.420 Dub. 09:33.420 --> 09:34.410 Websites. 09:36.770 --> 09:40.940 So let's go to var log nginx. 09:43.430 --> 09:47.060 And let's do a go again on both the log files. 09:50.920 --> 09:51.910 An error log. 09:52.060 --> 09:59.830 And along with that, what we were doing was I went to websites and let's remove the. 10:02.260 --> 10:04.810 Static assets that we have moved to the. 10:06.800 --> 10:07.990 Reverse proxy machine. 10:08.890 --> 10:11.710 So I've deleted those static assets. 10:11.710 --> 10:14.110 And now let's do a tail again. 10:14.110 --> 10:16.810 So I'll go to var dub dub dub Nginx. 10:17.770 --> 10:20.350 Sorry, var logs Nginx. 10:22.330 --> 10:23.530 And let's do a tale. 10:25.140 --> 10:28.140 Now if I open. 10:28.720 --> 10:31.200 Oh, let me refresh. 10:31.240 --> 10:32.070 Captain. 10:34.880 --> 10:36.200 And essentially. 10:37.440 --> 10:44.370 What has happened is the amount of requests that you see over here has decreased considerably from what 10:44.370 --> 10:53.670 it was previously, and you can decrease it much more further by moving more static contents to the 10:53.670 --> 10:55.010 reverse proxy. 10:55.020 --> 10:58.050 And essentially this will do the job for you. 10:58.470 --> 11:05.610 Now, static assets is something which is implemented in most of the enterprise related websites or 11:05.610 --> 11:08.040 the websites which has getting a lot of traffic. 11:08.800 --> 11:13.500 Nginx is also very, very good in serving static contents. 11:13.500 --> 11:20.940 So ideally if you have a two node server then it is better to move everything to the Nginx reverse proxy 11:20.940 --> 11:23.610 itself and let it do the magic. 11:24.540 --> 11:26.760 So this is it about. 11:27.700 --> 11:31.880 How to move the static assets to the Nginx reverse proxy. 11:31.900 --> 11:38.890 I hope this has been informative for you and I really urge you to try this once because it is very important 11:38.890 --> 11:44.410 that you try it out and this will help you have a clear concept itself. 11:44.950 --> 11:46.000 So this is it. 11:46.000 --> 11:49.900 I hope this has been informative for you and I'd like to thank you for viewing.