0

I am running node js apps inside a vps.

This is my nginx configuration:

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location /ecapp/ {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

localhost:8000/api is the backend server using mongodb atlas. I have confirmed this works by using postman and sending requests.

localhost:3000 is the front-end app.

The front-end app only works via my vps' public ip if:

server {
    listen       80;
    server_name  xxx.xxx.xxx.xxx;
    #access_log   logs/ecommerce.access.log  main;
    
    location /ecommerce/api/ {
        proxy_pass      http://127.0.0.1:8000/api/;
    }
    
    location / {
        proxy_pass      http://127.0.0.1:3000/;
    }
}

location other than / like /ecapp/ won't work. Only location / works.

I would like to access the front-end app via something other than http://my_vps_ip/ like http://my_vps_ip/ecapp.

Any help is appreciated.

2 Answers 2

0

I figured it out so I'm posting my solution here.

OBJECTIVE

To host create-react-app site at http://my_public_vps_addr:port/sub_path.

PROCEDURE

  1. in .env file: a) set NODE_ENV=production b) set PUBLIC_URL to http://my_public_vps_addr:port/sub_path
  2. set basename: <Router basename=’/sub_path’></Router>
  3. npm run build a) this generates static files inside build/ directory.
  4. Copy contents build/* to /var/www/sub_path/html/sub_path/
  5. cd to /var/www/sub_path/html/ a) sudo find . -type d -exec chmod 755 {} \; b) sudo find . -type f -exec chmod 644 {} \;
  6. touch /etc/nginx/sites-available/sub_path a) ln -s /etc/nginx/sites-available/sub_path /etc/nginx/sites-enabled/sub_path
  7. Content of /etc/nginx/sites-available/sub_path
    server {
      listen port;
      listen [::]:port;
      root /var/www/sub_path/html;
      index index.html index.htm index.nginx-debian.html;
      server_name my_public_vps_addr:port;
      location /sub_path {
        try_files $uri $uri/ /index.html =404
      }
    }
  1. Restart nginx service: a) sudo systemctl restart nginx.service
  2. Your site should be available from http://my_public_vps_addr:port/sub_path
  3. That’s it!
-1

With location set to /ecapp/, when I load http://my_vps_ip/ecapp and check the console I get:

GET http://my_public_vps_addr/static/js/bundle.js
GET http://my_public_vps_addr/static/js/0.chunk.js
GET http://my_public_vps_addr/static/js/main.chunk.js
Loading failed for the <script> with source “http://my_vps_public_ip/static/js/bundle.js”.
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/0.chunk.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_vps_ip_public_ip/static/js/main.chunk.js”. ecapp:30:1 

Why is it looking for static files? There is no static directory under /var/www/html/.

The source code for the ecommerce project is here: https://github.com/kaloraat/react-node-ecommerce

3
  • Because you are running a different config on your nginx server than you showed us here or have other rewrites in the chain.
    – symcbean
    Commented Nov 18, 2021 at 23:02
  • No I'm pretty sure nginx uses the config above for above locations.
    – Logan Lee
    Commented Nov 18, 2021 at 23:20
  • 1) you only read half my comment 2) where is "static" coming from then
    – symcbean
    Commented Nov 19, 2021 at 1:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .