Node.js+Express部署NGINX后静态文件路径失效求解决方案

嘿，我看你遇到了把Express服务器部署到Nginx后静态资源加载失败的问题，咱们拆解下原因，然后一步步解决它：

问题根源 #

你的Nginx配置里有两个关键问题导致静态文件找不到：

1. 路径不匹配：Nginx的root /var/www/html;指向了系统默认的网页目录，但你的静态资源实际存在/site/public下，两者完全不搭。
2. 逻辑冲突：location /里同时用了try_files和proxy_pass，Nginx会优先尝试在/var/www/html里找文件，找不到就直接返回404，根本不会把请求转发给Express服务器。

解决方案 #

1. 修改Nginx配置文件 #

咱们调整Nginx配置，让它先处理静态资源请求，再把其他请求代理给Express。下面是两种可行的配置方案，选一个适合你的就行：

方案一：精准匹配静态资源后缀（推荐）

这种方式只针对常见的静态文件后缀（css、js、图片等）直接返回文件，其他请求走代理，性能更好：

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

  index index.html index.htm;
  server_name _;

  # 处理所有静态资源请求
  location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
    root /site/public; # 指向你的静态资源根目录
    expires 30d; # 可选：设置30天缓存，优化前端加载速度
    add_header Cache-Control "public, max-age=2592000";
  }

  # 其他所有请求转发给Express服务器
  location / {
    proxy_pass http://localhost:8080;
    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;
  }
}

方案二：先找静态文件，找不到再代理

这种方式让Nginx先尝试从静态目录找文件，找不到再转发给Express，逻辑更贴近Express本身的处理：

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

  root /site/public; # 直接把静态目录设为root
  index index.html index.htm;
  server_name _;

  location / {
    # 先尝试加载静态文件，找不到就走代理
    try_files $uri $uri/ @express_proxy;
  }

  # 定义代理到Express的规则
  location @express_proxy {
    proxy_pass http://localhost:8080;
    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;
  }
}

2. 确认EJS模板的资源引用路径 #

你的EJS模板里引用静态资源时，一定要用根路径，比如：

<!-- 正确写法 -->
<link rel="stylesheet" href="/css/style.css">
<script src="/scripts/app.js"></script>
<img src="/assets/images/logo.png" alt="站点Logo">

<!-- 错误写法：不要用相对路径 -->
<!-- <link rel="stylesheet" href="../css/style.css"> -->

因为你在Express里设置了app.use(express.static(__dirname + '/public'))，所以/css就对应/site/public/css，根路径引用才能被Nginx和Express正确识别。

3. 重启服务生效 #

修改完配置后，记得重启Nginx和Express：

• 重启Nginx：sudo systemctl restart nginx
• 生产环境建议用PM2管理Express进程（避免终端关闭后服务停止）：

  # 安装PM2
  npm install pm2 -g
  # 启动Express服务
  pm2 start app.js
  # 设置开机自启
  pm2 startup
  

额外小贴士 #

• 可以用curl -I http://你的域名/css/style.css来测试静态资源是否能正常返回，查看响应头里的状态码和文件路径是否正确。
• 后续配置HTTPS时，记得在Nginx里添加SSL证书配置，并且把HTTP请求重定向到HTTPS。

内容的提问来源于stack exchange，提问作者Miles.Kelly