how to make NGINX serve static content like .js, .css, .html?

Question

Recently I have started using NGINX, I found that we can use it for reverse proxy, serving static content from itself which can reduce load time. I have a Tomcat/JBoss server on my local machine and I want to put NGINX in front of it so that static content will be served from NGINX and rest all by Tomcat/JBoss. My Tomcat/JBoss application is running on http://localhost:8081/Test my NGINX configuration worked properly but it is not able to load css/js/jpg file. Here is my war strcuture wehere static contents are

Test.war

TEST
  |
  |--->Resources
  |       |------->CSS
  |       |         |----> style.css
  |       |
  |       |-------->Images
  |                  |----> a.jpg
  |                  |----> b.jpg
  |   
  |--->WEB-INF
  |        |----->Web.xml
  |        |----->spring-servlet.xml
  |
  |--->JSP
         |---->login.jsp

I think the problem is because of absolute path, so should I copy resources folder and put it in some folder in NGINX and configure my NGINX to pick file from its own directory rather going to Tomcat/JBoss? I am new so I dont have any idea of doing this can anyone pls help me in this. This is my conf file for NGINX(windows)

server {
        listen 80;
        server_name localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
             proxy_pass http://127.0.0.1:8081/Test/;
        }

Adding a more specific location `/Resources/` that you point at the absolute path should work. (you need to point it at the exploded war folder) — Thilo, May 21 '14 at 07:30
so I should put a Resources folder in my NGINX server directory? — Pulkit, May 21 '14 at 07:31
actually what I am thinking is to put all my static content in NGINX server directory and they should be served from here instead of loading them from JBoss/Tomcat but I dont know how to configure NGINX to load all these static content from its own server directory — Pulkit, May 21 '14 at 07:33
That should also work. But you need to stop the proxy_pass from being effective. Define a more specific location. — Thilo, May 21 '14 at 07:39
@Thilo: Do you have any sample conf file where you did this to look for static content in NGINX directory and rest all to JBoss directory??? — Pulkit, May 21 '14 at 07:51
do you really need to do that? You cannot limit the paths (for example to /Resources)? — Thilo, May 21 '14 at 09:27
sorry I didn't get you, anyways I will try this and will let you know — Pulkit, May 21 '14 at 09:30

score 41 · Accepted Answer · answered May 21 '14 at 10:43

41

You can add location with regexp:

server {
    listen 80;
    server_name localhost;

    location ~* \.(js|jpg|png|css)$ {
        root path/to/tomcat/document/root/Test/;
        expires 30d;
    }

    location / {
        proxy_pass http://127.0.0.1:8081/Test/;
    }
}

answered May 21 '14 at 10:43

ist

435
5
5

How to test it after set it ? – code-8 May 11 '15 at 01:45
@ihue sudo service nginx restart – user2278120 Dec 19 '15 at 14:53
@ihue Test it with `sudo nginx -t` instead – kaiser Feb 10 '16 at 03:24
1

I don't mean to test the nginx syntax. I mean to test the caching speed. How to check if your cache make it different? – code-8 Feb 10 '16 at 11:46
I would also like a way to test if this works.. is there a way to track from which server the static files are served from? – lephleg Dec 13 '16 at 16:06
How can I du that but only to request that is made under location /app ? – diegoddox Jan 29 '17 at 21:49

code-8 · Answer 2 · 2016-01-05T14:29:29.233

6

Try

server {
    listen 80;
    server_name localhost;

    location ~* \.(css|js|gif|jpe?g|png)$ {
        expires 168h;
    }

    location / {
        proxy_pass http://127.0.0.1:8081/Test/;
    }
}

How to test

In your CLI run ab -c 20 -n 1000 https://your-site/any-file

You will see Time taken for tests decrease drastically.

edited Jan 05 '16 at 14:29

answered Jan 05 '16 at 14:18

code-8

54,650
106
352
604

score 2 · Answer 3 · answered Jul 11 '20 at 09:53

2

This worked for me:

location /static {
     alias /usr/src/app/project/static;
 }

answered Jul 11 '20 at 09:53

abhishek

21
1

how to make NGINX serve static content like .js, .css, .html?

3 Answers3

Linked