Nginx sous Windows déploie des projets React et résout les problèmes de proxy inverse entre domaines, etc.

Others 2020-10-28 09:52:51 views: null

Répertoire d'articles

1. Vue d'ensemble

Nginx (moteur x) est un serveur Web HTTP et proxy inverse haute performance , et fournit également des services IMAP / POP3 / SMTP. Nginx a été développé par Igor Sesoyev pour le deuxième site le plus visité de Russie , Rambler.ru (russe: Рамблер). La première version publique 0.1.0 a été publiée le 4 octobre 2004.

Ce sera le code source de la licence BSD délivrée sous la forme, en raison de sa stabilité, de son riche ensemble de fonctionnalités, de ses fichiers de configuration simples et de sa faible consommation de ressources système et célèbre . Le 1er juin 2011, nginx 1.0.4 est sorti.

Nginx est un poids léger du Web serveur / proxy inverse serveur et e-mail (IMAP / POP3) serveur proxy, distribué sous contrat de type BSD. Ses caractéristiques sont qu'il occupe moins de mémoire et possède de fortes capacités de concurrence . En fait, les capacités de concurrence de nginx fonctionnent mieux dans le même type de serveur Web. Les utilisateurs de Chine continentale qui utilisent les sites Web nginx comprennent: Baidu, Jingdong , Sina , Netease , Tencent , Taobao, etc.

2. Avantages

Nginx peut être compilé et exécuté sur la plupart des systèmes d'exploitation Linux Unix , et il existe une version de port Windows . La version stable de Nginx 1.4.0 est sortie le 24 avril 2013. Généralement, pour les nouveaux sites, il est recommandé d'utiliser la dernière version stable comme version de production L'urgence de la mise à niveau des sites existants n'est pas élevée. Le code source de Nginx utilise une licence de type BSD à 2 clauses.

Nginx est un service Web et proxy inverse très performant et très performant , il possède de nombreuses fonctionnalités très supérieures:

Dans le cas d'une forte concurrence des connexions, Nginx est une bonne alternative aux services Apache : Nginx aux États-Unis est l'une des plates-formes logicielles que les patrons qui font de l'hébergement virtuel choisissent souvent. Il peut prendre en charge jusqu'à 50 000 connexions simultanées. Merci à Nginx d'avoir choisi epoll et kqueue comme modèle de développement pour nous.

3. Pourquoi choisir Nginx

Nginx est un serveur Web léger écrit par le russe Igor Sysoev. Il se prononce [ˈendʒɪnks]. Ce n'est pas seulement un serveur proxy HTTP et inverse haute performance, mais aussi un serveur proxy IMAP / POP3 / SMTP.

En décembre 2019, près d'un site Web sur 3 dans le monde utilise Nginx.

Insérez la description de l'image ici

Nginx est écrit de manière événementielle, il a donc de très bonnes performances et est également un serveur proxy inverse et d'équilibrage de charge très efficace. En termes de performances, Nginx occupe très peu de ressources système, peut prendre en charge plus de connexions simultanées et obtenir une efficacité d'accès plus élevée; en termes de fonction, Nginx est un excellent serveur proxy et serveur d'équilibrage de charge; en termes d'installation et de configuration, Nginx est facile à installer , Configuration flexible.

Nginx prend en charge le déploiement à chaud, la vitesse de démarrage est extrêmement rapide et la version ou la configuration du logiciel peut être mise à niveau sans interruption de service, même si elle fonctionne pendant plusieurs mois sans redémarrage.

Dans le cadre du système de microservices, Nginx est utilisé comme passerelle par de plus en plus de projets, coopérant avec Lua pour la limitation du courant et le contrôle des fusibles.

Insérez la description de l'image ici

