Nginx under Windows deploys React projects and solves reverse proxy cross-domain issues, etc.-20.8.1 update

1 Overview

Nginx (engine x) is a high-performance HTTP and reverse proxy web server, and also provides IMAP/POP3/SMTP services. Nginx was developed by Igor Sesoyev for the second most visited site in Russia , Rambler.ru (Russian: Рамблер). The first public version 0.1.0 was released on October 4, 2004.

It will be the source code to BSD license issued in the form, because of its stability, rich feature set, simple configuration files and low system resource consumption and famous . On June 1, 2011, nginx 1.0.4 was released.

Nginx is a lightweight of Web server / reverse proxy server and e-mail (IMAP / POP3) proxy server, distributed under BSD-like agreement. Its characteristics are that it occupies less memory and has strong concurrency capabilities. In fact, nginx's concurrency capabilities perform better in the same type of web server. Mainland Chinese users of nginx websites include: Baidu, JD.com , Sina , NetEase , Tencent , Taobao, etc.

2. Advantages

Nginx can be compiled and run on most Unix Linux OS, and there is a Windows port version. The stable version of Nginx 1.4.0 was released on April 24, 2013. Generally, for new sites, it is recommended to use the latest stable version as the production version. The urgency of upgrading existing sites is not high. The source code of Nginx uses a 2-clause BSD-like license.

Nginx is a very powerful high-performance Web and reverse proxy service, it has many very superior features:

In the case of high concurrency of connections, Nginx is a good alternative to Apache services: Nginx in the United States is one of the software platforms that bosses in the virtual hosting business often choose. It can support responses of up to 50,000 concurrent connections. Thanks to Nginx for choosing epoll and kqueue as the development model for us.

3. Why choose Nginx

Nginx is a lightweight web server written by Russian Igor Sysoev. It is pronounced [ˈendʒɪnks]. It is not only a high-performance HTTP and reverse proxy server, but also an IMAP/POP3/SMTP proxy server.

As of December 2019, almost 1 out of 3 websites in the world uses Nginx.

Nginx is written in an event-driven manner, so it has very good performance and is also a very efficient reverse proxy and load balancing server. In terms of performance, Nginx occupies very few system resources, can support more concurrent connections, and achieve higher access efficiency; in terms of function, Nginx is an excellent proxy server and load balancing server; in terms of installation and configuration, Nginx is easy to install , Flexible configuration.

Nginx supports hot deployment, the startup speed is extremely fast, and the software version or configuration can be upgraded without interruption of service, even if it runs for several months without restarting.

Under the microservice system, Nginx is being used as a gateway by more and more projects, cooperating with Lua for current limiting and fuse control.

For Nginx beginners, it may not be easy to understand what the web server can do, especially those who have used the Apache server before, thinking that Nginx can directly process PHP and Java, but in fact it cannot. For most users, Nginx is just a static file server or http request forwarder. It can directly return static file requests to static file resources, and forward dynamic file requests to background processing programs, such as php-fpm, Apache, tomcat, jetty, etc., these background services can be directly accessed even without nginx (sometimes these servers are placed on the firewall, not directly exposed to the outside, and converted through nginx).

4. Download

Official website

Download stable version

5. Installation

Unzip it directly and run it. Let's take the root directory of C drive as an example:

 cd C:
 cd C:\nginx-0.8.54   
 start nginx

Or click directly to run

Nginx/Win32It runs in a console program, not a windowsservice.

The server mode is still under development. Nginx/Win32 can use the following switches to manage it:

Nginx -s stopClose Nginx quickly, may not save relevant information, and quickly terminate the web service. (Quick exit)
Nginx -s quitClose Nginx smoothly, save relevant information, and terminate the web service arranged. (Graceful exit)
Nginx -s reloadBecause the Nginx related configuration is changed, the configuration needs to be reloaded and reloaded. (Changing configuration, start a new worker, quitting an old worker gracefully.)
Nginx -s reopenReopen the log file. (reopenging log files)

