WindowsでのNginxは、Reactプロジェクトを展開し、リバースプロキシクロスドメインの問題などを解決します。-20.8.1アップデート

1。概要

Nginx（engine x）は、高性能のHTTPおよびリバースプロキシWebサーバーであり、IMAP / POP3 / SMTPサービスも提供します。Nginxは、ロシアで2番目に訪問されたサイトであるRambler.ru（ロシア語：Рамблер）のためにIgor Sesoyevによって開発されました。最初の公開バージョン0.1.0は、2004年10月4日にリリースされました。

それは次のようになりますソースコード、その安定性、豊富な機能セット、簡単な設定ファイルと低システムリソースの消費量との、形で発行されたBSDライセンスに有名。2011年6月1日、nginx1.0.4がリリースされました。

Nginxは、軽量のWebサーバー/リバースプロキシサーバーおよび電子メール（IMAP / POP3）プロキシサーバーであり、BSDのような合意の下で配布されます。その特徴は、占有するメモリが少なく、強力な同時実行機能を備えていることです。実際、nginxの同時実行機能は、同じタイプのWebサーバーで優れたパフォーマンスを発揮します。nginxWebサイトの中国本土のユーザーには、Baidu、JD、Sina、NetEase、Tencent、Taobaoなどがあります。

2.利点

Nginxは、ほとんどのUnix Linux OSでコンパイルおよび実行でき、Windowsポートバージョンがあります。Nginx 1.4.0の安定版は、2013年4月24日にリリースされました。通常、新しいサイトの場合は、最新の安定版を製品版として使用することをお勧めします。既存のサイトをアップグレードする緊急性は高くありません。Nginxのソースコードは、2節のBSDのようなライセンスを使用しています。

Nginxは、非常に強力な高性能Webおよびリバースプロキシサービスであり、多くの非常に優れた機能を備えています。

接続の同時実行性が高い場合、NginxはApacheサービスの優れた代替手段です。米国のNginxは、仮想ホスティングビジネスのボスがよく選択するソフトウェアプラットフォームの1つです。最大50,000の同時接続の応答をサポートできます。開発モデルとしてepollとkqueueを選択してくれたNginxに感謝します。

3.なぜNginxを選ぶのか

Nginxは、ロシアのIgor Sysoevによって作成された軽量のWebサーバーで、[ˈendʒɪnks]と発音されます。これは、高性能のHTTPおよびリバースプロキシサーバーであるだけでなく、IMAP / POP3 / SMTPプロキシサーバーでもあります。

2019年12月の時点で、世界の3つのWebサイトのほぼ1つがNginxを使用しています。

Nginxはイベント駆動型で記述されているため、パフォーマンスが非常に高く、非常に効率的なリバースプロキシおよび負荷分散サーバーでもあります。パフォーマンスの点では、Nginxはシステムリソースをほとんど占有せず、より多くの同時接続をサポートでき、より高いアクセス効率を実現できます。機能の点では、Nginxは優れたプロキシサーバーおよび負荷分散サーバーです。インストールと構成の点では、Nginxは簡単にインストールできます。 、柔軟な構成。

Nginxはホットデプロイメントをサポートし、起動速度は非常に高速であり、ソフトウェアのバージョンまたは構成は、再起動せずに数か月実行した場合でも、サービスを中断することなくアップグレードできます。

マイクロサービスシステムの下で、Nginxはますます多くのプロジェクトによってゲートウェイとして使用されており、電流制限とヒューズ制御のためにLuaと協力しています。

Nginxの初心者、特に以前にApacheサーバーを使用したことがある人は、NginxがPHPとJavaを直接処理できると考えて、Webサーバーで何ができるかを理解するのは簡単ではないかもしれませんが、実際にはできません。ほとんどのユーザーにとって、Nginxは単なる静的ファイルサーバーまたはhttpリクエストフォワーダーです。静的ファイルリクエストを静的ファイルリソースに直接返し、動的ファイルリクエストをphp-fpmなどのバックグラウンド処理プログラムに転送できます。 Apache、tomcat、jettyなど、これらのバックグラウンドサービスには、nginxがなくても直接アクセスできます（これらのサーバーはファイアウォールに配置され、外部に直接公開されず、nginxを介して変換される場合があります）。

4.ダウンロード

公式ウェブサイト

安定版をダウンロード

5.インストール

直接解凍して実行します。例として、Cドライブのルートディレクトリを見てみましょう。

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

または、クリックして実行します

Nginx/Win32windowsサービスではなく、コンソールプログラムで実行されます。

サーバーモードはまだ開発中です。Nginx/ Win32は次のスイッチを使用して管理できます。

Nginx -s stopNginxをすばやく閉じ、関連情報を保存できない可能性があり、Webサービスをすぐに終了します。（クイック終了）
Nginx -s quitNginxをスムーズに閉じ、関連情報を保存し、配置されたWebサービスを終了します。（正常終了）
Nginx -s reloadNginx関連の構成が変更されたため、構成を再ロードして再ロードする必要があります。（構成を変更し、新しいワーカーを開始し、古いワーカーを正常に終了
Nginx -s reopenします。）ログファイルを再度開きます。（ログファイルを再度開く）

