nginx proxy to node and ssl on vue/node

Question

EDIT:

Error.log

2021/02/23 07:30:07 [warn] 233791#233791: "ssl_stapling" ignored, issuer certificate not found for certificate "/etc/nginx/selfSignedCerts/example.crt"

2021/02/24 07:26:48 [error] 233793#233793: *17 connect() failed (111: Connection refused) while connecting to upstream, client: IP, server: IP, request: "GET / HTTP/2.0", upstream: "http://MyIP:60702/", host>

Access.log

MYIP - - [23/Feb/2021:07:31:02 +0000] "GET / HTTP/2.0" 404 128 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36" OR

MYIP - - [23/Feb/2021:07:37:59 +0000] "GET / HTTP/2.0" 502 568 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36"

I'm trying to use self-signed certs for my web-application based on vue/node.js. So I set the vue cinfig on https:

module.exports = {
  baseUrl: './',
  devServer: {
    port: 8080,
    https: true,
    disableHostCheck: true
  }
};

And added two conf files for nginx to handle vue and node:

VUE:

server {
     listen      80;
     listen      [::]:80;
     server_name inf-education-67.umwelt-campus.de;
     return 301  https://$server_name$request_uri;
}
server {
     listen       443 ssl http2;
     listen       [::]:443 ssl http2;
     server_name  inf-education-67.umwelt-campus.de;

     # point to ssl certificate path
     include snippets/self-signed.conf;
     include snippets/ssl-params.conf;

     location / {
         # point to dist folder inside vue source code folder
         root /var/www/client/pvapp-client/dist;
         autoindex on;
         autoindex_exact_size off;
         index index.html index.htm;
         try_files $uri $uri/ /index.html;
    }
}

NODE:

server {
     listen       80;
     listen       [::]:80;
     server_name  MY_IP_ADDRESS;
     return 301   https://$server_name$request_uri;
}
server {
     listen       443 ssl http2;
     listen       [::]:443 ssl http2;
     server_name  MY_IP_ADDRESS;

     # point to ssl certificate path
     include snippets/self-signed.conf;
     include snippets/ssl-params.conf;

     location / {
          # node server is running on port 60702
          proxy_pass                 http://MY_IP_ADDRESS:60702;
          proxy_http_version         1.1;
          proxy_set_header Host      $host;
          proxy_set_header X-Real-IP $remote_addr;
     }
}

When opening the site I get a 404 / 502 error.

Is the IP as domain_name in node config correct? What else could be wrong?

@MichaelHampton it just tells me about the 502 error. Could it be cause of the self-signed certs? — why me, Feb 21 '21 at 19:31
The `server` block above does not seem to correspond to this error message. Did you make further changes? Please edit your question. — Michael Hampton, Feb 22 '21 at 15:07
@MichaelHampton I edited the question. The error log was overwritten that's why the old messages were gone. — why me, Feb 23 '21 at 07:35
I still don't see any error log entries relevant to 502 Bad Gateway. Check your logging configuration. — Michael Hampton, Feb 23 '21 at 15:23
@MichaelHampton The 502 appears if I start reloading the page. There's an upstream error in the logs too. Edited again. — why me, Feb 24 '21 at 07:27
Connection refused means your web application is not running. You need to be looking there. — Michael Hampton, Feb 24 '21 at 11:58
@Michael Hampton PM2 is running and Nginx is running too. All files are enabled. If I change it to the default file without ssl it's working fine. So it has to do with these files I show above. — why me, Feb 24 '21 at 13:39
@MichaelHampton But the webapp is running via nginx/pm2 I guess. I never start vue/node seperately. So there must be a problem reaching the node application with the proxy setting. And that's where I don't know why/how. — why me, Feb 24 '21 at 14:57
Why do you say it's running? Did you actually check? Is it actually listening on port 60702? How did you bind it? — Michael Hampton, Feb 24 '21 at 15:06
@MichaelHampton lsof is giving me: `node\x20/ 397808 root 21u IPv6 693774 0t0 TCP *:60702 (LISTEN)` And also the PM2 status command is returning "active". Also I checked it with `ps -e|grep node` — why me, Feb 25 '21 at 07:31
Did your app stop and restart, then? Check its logs to see if it crashed. — Michael Hampton, Feb 25 '21 at 15:28
@MichaelHampton I did. and it also didn't crash. I checked that. As I mentioned - it works fine if I don't use the proxy stuff. — why me, Feb 25 '21 at 19:43
A `curl myIP:60702` also got me `cannot get` but it definitely is running. — why me, Feb 25 '21 at 19:52
@MichaelHampton I think I identified the problem. It's the server_name in the nginx node conf file. I need to add a second server name to my vServer. The one I specified in /etc/hosts is in use at the nginx vue config. But how would I specify a seonc server name? — why me, Feb 26 '21 at 14:18
@MichaelHampton I did so. and edited the nginx file like `server_name inf-education-backend.umwelt-campus.de;` also the axios call to 'https://inf-education-backend.umwelt-campus.de;' but I get `POST https://inf-education-backend.umwelt-campus.de/user/login net::ERR_NAME_NOT_RESOLVED`. — why me, Feb 26 '21 at 14:30
I need to add the hsot name "inf-education-backend" so I can use it in the node nginx conf. — why me, Feb 26 '21 at 14:36

score 0 · Accepted Answer · answered Mar 03 '21 at 10:35

I finally solved it by doing:

server{
     listen       80;
     listen       [::]:80;
     server_name  inf-education-67.umwelt-campus.de;
     return 301   https://$server_name$request_uri;
}

server {
     listen       443 ssl;
     listen       [::]:443 ssl http2;
     server_name inf-education-67.umwelt-campus.de;

     # point to ssl certificate path
     include snippets/bcknd/self-signed.conf;
     include snippets/bcknd/ssl-params-bck.conf;
     root /var/www/client/pvapp-client/dist;

     location / {
       allow all;
     }

     location /backend {
          proxy_pass http://localhost:60702;
          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;
          proxy_ssl_verify off;
     }
}

The location /backend did the trick. Just used my normal server_name with /backend in the api and it worked.

nginx proxy to node and ssl on vue/node

1 Answers1