Example method of deploying react project on nginx

Test project: react-demo

1. Clone your react-demo project to the server (Github is used to manage our project by default)
2. If necessary, please install the project environment, such as: node.js, yarn, etc.
3. Enter the project directory and execute npm run build to start building the project
4. After the build is successful, a dist folder will be generated (depending on your project configuration). The static files in this folder are the access files of our project.
5. To configure Nginx, on a Linux server, go to: /etc/nginx/sites-enabled, then as an administrator, create a new configuration file for your react project, such as: react-demo.conf, and then edit the file:

server {
  listen 8080;
  # server_name your.domain.com;
  root /home/root/react-demo/dist;
  index index.html index.htm;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }
  error_page 500 502 503 504 /500.html;
  client_max_body_size 20M;
  keepalive_timeout 10;
}

Execute sudo service nginx restart to restart the Nginx service.

Access the project, http://IP:8080/

Note:

1. If you configure the domain name, port 80 is required. After success, you can access the project by simply accessing the domain name

2. If you use the browserHistory 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, when entering a URL like /home, the page cannot be found. In this case, nginx will try to load index.html. After loading index.html, react-router will work and match the /home route we entered, thereby displaying the correct home page. If the project in browserHistory mode is not configured with the above content, a 404 error will occur.

Please refer to the react-router documentation:

https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM. If you want to learn more about this, please check out the following links