PWA (Angular) with Nginx reverse proxy inside a Docker - nginx

Question

I have a Nginx server configured to serve requests using a proxy pass from a docker container. It works fine, but the PWA is not working
Inside the docker:nginx container I have a Nginx.conf like this to serve my angular inside a container
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;
}
}
}
I have a main server that proxies the browser request to the above docker container containing my angular application
It has a server block like this
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 {
}
}
I have tried everything the service worker is running on my browser but refuses to cache the static files to the browser storage for pwa to work offline
Best guess is that my main nginx is ssl enabled and my proxy pass is not, how can I forward my ssl to the docker proxy pass for ui container proxy_pass http://localhost:8080;
Please any help is appreciated

Answer 1

You need to forward SockJS as well. Try adding this to your server block:
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;
}