Nginx no Windows implanta projetos React e resolve problemas de proxy reverso entre domínios, etc.-20.8.1 atualização

1. Visão Geral

Nginx (engine x) é um servidor da Web de proxy reverso e HTTP de alto desempenho , e também fornece serviços IMAP / POP3 / SMTP. O Nginx foi desenvolvido por Igor Sesoyev para o segundo site mais visitado da Rússia , Rambler.ru (russo: Рамблер). A primeira versão pública 0.1.0 foi lançada em 4 de outubro de 2004.

Será o código-fonte da licença BSD emitida no formulário, devido à sua estabilidade, rico conjunto de recursos, arquivos de configuração simples e baixo consumo de recursos do sistema e famoso . Em 1 de junho de 2011, o nginx 1.0.4 foi lançado.

Nginx é um leve da Web / servidor proxy reverso servidor e e-mail (IMAP / POP3) servidor proxy, distribuído sob BSD-like acordo. Suas características são que ele ocupa menos memória e tem forte simultaneidade . Na verdade, a capacidade de simultaneidade do nginx tem melhor desempenho no mesmo tipo de servidor da Web. Os usuários da China continental de sites nginx incluem: Baidu, JD , Sina , NetEase , Tencent , Taobao, etc.

2. Vantagens

O Nginx pode ser compilado e executado na maioria dos sistemas operacionais Unix Linux, e existe uma versão de porta do Windows . A versão estável do Nginx 1.4.0 foi lançada em 24 de abril de 2013. Geralmente, para novos sites, é recomendado usar a versão estável mais recente como a versão de produção. A urgência de atualizar os sites existentes não é alta. O código-fonte do Nginx usa uma licença semelhante a BSD de 2 cláusulas.

Nginx é um serviço de proxy reverso e da Web de alto desempenho muito poderoso , com muitos recursos muito superiores:

No caso de alta simultaneidade de conexões, o Nginx é uma boa alternativa aos serviços do Apache : o Nginx nos Estados Unidos é uma das plataformas de software que os chefes do negócio de hospedagem virtual costumam escolher. Ele pode suportar respostas de até 50.000 conexões simultâneas. Obrigado ao Nginx por escolher epoll e kqueue como o modelo de desenvolvimento para nós.

3. Por que escolher o Nginx

Nginx é um servidor web leve escrito pelo russo Igor Sysoev. É pronunciado [ˈendʒɪnks]. Não é apenas um servidor proxy reverso e HTTP de alto desempenho, mas também um servidor proxy IMAP / POP3 / SMTP.

Em dezembro de 2019, quase 1 em cada 3 sites no mundo usa o Nginx.

O Nginx é escrito de maneira orientada a eventos, por isso tem um desempenho muito bom e também é um proxy reverso e servidor de balanceamento de carga muito eficiente. Em termos de desempenho, o Nginx ocupa muito poucos recursos do sistema, pode suportar mais conexões simultâneas e alcançar maior eficiência de acesso; em termos de função, Nginx é um servidor proxy excelente e servidor de balanceamento de carga; em termos de instalação e configuração, Nginx é fácil de instalar , Configuração flexível.

O Nginx oferece suporte à implantação a quente, a velocidade de inicialização é extremamente rápida e a versão ou configuração do software pode ser atualizada sem interrupção do serviço, mesmo se funcionar por vários meses sem reiniciar.

Sob o sistema de microsserviços, o Nginx está sendo usado como um gateway por mais e mais projetos, cooperando com Lua para limitação de corrente e controle de fusível.

Para iniciantes em Nginx, pode não ser fácil entender o que o servidor web pode fazer, especialmente aqueles que já usaram o servidor Apache antes, pensando que Nginx pode processar PHP e Java diretamente, mas na verdade não pode. Para a maioria dos usuários, o Nginx é apenas um servidor de arquivos estáticos ou encaminhador de solicitações http. Ele pode retornar solicitações de arquivos estáticos diretamente para recursos de arquivos estáticos e encaminhar solicitações de arquivos dinâmicos para programas de processamento em segundo plano, como php-fpm, Apache, tomcat, jetty, etc., esses serviços de back-end podem ser acessados ​​diretamente mesmo sem o nginx (às vezes, esses servidores são colocados no firewall, não diretamente expostos para o exterior e convertidos através do nginx).

4. Baixe

Website oficial

Baixe a versão estável

5. Instalação

Descompacte-o diretamente e execute-o. Vamos pegar o diretório raiz da unidade C como exemplo:

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

Ou apenas clique para executar

Nginx/Win32Ele é executado em um programa de console, não em um windowsserviço.

O modo de servidor ainda está em desenvolvimento. O Nginx / Win32 pode usar as seguintes opções para gerenciá-lo:

Nginx -s stopFeche o Nginx rapidamente, pode não salvar informações relevantes e encerrar rapidamente o serviço da web. (Saída rápida)
Nginx -s quitFeche o Nginx suavemente, salve as informações relevantes e encerre o serviço da web combinado. (Saída normal)
Nginx -s reloadComo a configuração relacionada ao Nginx foi alterada, a configuração precisa ser recarregada e recarregada. (Alterando a configuração, inicie um novo trabalhador, encerrando um trabalhador antigo normalmente.)
Nginx -s reopenReabra o arquivo de log. (reabrindo arquivos de log)

