Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to deploy a react project in nginx" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to deploy a react project in nginx" article can help you solve the problem.

Test item react-demo

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

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

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

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

To configure the Nginx,Linux server, enter: / etc/nginx/sites-enabled, then as an administrator, create a new configuration file for your react project, such as react-demo.conf, and 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

} perform a sudo service nginx restart to restart the Nginx service.

Access project, http://IP:8080/

Note:

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

two。 If you are using browser story mode that reflects the router, add the following configuration to the Nginx configuration:

Location /

Try _ files $uri $uri//index. Html

} principle, because our project has only one root entry, you can't find this page by typing a url like / home. This is because nginx will try to load index.html, and after loading index.html, react-router will work and match the / home route we entered to display the correct home page. If the project in browser story mode is not configured with the above, a 404 situation will occur.

This is the end of the introduction to "how to deploy a react project in nginx". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.