Nginx upstream to express server - 502 error

Question

Heyo, I have a nginx server on digital ocean. I used to host on AWS with PM2 but tweaked this to run it with nginx.

The problem is that it seems I get a 502. Something just isn't configured right. Originally I had the client just being served and that worked but when i switched to the server doing it 502's as well.

The client and server folders are in the same parent directory.

Here is my current var/nginx/sites-available/default

# Main Content Delivery Block (SSL)

server {
    listen              443 ssl;
    listen              [::]:443 ssl;
    server_name         quakeviz.app;
    ssl                 on;
    ssl_certificate     /etc/ssl/certs/mpaccione_ssl.crt;
    ssl_certificate_key /etc/ssl/private/mpaccione_ssl.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    add_header          Content-Security-Policy upgrade-insecure-requests;

    location / {
        root        /var/www/html/usgs_viz/server;
        proxy_pass  https://quakeviz.app:8080/;
        proxy_ssl_session_reuse on;
        #try_files  $uri $uri/ /;
    }

    #location /bufferLength {
    #   root                    /var/www/html/usgs_viz/server;
    #   proxy_pass              https://quakeviz.app:8080/;
    #    proxy_ssl_session_reuse on;
    #}

    #location /quakeData {
    #   root                    /var/www/html/usgs_viz/server;
    #   proxy_pass              https://quakeviz.app:8080/;
    #   proxy_ssl_session_reuse on;
    #}
}

# Redirect 

#server {
#   listen 80 default_server;
#   listen [::]:80 default_server;
#   listen 443 ssl;
#   listen [::]:443 ssl;
#
#   return 301 https://quakeviz.app$request_uri;
#}

Here is the index.js in the server folder. I get a 502 now (updated question) on the client and the api.

// Modules
const cors = require('cors'),
  express = require('express'),
  expressStaticGzip = require('express-static-gzip'),
  fs = require('fs'),
  path = require('path'),
  app = express(),
  // Globals
  getDirectories = (source) => {
    return fs
      .readdirSync(source, { withFileTypes: true })
      .filter((dir) => dir.isDirectory())
      .map((dir) => dir.name)
  }

// CORS for Local Testing

app.use(cors())

// Compression

app.use(
  '/',
  expressStaticGzip(path.join(__dirname, '../client/build'), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
  })
)

// Routes

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'))
})

app.get('/.well-known(/*)?', function (req, res) {
  res.sendFile(path.join(__dirname, '../.well-known', 'assetlinks.json'))
})

app.get('/privacy-policy', function (req, res) {
  res.sendFile(path.join(__dirname, '../privacy_policy.html'))
})

// API

app.get('/bufferLength', function (req, res) {
  const encoding = req.headers['accept-encoding'],
    compArr = getDirectories(
      path.join(__dirname, '/api-data/compressed/')
    ).sort(function sortNum(a, b) {
      return b - a
    })

  if (compArr.length < 2) {
    console.warn('ByteLength Not Available')
    res.status(500).send(new Error('ByteLength Not Available'))
  } else {
    console.log('BUFFER LENGTH RES')

    fs.readFile(
      path.join(
        __dirname,
        `/api-data/compressed/${compArr[1]}/byteLength.json`
      ),
      (err, data) => {
        if (err) {
          console.warn(err)
          res.status(500).send(new Error(err))
        } else {
          console.log(data)
          res.writeHead(200, { 'Content-Type': 'application/json' })
          res.end(data)
        }
      }
    )
  }
})

app.get('/quakeData/:index', function (req, res) {
  const encoding = req.headers['accept-encoding'],
    index = req.params.index,
    compArr = getDirectories(
      path.join(__dirname, '/api-data/compressed/')
    ).sort(function sortNum(a, b) {
      return a - b
    })

  // Send Second Newest Dataset as Latest May hvae Read/Writes
  if (compArr.length <= 1) {
    console.warn('Unsupported Content Encoding Headers')
    res.status(500).send(new Error('Dataset Not Currently Available'))
  } else {
    if (encoding.includes('br')) {
      console.log('BROTLI RES')

      fs.readFile(
        path.join(
          __dirname,
          `/api-data/compressed/${compArr[1]}/brotliData${index}.txt.br`
        ),
        (err, data) => {
          if (err) {
            console.warn(err)
            res
              .status(500)
              .send(new Error('Brotli Compression Data Read Error'))
          } else {
            res.writeHead(200, {
              'Content-Type': 'application/json',
              'Content-Encoding': 'br',
            })
            res.end(data)
          }
        }
      )
    } else if (encoding.includes('gzip')) {
      console.log('GZIP RES')

      fs.readFile(
        path.join(
          __dirname,
          `/api-data/compressed/${compArr[1]}/gzipData${index}.txt.gz`
        ),
        (err, data) => {
          if (err) {
            console.warn(err)
            res.status(500).send(new Error('Gzip Compression Data Read Error'))
          } else {
            res.writeHead(200, {
              'Content-Type': 'application/json',
              'Content-Encoding': 'gzip',
            })
            res.end(data)
          }
        }
      )
    } else {
      console.warn('Unsupported Content Encoding Headers')
      res.status(415).send(new Error('Unsupported Requested Encoding Type'))
    }
  }
})

// Listen

app.listen(8080, () => console.log('API listening on 8080'))

Answer 1

Didn't understand why you are trying to proxy each to route of your service, why didn't you let your app route the request for you?

Example:

 location / {
    root                    /var/www/html/usgs_viz/server;
    proxy_pass              https://quakeviz.app:8080/;
    proxy_ssl_session_reuse on;
}

other thing I notice was the https on the proxy_pass I don't think that would work, try replacing with http.

Answer 2

I changed things to this. I also ran the server with PM2.

I am starting to get more into the fullstack sysadmin bit and so I didn't actually know I needed to run this on PM2 as well as route it with Nginx. I had the notion that Nginx would run it if I pointed to it. Kind of a silly thing but I do think the nginx config here is better. See below.

# Main Content Delivery Block (SSL)

server {
    listen              443 ssl;
    server_name         quakeviz.app;
    ssl                 on;
    ssl_certificate     /etc/ssl/certs/mpaccione_ssl.crt;
    ssl_certificate_key /etc/ssl/private/mpaccione_ssl.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    add_header          Content-Security-Policy upgrade-insecure-requests;

    location / {
        root                /var/www/html/usgs_viz/server;
        proxy_pass          http://localhost:8080;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade $http_upgrade;
        proxy_set_header    Connection 'upgrade';
        proxy_set_header    Host $host;
        proxy_cache_bypass  $http_upgrade;
    }
}