Configure Nginx for react production

Base vector designed by Freepik

Some days ago I had a task for deploy react application to production envoronment. This app should be interact with tomcat backend on the same host. It was legacy system and was decided to deploy react application to nginx and configure proxy to tomcat. How it often happened with enterprise solutions: even in easy task default decision is not our choice.

In this article will be considered configuration nginx for deploy react application in subdirectory, proxy api request to another host and also important part is running nginx by non-root user and organize nginx directory for local user.

The technologies we will use are:

• Nginx;
• Red Hat 7.9;
• create-react-app.

1 Configure Nginx

First of all, if you don’t have special user for running nginx you can create user by following commands:

sudo adduser -m -s /bin/bash service
passwd service
sudo usermod -a -G wheel service

There is we create user service with home user directory, ability to login via bash. Next set password and add user service to sudoers by adding his to group with sudoers privileges. For you it’s can be different group.

Ok, when we have separate user for running nginx. Let’s start with nginx configuration.

For redhat the simplest way to install nginx is by using yum:

sudo yum install nginx

To run nginx by non-root user we should create directories for config and logs in place to which service user have access. Let’s create this direcrories in home user catalog:

/conf
/run
/log
/share
start.sh
stop.sh

Add nginx.conf file to /conf directory. Configuration requirements for this project:

• host react app in subfolder;
• use sub url for react app;
• proxy api requests to tomcat;
• running nginx by non-root user.

worker_processes auto;
error_log /home/service/nginx/log/error.log;
pid /home/service/nginx/run/nginx.pid;
events {
    worker_connections 1024;
}
http {
    access_log            /home/service/nginx/log/access.log  main;
    client_body_temp_path /home/service/nginx/log/client_body;
    fastcgi_temp_path     /home/service/nginx/log/fastcgi_temp;
    proxy_temp_path       /home/service/nginx/log/proxy_temp;
    scgi_temp_path        /home/service/nginx/log/scgi_temp;
    uwsgi_temp_path       /home/service/nginx/log/uwsgi_temp;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    server {
        listen       8081;
        server_name  web_host;
    root /home/service/nginx/share/html;
    location ^~ /rs_ui {
          alias /home/service/nginx/share/html/rs_ui;
          try_files $uri $uri/ /rs_ui/index.html;
        }
    location /rs {
           proxy_pass http://localhost:8080;
        }
    }
}

We use port :8081 because non-root process can listen only ports greeter than 1024.

Set content for ./start.sh and ./stop.sh files for quick start/stop our nginx server. For start nginx with specific config use:

nginx -c /home/service/nginx/conf/nginx.conf

And for stop accordingly:

nginx -c /home/service/nginx/conf/nginx.conf -s stop

For now we have configured nginx that can be ran by non-root user.

Next step is deploy react application.

2 Deploy react application

For host react app in relative path we should make some changes for it.

Set homepage in package.json that correspond with you relative path:

"homepage": "/rs_ui/",

In index.html paste base tag:

<base href="%PUBLIC_URL%/">

And for browser router:

<BrowserRouter basename={process.env.PUBLIC_URL}>
</BrowserRouter>

In my case is was all settings for react application. If you need more configuration see in official docs.

Next for deploy builded application to server use command below:

scp -r ./build/* service@<serverName>:/home/service/nginx/share/html/rs_ui

You can save this command to sh script or makefle.

After that react application is accessed by url:

http://<serverName>:8081/rs_ui

I hope that article was useful for reading.

Good luck with your projects!