使用react-app-rewired的nginx进行React生产

Question

I have tried to deploy my app on heroku and it work normally. But when I build my app using react-app-rewired script and deploy it to my server using nginx. When access my app, it still work fine but if I reload page with contextPath: http://35.240.229.243/products it throws 404 error. You can access my app in http://35.240.229.243 to test. I am using react-router with history. Help me thanks

Answer 1

First you need to find default nginx conf file and disable it, by default it will be under /etc/nginx/sites-enabled/default

sudo rm -rf /etc/nginx/sites-enabled/default

and create new file under /etc/nginx/sites-available/

sudo touch /etc/nginx/sites-enabled/default/redbox

and use vim or nano to put this text into new conf file redbox ,

server {
        listen 80;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
}

and enable it

sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox

next, make sure that there are no syntax errors in Nginx files,

sudo nginx -t

If no problems were found, restart Nginx.

sudo systemctl restart nginx