Nginx 反向代理 Serving Node.js app 静态文件答案

【问题标题】：Nginx reverse proxy Serving Node.js app static fileNginx 反向代理 Serving Node.js app 静态文件
【发布时间】：2019-04-17 04:50:04
【问题描述】：

我有一个 Laravel 应用程序，其中一条路线 /onlineAds 会将我带到另一个使用 Vue.Js 作为前端，Node.js 作为后端构建的应用程序（一个 SPA 应用程序）。所以我尝试使用 Nginx 作为反向代理来提供我的 SpaApp 的静态文件，但没有任何成功。

我的配置如下：

/                   =>      will be serverd from "C:/laragon/www/laravel_App/public/"
/onlineAds/(*)      =>      will be serverd from "C:/laragon/www/VueNodeApp/dist/"
/api/(*)            =>      will be proxied to nodeJs server

这是我尝试用 Nginx 做的事情：

server {
  listen 8080;
  server_name domain.test *.domain.test;
  root "C:/laragon/www/laravel_App/public/";

  index index.html index.htm index.php;

  location / {
      try_files $uri $uri/ /index.php$is_args$args;
      autoindex on;
  }

  location ~* ^\/onlineAds(.*)$ {
      alias "C:/laragon/www/craiglist/dist/";
      #try_files $uri $uri/ /index.html;
  }

  location ~* ^\/api(.*)$ {
      proxy_set_header        Host $host;
      proxy_set_header        Upgrade $http_upgrade;
      proxy_set_header        Connection 'upgrade';
      proxy_set_header        X-Real-IP $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header        X-Forwarded-Proto $scheme;

      proxy_read_timeout      300;
      proxy_pass              http://localhost:8081;
  }

  location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass php_upstream;        
      #fastcgi_pass unix:/run/php/php7.0-fpm.sock;
  }


  charset utf-8;

  location = /favicon.ico { access_log off; log_not_found off; }
  location = /robots.txt  { access_log off; log_not_found off; }
  location ~ /\.ht {
      deny all;
  }
}

我做错了什么？

【问题讨论】：

注意这个配置。似乎 laravel 路由系统捕获了 /onlineAds 并给了我一个 404 错误
您将收到 404，因为您的 alias 语句是错误的。 正则表达式中的alias location 需要文件的完整路径。试试：C:/laragon/www/craiglist/dist$1;
谢谢@RichardSmith，您的建议已经奏效，现在 /onlineAds 确实为我提供了正确的索引文件，但 CSS 和 JS 文件没有加载并给我一个 404。知道为什么吗？
您将在 Nginx 访问日志中看到对 CSS 和 JS 文件的 GET 请求。这应该告诉你为什么 Nginx 找不到文件。
我认为它试图从 laravel 的 public 文件夹而不是 vue 的 dist 文件夹中获取资产文件！ "GET /onlineAds/ HTTP/1.1" 304 0 "-" "GET /css/app.9a1eae5e.css HTTP/1.1" 404 16216 "http://domain.test:8080/onlineAds/" "GET /js/app.1f025f79.js HTTP/1.1" 404 16216 "http://domain.test:8080/onlineAds/" "GET /js/about.d4a2497d.js HTTP/1.1" 404 18366 "http://domain.test:8080/onlineAds/"

标签： node.js nginx vue.js single-page-application nginx-reverse-proxy

【解决方案1】：

正则表达式中的alias 语句 location 需要文件的完整路径。详情请见this document。

例如：

location ~* ^\/onlineAds(.*)$ {
    alias "C:/laragon/www/craiglist/dist$1";
    if (!-e $request_filename) { rewrite ^ /onlineAds/index.html last; }
}

由于this issue，避免使用try_files 和alias。关于if的使用见this caution。

假设 URI /js/foo.js 可以位于 C:/laragon/www/laravel_App/public/js/foo.js 或 C:/laragon/www/craiglist/dist/js/foo.js，您可以要求 Nginx 使用 try_files 和公共 root 目录尝试这两个位置。

例如：

location /js/ {
    root "C:/laragon/www";
    try_files /laravel_App/public$uri /craiglist/dist$uri =404;
}
location /css/ {
    root "C:/laragon/www";
    try_files /laravel_App/public$uri /craiglist/dist$uri =404;
}

【讨论】：

像魅力一样工作：D