skip to Main Content

I’m trying to setup Angular + Nodejs behind Ngnix on Ubuntu.

Everything is working fine for Angular and Nodejs API but I’m not able to serve static files.

Here is my configuration (/etc/nginx/sites-enabled/default):

location / {
    # First attempt to serve request as file, then as directory, then fall back to displaying a 404.
    try_files $uri $uri/ /index.html;
}

location /api {
    proxy_pass http://localhost:7777;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    # preflight requests
    if ( $request_method = OPTIONS ) {
        add_header "Access-Control-Allow-Origin" *;
        add_header "Access-Control-Allow-Credentials" true;
        add_header "Access-Control-Allow-Methods" "GET, POST, PUT, HEAD, DELETE, OPTIONS";
        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
        return 200;
    }
}

location /static {
    proxy_pass http://localhost:7777;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

The /api route works fine but /static doesn’t.

On local, /static works fine because there is no nginx.

I have following directory structure to serve static files:

public
   static
     images
     css
     fonts

https://somewebsite.com/api/read (works fine)

https://localhost:3000/static/images/test.png (works fine)

https://somewebsite.com/static/images/test.png

is not working. What am I doing wrong?

2

Answers


  1. Chosen as BEST ANSWER

    I fixed this with following entry:

    location /static/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_pass "http://localhost:7777/static/";
    
        # preflight requests
        if ( $request_method = OPTIONS ) {
            add_header "Access-Control-Allow-Origin" *;
            add_header "Access-Control-Allow-Credentials" true;
            add_header "Access-Control-Allow-Methods" "GET, POST, PUT, HEAD, DELETE, OPTIONS";
            add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
            return 200;
        }
    }
    

  2. https://localhost:3000/static/images/test.png (works fine) and https://somewebsite.com/static/images/test.png is as expected. According to your configuration, you are also redirecting /static to port 7777: proxy_pass http://localhost:7777;

    Changing:
    proxy_pass http://localhost:7777;
    to:
    proxy_pass http://localhost:3000;
    should do the trick

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search