Ad

How To Resolve Port 3000 For HTTPS Using Nginx And NodeJs/NestJs?

- 1 answer

I'm just learning NestJs framework for NodeJs to create web-site with frontend using Vue and backend part. All the components are on this one server: Nginx, frontend and backend (this article helps me https://scotch.io/tutorials/building-a-modern-app-using-nestjs-mongodb-and-vuejs) All worked fine if I connect to web site by IP-address. Then I need migrate it to real site with SSL for HTTPS access. And here is a problem.

On frontend - side I changed the file /nestjs-frontend/src/helper.js to:

// ./src/helper.js
export const server = {
    baseURL: 'https://my_site.ru:3000'
}

NB! Port 3000

And the problem is in access from main domain https://my_site.com to inner API path https://my_site.com:3000

Please help me to resolve this problem.

My Nginx-config is:

server {

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name my_site.com www.my_site.com;

        location / {
                #proxy_set_header Host $host;

                proxy_set_header X-Forwarded-Proto $scheme;
                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 https;
                proxy_set_header        SSL_PROTOCOL $ssl_protocol;

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #proxy_set_header Host $http_host;
                proxy_set_header X-NginX-Proxy true;

                #proxy_set_header    X-Client-Verify  SUCCESS;
                #proxy_set_header    X-Client-DN      $ssl_client_s_dn;
                #proxy_set_header    X-SSL-Subject    $ssl_client_s_dn;
                #proxy_set_header    X-SSL-Issuer     $ssl_client_i_dn;

                proxy_redirect off;

                proxy_pass http://127.0.0.1:8080;
        }

    #listen 8080;
    listen 443 ssl; # managed by Certbot
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/my_site.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_site.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    add_header Strict-Transport-Security "max-age=15768000; includeSubdomains; preload;";

}

server {
    if ($host = www.my_site.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = my_site.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80 default_server;
        listen [::]:80 default_server;

        server_name my_site.com www.my_site.com;
    return 404; # managed by Certbot

}

upstream app_nodejs {
    server 127.0.0.1:3000;
  }

upstream web_nodejs {
    server 127.0.0.1:8080;
  }

enter image description here

Ad

Answer

The problem is that your nginx server is not listening on port 3000. It is only listening on port 443 (https standard port). It is also listening on port 80 (http standard port), but only to redirect to 443.

What you need to do is use a reverse proxy for the api requests from port 443 to port 3000 and the web resource requests to port 8080.

In order to do this, you need a way to distinguish between the API requests and the web requests and create a different location block for each. The typical way to do this is by comparing parts of the url path. For example, you can change your app so that all API request paths look something like:

/api/v1/customers

You can create a location block specifically for API requests like this:

location /api/v1 {
  ...
  proxy_pass http://127.0.0.1:3000;
}

And you keep your other location block in tact. The contents of the new location block should be roughly the same as the original except for the proxy_pass.

If you don't want to change your application, you could enumerate all of your request paths using a regex in a single location block, but this really isn't scalable. It would look like this:

location ~ ^/{customer|item|group}.*$ {
  ...
  proxy_pass http://127.0.0.1:3000;
}
Ad
source: stackoverflow.com
Ad