Serving Polymer PWA with nginx reverse proxy

Question

I'm trying to serve my Polymer PWA with an HTTP/2 reverse proxy using nginx, but I cannot get it to work properly. The PWA is served unbundled with prpl-server at 127.0.0.1:38765, which works fine. My prpl-server looks like this:

const express = require('express')
const prpl = require('prpl-server')
const config = require('./build/polymer.json')

const app = express()
const port = 38765

app.get('*', prpl.makeHandler('./build/', config))

app.listen(port)

and my nginx config at /etc/nginx/sites-available/default looks like this:

upstream app {
    server 127.0.0.1:38765;
    keepalive 64;
}

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    server_name app;  # or full domain? tried both, doesn't work

    location / {
        proxy_pass              http://app$request_uri;
        proxy_redirect          off;
        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        X-Forwarded-Proto-Version $http2;
        proxy_set_header        Host $http_host;
        proxy_set_header        X-NginX-Proxy true;
        proxy_set_header        Connection "";

        # Cache Controls
        # This section sets response expiration which prevents 304 not modified
        expires                 0;
        add_header              Pragma public;
        add_header              Cache-Control "public";
        access_log              off;

        # Security Patches
        # This section are security patches in case the client overrides
        # these values, the server re-enables it and enforce its rules
        add_header X-XSS-Protection         "1; mode=block";
        add_header X-Frame-Options          "deny";
        add_header X-Content-Type-Options   "nosniff";
    }

    ssl on;
    ssl_session_cache shared:SSL:5m;
    ssl_session_timeout 1h;
    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    ssl_dhparam /etc/nginx/ssl/dhparam.pem;
}

When I go to the page, all dependencies seem to be downloaded over h2 except for ma-app.html (the app shell), which gives me a 502 error. All other files download with a 200 status and have the same size (minus some compression) as when I go to port 38765 directly, but the page is blank.

Am I missing something? Why doesn't the shell download properly? All files' request URLs are exactly the same for the nginx reverse proxy as for the prpl-server except for the port number.

---

Screenshots

It works when I access the prpl-server directly:

Does not work when I go through the nginx reverse proxy:

Some info for the failed request:

Answer 1

The problem had something to do with the buffer size being too small, as mentioned here: https://github.com/Polymer/prpl-server-node/issues/50#issuecomment-333270848.

I added

proxy_buffer_size          128k;
proxy_buffers              32 32k;
proxy_busy_buffers_size    128k;

in the location section of the nginx config and now the thing works.