React+nginx+бэкэнд. Работает через NAT. Почему не работает через nginx?

Question

Олег Синельников @siniy1388

Разработчик

Nginx

React+nginx+бэкэнд. Работает через NAT. Почему не работает через nginx?

Предыстория:
Разработчики передали со скандалом код. Бэкэнд - Spring. Фронт -React ts. Прокси-nginx. Бд - postgresql.
Все в одной сети.
172.17.100.102 - БД.
172.17.100.100 - nginx, бэк, docker с react.
172.17.100.103 - video
На боевом сервере (my_site.ru) работает такая архитектура.
На резервный клонирую эти машины. Регистрирую домен (my_site.site). Получаю сертификаты LetsEncript. Правлю конфиг nginx. Собираю контейнер с react.
В итоге часть функционала не работает. Хотя если в react прописать порт 8080 и пробросить его до бэка, то весь функционал работает.
Конфиг бэка

my_site:
  image:
    provisioning:
      rate: 360000
  media-server:
    directory: /opt/my_site/videos/
    host: cdn.my_site.ru
    login: root
    password: awDr%Ck3ju2gus
    ssl: true
    port: 443
    strict-host-key-checking: false
  notification:
    landing-email: my_sitepb.info@gmail.com
    docs:
      roots: Нормативная документация;Справочная информация;Образцы документов
  path-to-known-host: /path/to/known-hosts

fcm:
  path: /opt/my_site/server/my_site-pb-firebase-adminsdk-v7hsw-9ea75e05bd.json

jira:
  client:
  specialist:
    project: 'TSSD'
  technical:
    support:
      project: 'TSSD'

notification:
  email:
    enabled: true
    from: my_sitepb.info@yandex.ru
  push:
    enabled: true
  sms:
    enabled: true
        
server:
  servlet:
    session:
      timeout: 30d
      cookie:
        max-age: 30d  
  error:
    whitelabel:
      enabled: false
  tomcat:
    accesslog:
      enabled: true

spring:
  autoconfigure:
    exclude: org.springframework.boot.autoconfigure.web.servlet.error.ErrorMvcAutoConfiguration
  datasource:
    driverClassName: org.postgresql.Driver
    password: 
    url: jdbc:postgresql://172.17.100.102:5432/ddb
    username: 
    username.dialect: org.hibernate.dialect.PostgreSQLDialect
  jpa:
    hibernate:
      ddl-auto: validate
  liquibase:
    change-log: classpath:db/changelog/changelog-master.xml
    clear-checksums: true
  mail:
    host: smtp.yandex.com
    password: My_siteinfo1
    port: 465
    properties:
      "mail.smtp.ssl.enable": true
      "mail.smtp.starttls.enable": true
      "mail.smtp.auth": true
    protocol: smtp
    username: my_site.info@yandex.ru
  mvc:
    throw-exception-if-no-handler-found: true
  servlet:
    multipart:
      max-file-size: 2048MB
      max-request-size: 2048MB
  web:
    resources:
      static-locations: file:/opt/my_site/static-content/

logging:
  config: logback-spring.xml

конфиг nginx

server {
    if ($host = www.my_site.site) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = cdn.my_site.site) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = my_site.site) {
        return 301 https://$host$request_uri;
    } # managed by Certbo   
    listen     80;
    server_name my_site.site cdn.my_site.site www.my_site.site ;
     access_log  off;
    location / {
        return 301 https://$server_name$request_uri;
    }
}
server {
    listen          443;
    server_name     my_site.site www.my_site.site;

    access_log /var/log/nginx/my_site_access.log;
    error_log /var/log/nginx/my_site_error.log;
     
    include /etc/nginx/include/ssl_my_site.conf;

    client_max_body_size 2G;

    # kostyl
    location ~ ^/videos/(.*)$ {
        proxy_pass          http://172.17.100.103:8081/videos/$1$is_args$args;
        proxy_set_header    X-Forwarded-Host $host;
        proxy_set_header    X-Forwarded-Server $host;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_connect_timeout 600;
    }
     
    location ~ ^/api/(.*)$ {
        proxy_pass          http://172.17.100.100:8080/$1$is_args$args; 
        proxy_set_header    X-Forwarded-Host $host;
        proxy_set_header    X-Forwarded-Server $host;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_connect_timeout 600;
        client_max_body_size 1G;
    }

    # Optional optimisation - please refer to http://nginx.org/en/docs/http/configuring_https_servers.html
    # ssl_session_cache   shared:SSL:10m;
    location / {
        proxy_pass          http://172.17.100.100:8180/;
        proxy_set_header    X-Forwarded-Host $host;
        proxy_set_header    X-Forwarded-Server $host;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
       port_in_redirect   off;
        proxy_redirect      http://localhost:8180/ /;
        proxy_connect_timeout 600;
    }
    ssl_certificate /etc/letsencrypt/live/my_site.site-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_site.site-0001/privkey.pem; # managed by Certbot
}
server {
    listen          443;
    server_name     cdn.my_site.site;

    access_log /var/log/nginx/cdn_my_site_access.log;
    error_log /var/log/nginx/cdn_my_site_error.log;
     
    include /etc/nginx/include/ssl_my_site.conf;

    client_max_body_size 2G;
     
    location ~ ^/videos/(.*)$ {
        proxy_pass          http://172.17.100.103:8081/videos/$1$is_args$args;
        proxy_set_header    X-Forwarded-Host $host;
        proxy_set_header    X-Forwarded-Server $host;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    X-Real-IP $remote_addr;
        proxy_connect_timeout 600;
    }

    ssl_certificate /etc/letsencrypt/live/my_site.site-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_site.site-0001/privkey.pem; # managed by Certbot
}

Прописано в React : export const baseURL = 'https://my_site.site';
При работе через nginx приходится явно указывать
location /login {
proxy_pass 172.17.100.100:8080;
и
location /logout {
proxy_pass 172.17.100.100:8080;

И в трех компонентах возникают ошибки:

bundle.36b2f93….js:2 TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

Хотя бэк все данные отдает.
А на фронте получаем index.html вместо массива

<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Диагност ПБ — новый взгляд на диагностику"/><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" sizes="192x192" href="/android-chrome-192x192.png"><link rel="apple-touch-icon" sizes="512x512" href="/android-chrome-512x512.png"><title>Диагност ПБ</title><script>(function(m,e,t,r,i,k,a){m[i]=m[i]||function()
      {(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

      ym(xxxxx, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });</script><noscript><div><img src="https://mc.yandex.ru/watch/xxxxx" style="position:absolute; left:-9999px;" alt=""/></div></noscript><script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxx"></script><script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'xxxxxxxxxx');</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script defer="defer" src="/bundle.2388b08a00c396ee4812.js"></script></body></html>

Как такое может быть?