次のように入力します。ブラウザlocalhost：8082で、テストが成功したことがわかります。

6.構成パラメーターの詳細な説明

//运行用户
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.コマンドラインパラメータ

7.1nginxを起動します

nginxまたは
nginx.exeを起動します

7.2nginx-reload構成を再起動します

nginx-sリロード

7.3nginxを停止します

nginx -sstopまたは
nginx-s quit
stopは、nginxをすばやく停止し、関連情報を保存しない場合があります。quitは、nginxを完全かつ整然と停止し、関連情報を保存することです。

7.4実行時にNginx構成ファイルを指定する

nginx -c /www/nginx.conf

7.5新しく開いたログファイル

nginx-sリロード

7.6nginx.confファイルを変更した後にテストに合格するかどうか

$ nginx -t

nginx：構成ファイル/usr/local/etc/nginx/nginx.conf構文は問題ありません

nginx：構成ファイル/usr/local/etc/nginx/nginx.confテストが成功しました

7.7nginxのコマンドラインパラメータのリスト

• -？または-hprintコマンドラインパラメータのヘルプ情報
• -cfileは、デフォルトを置き換えるNginxの構成ファイルを指定します。
• -tは実行されませんが、構成ファイルをテストするだけです。Nginxは、構成ファイルの構文が正しいかどうかを確認し、構成ファイルで参照されているファイルを開こうとします。
• -vは、nginxのバージョンを表示します。
• -Vは、nginxのバージョン、コンパイラのバージョン、および構成パラメータを表示します。
• -q構成テスト中の非エラーメッセージを抑制します
• -s信号は、マスタープロセス（マスター）に信号を送信します。信号パラメーターは次のとおりです。
  • 停止-高速シャットダウン（強制シャットダウン、より粗雑）
  • 終了-通常のシャットダウン
  • リロード-構成をリロードし、新しい構成を使用した後に新しいワーカープロセス（ワーカー）を開始し、通常どおりワークプロセスを終了します。
  • reopen-ログファイルを再度開きます。
• -p prefixは、サーバーファイルが保存されるディレクトリなどのnginxパスプレフィックスを設定します（デフォルトは/ usr / local / nginx）
• -gディレクティブ構成ファイルにグローバルディレクティブを設定します

8.Reactプロジェクトを公開します

8.1足場ツールのパッキング

npm run build

buildパッケージ化されたファイルがフォルダに表示されます

8.2展開

リリース後、次のルートディレクトリに名前を変更web01します。Nginxhtml

構成ファイルを変更するだけで、httpserverオブジェクトの新しいターゲットを開くことができます。

リッスン：設定されたポート番号

server_name：訪問の名前

ルート：プロジェクトが配置されているアドレス

index index.html：エントリのhtmlファイル

location / {}：これはルーティングに基づいているため、404を回避するには、index.htmlに書き換える必要があります。

8.2.1ルートディレクトリにデプロイする

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

• 変更後、nginxを再起動します。nginx -s reload
• 訪問：域名|ip地址OK

8.2.2サブディレクトリにデプロイする

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

• 変更後、nginxを再起動します。nginx -s reload
• 訪問：域名|ip地址OK

8.2.3クロスドメイン

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

• 変更後、nginxを再起動します。nginx -s reload
• 訪問：域名|ip地址OK

8.3ピットを踏むReactプロジェクトの展開

8.3.1ファイルパスの問題、package.jsonにホームページを追加（構成する必要があります）

Xiaodiは以前にreactエラーを報告する機能を備えていませんでした=>Uncaught Error: Minified React error #130？

いくつかの奇妙な問題も報告される可能性があるので、必ず一致させてください！

8.3.2cssのイメージパスの問題。インポートを直接使用することをお勧めします

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

8.3.3 react-dom.production.min.js：209エラー：縮小されたReactエラー＃152; 完全なメッセージについてはhttps://reactjs.org/docs/error-decoder.html?invariant=152&args[]=aにアクセスするか、完全なエラーと追加の役立つ警告については縮小されていない開発環境を使用してください。

Reactの公式説明：https：//reactjs.org/docs/error-decoder.html/？invariant = 152 ＆ args [] = a

つまり、DocumentTitleには複数のdivタグが含まれています。
最外層にコメントを追加するのは残念です。

8.3.4 BrowserRouter HashRouter、プロジェクトのデプロイ後にページが更新されると、空白のページが表示されます

これを使用するとBrowserRouter、ファイルが見つからないため、プロジェクトの展開後にページを更新すると空白のページが表示されます（バックグラウンドでホームページへのリダイレクトを構成できます）。BroswerRouterサーバー、協力する必要があるホームページにサーバー側のリダイレクトは、BrowserRouterベースにhtml5してpushStateとreplaceState、多くのブラウザがサポートしていませんが、互換性の問題。したがって、最後にHashRouterを選択します。

この問題は、BrowserRouterをHashRouterに置き換えることで解決できます。

8.3.5テーブルレンダリングの問題

render内部のreturnリターンを使用します。省略したreturn場合、render内部のコンテンツは展開中に実行できません。

（後で追加されます）