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

Posted 2023-02-22

【中文标题】Nginx 反向代理 Serving Node.js app 静态文件

【英文标题】：Nginx reverse proxy Serving Node.js app static file

【发布时间】：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/"

【参考方案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