How to deploy a react project in nginx

Test item react-demo

Clone your react-demo project to the server (by default, Github is used to manage our projects)

Like If necessary, please install the project environment, such as node.js, yarn, etc.

Enter the project directory, execute npm to run the build, and start building the project

After a successful build, a dist folder will be generated (depending on your project configuration), with static files in this folder The file will become the access file for our project.

To configure Nginx, Linux server enter: /etc/nginx/sites-enabled, then as administrator, create a new configuration file for your react project, such as react-demo.conf, and then edit the File:

server{

listen8080

# server _ name your . domain.com;

root/home/root/react-demo/dist ;

indexindex.htmlindex.htm;

location/

try _ files $ uri $ uri//index .html;

}

location^~/assets/{

gzip _ staticon

expiresmax

add _ header cache-control public;

}

error _ page 500502503504/500 .html；

client _ max _ body _ size20M

keepalive _ timeout10

}Execute sudo service nginx restart to restart the Nginx service .

Access project, http://IP:8080/

Notes:

1. If you configure a domain name, you need 80 ports. After success, you only need to access the domain name to access the project

2. If you are using the browser story mode of react router, please add the following configuration to the Nginx configuration:

location/

try _ files $ uri $ uri//index . html;

} principle, because our project has only one root entry, this page cannot be found when entering a url like /home. This is because nginx will try to load index.html. After loading index.html, react-router will work and match the /home route we entered, thus displaying the correct home page. If the project in browser story mode does not configure the above content, a 404 will occur.

The above is the detailed content of How to deploy a react project in nginx. For more information, please follow other related articles on the PHP Chinese website!