PWA (Angular) с обратным прокси-сервером Nginx внутри Docker

#nginx #progressive-web-apps

#nginx #progressive-веб-приложения

Вопрос:

У меня есть сервер Nginx, настроенный для обслуживания запросов с использованием прокси-сервера из контейнера docker. Это работает нормально, но PWA не работает

Внутри контейнера docker: nginx у меня есть файл Nginx.conf, подобный этому, для обслуживания моего angular внутри контейнера

 user nginx;
worker_processes 4;

events {
  worker_connections 1024;
}
http {

  server {
    listen 0.0.0.0:8080;
    listen [::]:8080;

    gzip on;
    gzip_comp_level 6;
    gzip_vary on;
    gzip_min_length 1000;
    gzip_proxied any;
    gzip_types text/plain text/css application/json application/x-javascript text/xml text/javascript;
    gzip_buffers 16 8k;
    client_max_body_size 256M;


    add_header X-Content-Type-Options nosniff;

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

    location / {
      index index.html;
      root /usr/share/nginx/html/;
      try_files $uri$args $uri$args/ /index.html;
    }
  }

}
 

У меня есть главный сервер, который передает запрос браузера в указанный выше контейнер docker, содержащий мое приложение angular

У него есть такой серверный блок, как этот

 server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  ssl_certificate /etc/nginx/ssl/certs/my-site.com.ca-bundle.crt;
  ssl_certificate_key /etc/nginx/ssl/private/my-site.com.key;

  server_name my-site.com;
  root /usr/share/nginx/html;

  gzip on;
  gzip_comp_level 6;
  gzip_vary on;
  gzip_min_length 1000;
  gzip_proxied any;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  gzip_buffers 16 8k;
  client_max_body_size 256M;
  
  #serves my api 
  location ~ ^/(api|server-assets)/ {
    proxy_pass http://localhost:9090;

    proxy_set_header Host $http_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-Proto $scheme;
    proxy_set_header Accept-Encoding "gzip";
    gzip on;
    gzip_proxied auth;

    # kill cache
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
  }

  # Serves my angular ****** This might be an issue as I am proxy passing to a non https item
  location / {
    gzip on;
    gzip_proxied any;
    proxy_set_header Host $http_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-Proto $scheme;
    proxy_set_header Accept-Encoding "gzip";
    proxy_pass http://localhost:8080;
    proxy_buffer_size 128k;
    proxy_buffers 32 32k;
    proxy_busy_buffers_size 128k;
  }

  location ~* .(?:ico|css|js|gif|jpe?g|png)$ {
    expires max;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
 

Я перепробовал все, что работает в моем браузере, но отказывается кэшировать статические файлы в хранилище браузера, чтобы pwa работал в автономном режиме

Лучше всего предположить, что у моего основного nginx включен ssl, а у моего прокси-сервера нет, как я могу перенаправить свой ssl на прокси-сервер docker для контейнера пользовательского интерфейса proxy_pass http://localhost:8080;

Пожалуйста, любая помощь приветствуется

Комментарии:

1. что вы пытаетесь кэшировать в хранилище? как и какое хранилище?

Ответ №1:

Вам также нужно переслать SockJS. Попробуйте добавить это в свой серверный блок:

     location ^~ /sockjs-node/ {
      proxy_pass http://localhost:8080;
      proxy_set_header X-real-ip $remote_addr;
      proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
    }
 

Комментарии:

1. Я думаю, это применимо, когда вы выполняете ng serve. Я создал приложение в обычном html с помощью ng build —prod