Using ngInx with react js

Question

I am new to the react js. I am trying to use nginx config,

so here is my file

nginx.conf

# auto detects a good number of processes to run
worker_processes auto;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}


http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 80
        listen 80;
        # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /var/www;
        # what file to server as index
        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files $uri $uri/ /index.html;
        }



        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

So, when I am hitting the request then also I am getting a 405 error

what I am trying here is I want to make an API call to a server which is running on a different port . So I tried this way. But now I am not able to do this .

can any one tell me where I need to change ?

Your current nginx configuration looks for files in /var/www for the requests received. If you are running a server at a different port, you need to proxy it accordingly in the location block. — MjZac
– MjZac, Commented Oct 9, 2018 at 5:37
so you mean I have to use proxy_pass localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; — ganesh kaspate
– ganesh kaspate, Commented Oct 9, 2018 at 5:41
If it is just a plain react app, it can be hosted by using nginx alone. You just need to build the react app, copy the files to /var/www. You need to proxy pass only if the react app is coupled with a backend application which serves the react app on requesting a url. — MjZac
– MjZac, Commented Oct 9, 2018 at 5:44
yes It is like that. we call some API so we need to have that proxy. But I have not used proxy in package.json is it okay ? — ganesh kaspate
– ganesh kaspate, Commented Oct 9, 2018 at 5:47

MjZac · Accepted Answer · 2018-10-09 06:17:03Z

Create nginx config for your react app

sudo nano /etc/nginx/sites-available/your_domain.com

server {
    listen 80;
    listen [::]:80;
    server_name your-domain.com;
    access_log /var/log/nginx/your-domain.access.log;
    root /var/www;
    # what file to server as index
    index index.html index.htm;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to redirecting to index.html
        try_files $uri $uri/ /index.html;
    }
}

Create nginx config for your backend api

sudo nano /etc/nginx/sites-available/api.your_domain.com

server {
    listen 80;
    listen [::]:80;
    server_name api.your-domain.com;
    access_log /var/log/nginx/api.your-domain.access.log;
    root /var/www;
    # what file to server as index
    index index.html index.htm;

    location / {
        proxy_pass    http://127.0.0.1:8081/;
    }
}

Create symlinks to enable the apps.

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/

sudo ln -s /etc/nginx/sites-available/api.your_domain.com /etc/nginx/sites-enabled/

check for errors.

nginx -t

restart nginx

sudo service nginx restart

Copy the react build files to /var/www (It should have an index.html file)

Make sure to run your backend at port 8081.

Make the Api calls from react app to api.your-domain.com

Daniel · Accepted Answer · 2020-11-02 22:57:44Z

1

Did you proxy your API url?

{
...
,
  "proxy": "localhost_or_url:your_port",
  "scripts": {
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

By the way, remember that you need to run a production version of app thus you can serve it with nginx

edited Nov 2, 2020 at 22:57

Daniel

1,4701 gold badge7 silver badges19 bronze badges

answered Oct 9, 2018 at 5:44

D3Portillo

3442 silver badges6 bronze badges

1 Comment

ganesh kaspate Over a year ago

No I have not used that.

Collectives™ on Stack Overflow

Using ngInx with react js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related