Pour les débutants de Nginx, il n'est peut-être pas facile de comprendre ce que le serveur Web peut faire, en particulier ceux qui ont déjà utilisé le serveur Apache, pensant que Nginx peut gérer directement PHP et Java, mais en fait il ne le peut pas. Pour la plupart des utilisateurs, Nginx n'est qu'un serveur de fichiers statiques ou un redirecteur de requêtes http. Il peut renvoyer directement des requêtes de fichiers statiques vers des ressources de fichiers statiques et transmettre des requêtes de fichiers dynamiques à des programmes de traitement en arrière-plan, tels que php-fpm, Apache, tomcat, jetty, etc., ces services d'arrière-plan sont directement accessibles même sans nginx (parfois ces serveurs sont placés sur le pare-feu, non directement exposés à l'extérieur, et convertis via nginx).

4. Télécharger

Site officiel

Télécharger la version stable
Insérez la description de l'image ici

5. Installation

Décompressez-le directement et exécutez-le. Prenons le répertoire racine du lecteur C comme exemple:

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

Ou cliquez simplement pour courir

Insérez la description de l'image ici

Nginx/Win32Il s'exécute dans un programme console, pas dans un windowsservice.

Le mode serveur est toujours en cours de développement. Nginx / Win32 peut utiliser les commutateurs suivants pour le gérer:

Nginx -s stopFermez Nginx rapidement, risque de ne pas enregistrer les informations associées et de mettre fin rapidement au service Web. (Sortie rapide)
Nginx -s quitFermez Nginx en douceur, enregistrez les informations pertinentes et mettez fin au service Web organisé. (Sortie gracieuse)
Nginx -s reloadComme la configuration liée à Nginx est modifiée, la configuration doit être rechargée et rechargée. (Modification de la configuration, démarrage d'un nouveau travailleur, fermeture d'un ancien travailleur en douceur.)
Nginx -s reopenRouvrez le fichier journal. (rouvrir les fichiers journaux)

Insérez la description de l'image ici

Insérez la description de l'image ici

Enter: dans le navigateur localhost：8082, on peut voir que le test est réussi.

Insérez la description de l'image ici

6. Description détaillée des paramètres de configuration

//运行用户
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. Paramètres de ligne de commande

7.1 Démarrer nginx

démarrer nginx 或
nginx.exe

7.2 Redémarrer la configuration de nginx-reload

rechargement de nginx -s

7.3 Arrêter nginx

nginx -s stop ou
nginx -s quit
stop consiste à arrêter rapidement nginx et peut ne pas enregistrer les informations pertinentes; quitter consiste à arrêter nginx complètement et de manière ordonnée et à enregistrer les informations pertinentes.

7.4 NginxSpécifier le fichier de configuration lors de l' exécution

nginx -c /www/nginx.conf

7.5 Fichier journal nouvellement ouvert

rechargement de nginx -s

7.6 nginx.confSi le test réussit après la modification du fichier

$ nginx -t

nginx: la syntaxe du fichier de configuration /usr/local/etc/nginx/nginx.conf est correcte

nginx: le test du fichier de configuration /usr/local/etc/nginx/nginx.conf est réussi

7.7 Liste des paramètres de ligne de commande de nginx

  • -? ou -h affiche les informations d'aide sur les paramètres de ligne de commande
  • -c filespécifie un fichier de configuration pour Nginx pour remplacer la valeur par défaut.
  • -t ne s'exécute pas, mais teste uniquement le fichier de configuration. Nginx vérifiera l'exactitude de la syntaxe du fichier de configuration et essaiera d'ouvrir le fichier référencé dans le fichier de configuration.
  • -v affiche la version de nginx.
  • -V affiche la version de nginx, la version du compilateur et les paramètres de configuration.
  • -q Supprime les messages sans erreur pendant les tests de configuration
  • -s signal envoie un signal au processus maître (maître), les paramètres du signal peuvent être les suivants:
    • arrêt rapide (arrêt forcé, plus rugueux)
    • arrêt normal
    • reload-Recharger la configuration, démarrer un nouveau processus de travail (Worker) après avoir utilisé la nouvelle configuration et quitter le processus de travail normalement.
    • rouvrir-rouvrir le fichier journal.
  • -p prefix Définit le préfixe du chemin nginx, tel qu'un répertoire où les fichiers du serveur sont stockés (la valeur par défaut est / usr / local / nginx)
  • -g directive Définit les directives globales dans le fichier de configuration

8. Publiez le projet React

8.1 Emballage des outils d'échafaudage

npm run build

buildLes fichiers emballés apparaîtront dans le dossier

Insérez la description de l'image ici

8.2 Déploiement

J'ai renommé le fichier publié pour le web01placer sous Nginxle répertoire racine html:

Insérez la description de l'image ici

Nous venons de modifier le fichier de configuration peut être ouvert, une nouvelle cible aux serverobjets http pour

écouter: le numéro de port défini

nom_serveur: le nom de la visite

root: l'adresse où est placé votre projet

index index.html: votre fichier html d'entrée

location / {}: Ceci est basé sur le routage, donc pour éviter 404, nous devons réécrire dans index.html.

8.2.1 Déployer dans le répertoire racine

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模式下
         }
	}
  • Après modification, redémarrez nginx:nginx -s reload
  • Visite: 域名|ip地址OK