Enter: in the browser localhost：8082, it can be seen that the test is successful.

6. Detailed description of configuration parameters

//运行用户
user nobody;
//启动进程,通常设置成和cpu的数量相等
worker_processes  1;

//全局错误日志及PID文件
//error_log  logs/error.log;
//error_log  logs/error.log  notice;
//error_log  logs/error.log  info;

//pid        logs/nginx.pid;

//工作模式及连接数上限
events {
    
    
    //epoll是多路复用IO(I/O Multiplexing)中的一种方式,
    //仅用于linux2.6以上内核,可以大大提高nginx的性能
    use   epoll; 

    //单个后台worker process进程的最大并发链接数    
    worker_connections  1024;

    // 并发总数是 worker_processes 和 worker_connections 的乘积
    // 即 max_clients = worker_processes * worker_connections
    // 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4  为什么
    // 为什么上面反向代理要除以4，应该说是一个经验值
    // 根据以上条件，正常情况下的Nginx Server可以应付的最大连接数为：4 * 8000 = 32000
    // worker_connections 值的设置跟物理内存大小有关
    // 因为并发受IO约束，max_clients的值须小于系统可以打开的最大文件数
    // 而系统可以打开的最大文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右
    // 我们来看看360M内存的VPS可以打开的文件句柄数是多少：
    // $ cat /proc/sys/fs/file-max
    // 输出 34336
    // 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内
    // 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置
    // 使得并发总数小于操作系统可以打开的最大文件数目
    // 其实质也就是根据主机的物理CPU和内存进行配置
    // 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。
    // ulimit -SHn 65535

}


http {
    
    
    //设定mime类型,类型由mime.type文件定义
    include    mime.types;
    default_type  application/octet-stream;
    //设定日志格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    //sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，
    //对于普通应用，必须设为 on,
    //如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，
    //以平衡磁盘与网络I/O处理速度，降低系统的uptime.
    sendfile     on;
    //tcp_nopush     on;

    //连接超时时间
    //keepalive_timeout  0;
    keepalive_timeout  65;
    tcp_nodelay     on;

    //开启gzip压缩
    gzip  on;
    gzip_disable "MSIE [1-6].";

    //设定请求缓冲
    client_header_buffer_size    128k;
    large_client_header_buffers  4 128k;


    //设定虚拟主机配置
    server {
    
    
        //侦听80端口
        listen    80;
        //定义使用 www.nginx.cn访问
        server_name  www.nginx.cn;

        //定义服务器的默认网站根目录位置
        root html;

        //设定本虚拟主机的访问日志
        access_log  logs/nginx.access.log  main;

        //默认请求
        location / {
    
    
            
            //定义首页索引文件的名称
            index index.php index.html index.htm;   

        }

        // 定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        location = /50x.html {
    
    
        }

        //静态文件，nginx自己处理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ {
    
    
            
            //过期30天，静态文件不怎么更新，过期可以设大一点，
            //如果频繁更新，则可以设置得小一点。
            expires 30d;
        }

        //PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI默认配置.
        location ~ .php$ {
    
    
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include fastcgi_params;
        }

        //禁止访问 .htxxx 文件
            location ~ /.ht {
    
    
            deny all;
        }

    }
}

7. Command line parameters

7.1 Start nginx

start nginx 或
nginx.exe

7.2 Restart nginx-reload configuration

nginx -s reload

7.3 Stop nginx

nginx -s stop or
nginx -s quit
stop is to quickly stop nginx and may not save relevant information; quit is to stop nginx in a complete and orderly manner and save relevant information.

7.4 NginxSpecify configuration file at runtime

nginx -c /www/nginx.conf

7.5 Newly opened log file

nginx -s reload

7.6 nginx.confWhether the test passes after modifying the file

$ nginx -t

nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok

nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful

7.7 List of command line parameters of nginx

