NGINX Config for Express Static Files - node.js

Question

I have nginx running and I also have an express backend server with a react front end. The issue I'm having is with the static files from express. For instance I have some handlebar view files with a header that calls to css/style.css and the js directory as well which currently works in Chrome but not in IE, Edge or Safari. In those browsers the console shows a 404 and the styling doesn't apply of course.
I call for the style.css from my handlebars view page like so:
<link rel="stylesheet" href="css/style.css">
It should be setup so that if I were to visit http://sitename.com/css/style.css I would see the style.css from /var/www/sitename.com/html/node/public/css/style.css location. Which actually appears to work in Chrome but not in other browsers.
I have this statement in my express app
app.use(express.static('public'));
I have a directory structure like so:
/var/www/sitename.com/html/node (node express app is running from here)
/var/www/sitename.com/html/node/public (public folder for static files from express)
-> css (folder)
-> js (folder)
my nginx is setup as follows:
server {
listen 80;
server_name _;
root /var/www/sitename.com/html;
index index.php index.html;
server_name sitename.com www.sitename.com;
location /phpmyadmin {
try_files $uri $uri/ =404;
}
location / {
root /var/www/sitename.com/html/node/public/;
try_files $uri #backend;
}
location #backend {
proxy_pass http://localhost:42134;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
}
# set max upload size
client_max_body_size 2G;
fastcgi_buffers 64 4K;
access_log /var/log/nginx/http_access.log combined;
error_log /var/log/nginx/http_error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ~ \.php$
{
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~* \.(htaccess|htpasswd) {
deny all;
}
# set long EXPIRES header on static assets
location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
expires 30d;
access_log off;
}
}

Answer 1

The solution ended up being to remove the express.static line in the app.js and then in the nginx config I had to rearrange things as so:
server {
listen 80;
server_name _;
root /var/www/sitename.com/html;
index index.php index.html;
server_name sitename.com www.sitename.com;
location /phpmyadmin {
root /var/www/sitename.com/html;
try_files $uri $uri/ =404;
}
location /dashboard {
index index.php index.html;
try_files $uri #backend;
}
location /static {
root /var/www/sitename.com/html;
try_files $uri $uri/ =404;
}
location / {
index index.php index.html;
try_files $uri #backend;
}
location #backend {
proxy_pass http://localhost:42134;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# set max upload size
client_max_body_size 2G;
fastcgi_buffers 64 4K;
access_log /var/log/nginx/http_access.log combined;
error_log /var/log/nginx/http_error.log;
location = /favicon.ico {
log_not_found off;
access_log off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ~ \.php$
{
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~* \.(htaccess|htpasswd) {
deny all;
}
# set long EXPIRES header on static assets
location ~* \.(?:jpg|jpeg|gif|bmp|ico|png|css|js|swf)$ {
expires 30d;
access_log off;
}
}