Nginx 无法解析上游 React JS 文件并退回到 index.html

Question

我有 docker 网站群设置。主要网站在 Angular 中，网站的特定部分是 React 应用程序。

swarm 集群有 3 个应用程序的 3 个服务。 Angular 和 React 应用程序都通过 Nginx

提供服务

Angular 应用程序 (https://mywebsite.com)
React 应用程序 (https://mywebsite.com/viewer)
Spring 使用 /api 个端点启动应用程序 (https://mywebsite.com/api)

为网站提供服务的主要 Nginx 配置，Spring 引导和 React 应用程序作为上游服务。 Nginx 文件下方显示了 3 个应用程序的 3 个位置块。

nginx.conf

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events
{
  worker_connections 1024;
}

http
{
    upstream springboot
    {
        server springboot:8081;
    }

    upstream viewer
    {
      server viewer;
    }

   # Redirect all requests to HTTPS server
    server
    {
        listen 80;
        server_name mywebsite.com;

        # redirects http requests to https
        return 301 https://mywebsite.com$request_uri;
    }

  server
  {
    listen 443 ssl http2;
    server_name mywebsite.com;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_certificate /etc/nginx/certs/mywebsite_com.crt;
    ssl_certificate_key /etc/nginx/certs/mywebsite_com.key;
    ssl_trusted_certificate /etc/nginx/certs/mywebsite_com_truster_chain.crt;
    ssl_prefer_server_ciphers on;

    location /
    {
      #### Gzip Settings  ####
      gzip on;
      gzip_min_length   1100;
      gzip_vary         on;
      gzip_proxied      expired no-cache no-store private auth;
      gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
      gzip_comp_level   5;

      #### Serve Angular Application ####
      root /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
      add_header Cache-Control "no-store, no-cache, must-revalidate";
      proxy_http_version 1.1;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Port $server_port;
    }

   location /viewer
    {
      proxy_pass http://viewer;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /api
    {
      proxy_pass http://springboot;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
  }

  include /etc/nginx/mime.types;
  default_type application/octet-stream;

  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  '$status $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';

  access_log /var/log/nginx/access.log main;
  sendfile on;
  keepalive_timeout 30m;
  include /etc/nginx/conf.d/*.conf;
}

nginx.conf（反应）

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

angular 应用程序和 /api/ 路径工作正常。但是当我尝试转到 https://mywebsite.com/viewer 路径时，正在呈现 JS 文件。仅 index.html 文件呈现，其余 JS 文件无法找到并回退到 index.html 这当然会失败

错误：

Uncaught SyntaxError: Unexpected token '<'.init-service-worker.js:1 
        
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. vendors~app.bundle.9…07e3ba0a6ba969.js:1 
        
Uncaught SyntaxError: Unexpected token '<'

Answer 1

事实证明问题出在 Nginx 上。在 /viewer/ 解决问题后重写 URL

rewrite ^/viewer(/.*)$  break;

这里是完整的 Nginx 文件

server {
  listen 80;

  location / {
    rewrite ^/viewer(/.*)$  break;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Nginx 无法解析上游 React JS 文件并退回到 index.html

Nginx fails to resolve Upstream React JS files and falls back to index.html

reactjs

angular

nginx

docker-swarm

nginx-reverse-proxy