8.2.2 Déployer dans un sous-répertoire

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; 
  }
}
  • Après modification, redémarrez nginx:nginx -s reload
  • Visite: 域名|ip地址OK

8.2.3 Interdomaine

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;
        }
	}
  • Après modification, redémarrez nginx:nginx -s reload
  • Visite: 域名|ip地址OK

8.3 Déploiement du projet React sur la fosse

8.3.1 Problème de chemin de fichier, ajoutez la page d'accueil dans package.json (doit être configuré)

Insérez la description de l'image ici

Xiaodi n'était pas équipé pour reactsignaler une erreur avant =>Uncaught Error: Minified React error #130？

Certains problèmes étranges peuvent également être signalés, alors assurez-vous de faire correspondre!

8.3.2 Le problème du chemin de l'image en css, il est recommandé d'utiliser l'importation directement

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

8.3.3 react-dom.production.min.js: 209 Erreur: erreur React réduite n ° 152; rendez-vous sur https://reactjs.org/docs/error-decoder.html?invariant=152&args[[[ ...

Réagissez à la description officielle: https://reactjs.org/docs/error-decoder.html/?invariant=152&args[ewise=a

Insérez la description de l'image ici

Cela signifie que DocumentTitle contient plusieurs balises div. Il est
dommage d’ajouter un commentaire sur le calque le plus externe.

Insérez la description de l'image ici

8.3.4 BrowserRouter HashRouter, une page vierge apparaîtra lorsque la page est actualisée après le déploiement du projet

S'il est utilisé BrowserRouter, une page vierge apparaîtra lorsque la page est actualisée après le déploiement du projet , car le fichier est introuvable ( vous pouvez configurer la redirection vers la page d'accueil en arrière-plan ). BroswerRouterEst-ce que la nécessité de coopérer serveur, redirection côté serveur vers la page d'accueil , BrowserRouterest basée html5sur pushStateet replaceState, de nombreux navigateurs ne prennent pas en charge, des problèmes de compatibilité. Alors enfin, choisissez HashRouter .

Le problème peut être résolu en remplaçant BrowserRouter par HashRouter

Insérez la description de l'image ici

8.3.5 Problèmes de rendu de table

renderUtilisez returnreturn inside , si omis return, le rendercontenu à l'intérieur ne peut pas être exécuté pendant le déploiement

Insérez la description de l'image ici

Insérez la description de l'image ici



(À ajouter plus tard)

Je suppose que tu aimes

Origine blog.csdn.net/u013946061/article/details/107737324
conseillé
Classement
du quotidien
Plus
2024-05-18(31)
2024-05-17(4)
2024-05-16(25)
2024-05-15(5)
2024-05-14(11)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(33)
2024-05-09(31)

Code World

© 2018 codetd.com