Digite: no navegador localhost：8082, pode-se verificar que o teste foi bem-sucedido.

6. Descrição detalhada dos parâmetros de configuração

//运行用户
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. Parâmetros da linha de comando

7.1 Inicie o nginx

iniciar nginx 或
nginx.exe

7.2 Reinicie a configuração do nginx-reload

nginx -s reload

7.3 Pare o nginx

nginx -s stop ou
nginx -s quit
stop serve para parar rapidamente o nginx e pode não salvar informações relevantes; sair é para parar o nginx completa e ordenadamente e salvar as informações relevantes.

7.4 NginxEspecifique o arquivo de configuração em tempo de execução

nginx -c /www/nginx.conf

7.5 Arquivo de log recém-aberto

nginx -s reload

7.6 nginx.confSe o teste passa após a modificação do arquivo

$ nginx -t

nginx: a sintaxe do arquivo de configuração /usr/local/etc/nginx/nginx.conf está ok

nginx: arquivo de configuração /usr/local/etc/nginx/nginx.conf teste bem-sucedido

7.7 Lista de parâmetros de linha de comando do nginx

• -? ou -h imprime informações de ajuda do parâmetro da linha de comando
• -c fileespecifica um arquivo de configuração para Nginx para substituir o padrão.
• -t não é executado, apenas testa o arquivo de configuração. O Nginx verificará a exatidão da sintaxe do arquivo de configuração e tentará abrir o arquivo referenciado no arquivo de configuração.
• -v exibe a versão do nginx.
• -V exibe a versão do nginx, a versão do compilador e os parâmetros de configuração.
• -q Suprime mensagens de não erro durante o teste de configuração
• O sinal -s envia um sinal para o processo mestre (Mestre), os parâmetros do sinal podem ser os seguintes:
  • desligamento rápido (desligamento forçado, mais brusco)
  • sair-desligamento normal
  • recarregar - recarregar a configuração, iniciar um novo processo de trabalho (Trabalhador) após usar a nova configuração e sair do processo de trabalho normalmente.
  • reabra-reabra o arquivo de log.
• -p prefix define o prefixo do caminho nginx, como um diretório onde os arquivos do servidor são armazenados (o padrão é / usr / local / nginx)
• -g diretiva Define diretivas globais no arquivo de configuração

8. Publique o projeto React

8.1 Embalagem de ferramentas de andaime

npm run build

buildOs arquivos empacotados aparecerão na pasta

8.2 Implantação

Vou arquivar após a liberação, renomear web01no Nginxdiretório raiz do htmlpróximo:

Acabamos de modificar o arquivo de configuração pode ser aberto, um novo destino em serverobjetos http para

ouvir: o número da porta definido

server_name: o nome da visita

root: o endereço onde seu projeto está localizado

index index.html: seu arquivo html de entrada

localização / {}: é baseado no roteamento, portanto, para evitar 404, precisamos reescrever para index.html.

8.2.1 Implementar no diretório raiz

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模式下
         }
	}

• Após a modificação, reinicie o nginx:nginx -s reload
• Visite: 域名|ip地址OK

8.2.2 Implementar em um subdiretório

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; 
  }
}

• Após a modificação, reinicie o nginx:nginx -s reload
• Visite: 域名|ip地址OK

8.2.3 Entre domínios

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;
        }
	}

• Após a modificação, reinicie o nginx:nginx -s reload
• Visite: 域名|ip地址OK

8.3 Reagir implantação do projeto pisando no poço

8.3.1 Problema no caminho do arquivo, adicione a página inicial no pacote.json (deve ser configurado)

Xiaodi não estava equipado para reactrelatar um erro antes =>Uncaught Error: Minified React error #130？

Alguns problemas estranhos também podem ser relatados, portanto, certifique-se de combinar!

8.3.2 O problema do caminho da imagem no css, é recomendado usar a importação diretamente

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

8.3.3 react-dom.production.min.js: 209 Erro: Minified React error # 152; visite https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=a para a mensagem completa ou use o ambiente dev não minimizado para erros completos e avisos úteis adicionais.

Reaja à descrição oficial: https://reactjs.org/docs/error-decoder.html/?invariant=152&args[]=a

Significa: DocumentTitle contém várias tags div. É uma
pena adicionar um comentário na camada mais externa.

8.3.4 BrowserRouter HashRouter, uma página em branco aparecerá quando a página for atualizada após a implantação do projeto

Se for usado BrowserRouter, uma página em branco aparecerá quando a página for atualizada após a implantação do projeto , porque o arquivo não pode ser encontrado ( você pode configurar o redirecionamento para a página inicial em segundo plano ). BroswerRouterÉ a necessidade de cooperar com o servidor, o redirecionamento do lado do servidor para a página inicial , BrowserRouteré baseado html5em pushStatee replaceState, muitos navegadores não suportam, problemas de compatibilidade. Então, finalmente, escolha HashRouter .

O problema pode ser resolvido substituindo BrowserRouter por HashRouter

8.3.5 Problemas de renderização da tabela

renderUse returnreturn inside , se omitido return, o renderconteúdo interno não pode ser executado durante a implantação

(Para ser adicionado mais tarde)