• -? or -h print command line parameter help information
• -c filespecifies a configuration file for Nginx to replace the default.
• -t does not run, but only tests the configuration file. nginx will check the correctness of the syntax of the configuration file and try to open the file referenced in the configuration file.
• -v displays the version of nginx.
• -V displays the version of nginx, compiler version and configuration parameters.
• -q Suppress non-error messages during configuration testing
• -s signal sends a signal to the master process (Master), the signal parameters can be the following:
  • stop-fast shutdown (forced shutdown, more crude)
  • quit-normal shutdown
  • reload-Reload the configuration, start a new worker process (Worker) after using the new configuration, and exit the work process normally.
  • reopen-reopen the log file.
• -p prefix sets the nginx path prefix, such as a directory where server files are stored (the default is /usr/local/nginx)
• -g directive Set global directives in the configuration file

8. Publish the React project

8.1 Packing of scaffolding tools

npm run build

buildThe packaged files will appear in the folder

8.2 Deployment

I will file after the release rename web01in Nginxthe root directory of htmlthe next:

We just modify the configuration file can be opened, a new target at http serverobjects to

listen: the port number set

server_name: the name of the visit

root: the address where your project is placed

index index.html: your entry html file

location/{}: This is based on routing, so in order to avoid 404, we need to rewrite to index.html.

8.2.1 Deploy to the root directory

http {
    
    
         listen  80;   // 监听80端口
         server_name  test.com; // 你的域名或者IP地址

         location / {
    
     // 根目录
           root  html\web01; // 前端文件路径
           index  index.html; // hash模式只配置访问html就可以了
           try_files $uri $uri/ /index.html; // history模式下
         }
	}

• After modification, restart nginx:nginx -s reload
• Visit: 域名|ip地址OK

8.2.2 Deploy to a subdirectory

server {
    
    
  listen  80;
  server_name  test.com; // 你的域名或者ip地址

  location /demo {
    
     // 子级目录
    alias  /front/demo; // 前端也要配置二级目录，react项目是在环境配置文件中配置属性PUBLIC_URL=/demo,把前端打包的build目录下的内容，放在服务器对应的二级目录下demo下
    index  index.html;
    try_files $uri $uri/ /demo/index.html; 
  }
}

• After modification, restart nginx:nginx -s reload
• Visit: 域名|ip地址OK

8.2.3 Cross-domain

http {
    
    
	server {
    
    
		listen       8082;
		server_name  localhost;
		
        // /api 请求都转发到  https://data.6xd.com/
		 location /api {
    
     
            proxy_pass  https://data.6xd.com/;   
        }  
		
		location / {
    
    
            root   html\web01;
            index  index.html;
        }
	}

• After modification, restart nginx:nginx -s reload
• Visit: 域名|ip地址OK

8.3 React project deployment steps

8.3.1 File path problem, add homepage in package.json (must be configured)

Xiaodi was not equipped to reactreport an error before =>Uncaught Error: Minified React error #130？

Some strange problems may also be reported, so be sure to match!

8.3.2 The image path problem in css, it is recommended to use import directly

import bgimg from './images/bg.jpg'
<div className='login' style={
    
    {
    
    backgroundImage:`url(${
      
      bgimg})`}}></div>

8.3.3 react-dom.production.min.js:209 Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=a for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

React official description: https://reactjs.org/docs/error-decoder.html/?invariant=152&args[]=a

It means: DocumentTitle contains multiple div tags. It’s a
shame to add a comment on the outermost layer.

8.3.4 BrowserRouter HashRouter, a blank page will appear when the page is refreshed after deploying the project

If it is used BrowserRouter, a blank page will appear when the page is refreshed after deploying the project , because the file can not be found ( you can configure the redirection to the home page in the background ). BroswerRouterIs the need to cooperate server, server-side redirect to the home page , BrowserRouteris based html5in pushStateand replaceState, many browsers do not support, compatibility issues. So finally choose HashRouter .

The problem can be solved by replacing BrowserRouter with HashRouter

8.3.5 Table rendering issues

renderUse returnreturn inside , if omitted return, the rendercontent inside cannot be executed during deployment

(To be added later)