CODEWITHSUNDEEP
expressnginx
dace
dace

Reputation: 6363

express and nginx - loads html file but can't serve assets

I'm trying to run an express server at port 3000. When I visit my server's IP, I'm able to get the html page to load, however it doesn't seem to be able to find the assets (have a .js and .css file that I link to - this is in the same directory as the index.html inside of public). Am I missing something in my configs?

express setup

const express = require('express');
const path = require('path');
const app = express();

const PORT = 3000;

app.use('*', 
  express.static(path.join(__dirname, '..', 'public', 'index.html')));

app.get('*', (req, res) => {
  res.sendFile((path.join(__dirname, '..', 'public', 'index.html')));
});

app.listen(PORT, () => {
  console.log(`Listening on http://localhost:${PORT}...`)
});

nginx setup

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/my_site/public;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
      try_files $uri $uri/ =404;
      proxy_pass http://127.0.0.1:3000;
      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;
    }
}

Upvotes: 1

Views: 1520

Answers (1)

squgeim
squgeim

Reputation: 2351

In your nginx configuration,

try_files $uri $uri/ =404;

Means nginx will try to find a static resource in your root folder, then try it with a / at the end, if it hasn't found anything yet will give out a 404 (Not Found).

It never reaches the proxy_pass.

The proper way to configure it would be like this:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/my_site/public;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
      try_files $uri $uri/ @nodejs;
    }

    location @nodejs {
      proxy_pass http://127.0.0.1:3000;
      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;
    }
}

Now, it will look for static files in your root folder, then pass it on to the node server.

Upvotes: 1

Related Questions