☰

Angular を使用した Nginx リバース プロキシでの TTFB が遅い (60 秒)

tag-icon • tag-icon nginx reverse-proxy
Angular を使用した Nginx リバース プロキシでの TTFB が遅い (60 秒)

問題のサーバーはUbuntu 16.04で稼働しており、リバースプロキシ経由でAngularアプリケーションを提供しています。プライマリページに接続すると、すべてのページの読み込みに時間がかかるわけではありませんが、一部のページは確かに時間がかかります。つまり、https://mysite/adminページ。ここにも、ページの他の部分はすべて表示されているのに、ページに表示されない js ボタンがいくつかあります。当サイトは、js スクリプトを使用してトラフィックをルーティングするように構築されていますが、これは TTFB が 60 秒のファイルの 1 つです (TTFB が遅いファイルのほとんどは js です)。リバース プロキシがないとアプリケーション全体が機能しませんが、有効になっていないときは機能することを確認できます。さらに、サイトの TTFB は、最初に読み込まれた後は必ずしも 60 秒ではありませんが、シークレット ウィンドウで読み込まれた場合は常に 60 秒であることを付け加えておくと役立つかもしれません。

nginx.conf

user www-data;
worker_processes 1;
pid /run/nginx.pid;
events {
        worker_connections 1024;
}

http {
    proxy_cache_path /etc/nginx-cache levels=1:2 keys_zone=backcache:8m max_size=50m;                                                                                                                                                         
    proxy_cache_key "$scheme$request_method$host$request_uri$is_args$args";
    proxy_cache_valid 200 302 10m;
    proxy_cache_valid 404 1m;

    client_body_buffer_size 10K;
    client_header_buffer_size 1k;
    client_max_body_size 8m;
    large_client_header_buffers 2 1k;

    upstream mysite {
            server [::]:1337;
     }


    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    #Looked at 12/4
    #fastcgi_buffers 8 16k;
    #fastcgi_buffer_size 32k;

    #client_max_body_size 24M;
    #client_body_buffer_size 128k;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";
     application/javascript                                                                                                                                                              text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

サイトを有効にする/default.conf

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        listen 443 ssl http2; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/mysite.net-0001/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/mysite.net-0001/privkey.pem; # managed by Certbot

        root /home/admin_user/root;

        index index.html index.htm index.nginx-debian.html;

        server_name mysite.net;

        proxy_buffering on;
        proxy_buffer_size 1k;
        proxy_buffers 24 4k;
        proxy_busy_buffers_size 8k;
        proxy_max_temp_file_size 2048m;
        proxy_temp_file_write_size 32k;

        location / {
                sendfile on;
                tcp_nopush on;
                tcp_nodelay on;
                proxy_cache backcache;
                proxy_cache_bypass $http_cache_control;
                add_header X-Proxy-Cache $upstream_cache_status;

                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;

                proxy_http_version 1.1;
                proxy_set_header Connection "";
                proxy_pass http://localhost:1337;
    }
}

答え1

さて、あなたのメッセージから判断すると、リバース プロキシ用にコピー アンド ペーストされた nginx 構成が設定されていると思われます。

構成には次のスタンザがあります:

location / {
            sendfile on;
            tcp_nopush on;
            tcp_nodelay on;
            proxy_cache backcache;
            proxy_cache_bypass $http_cache_control;
            add_header X-Proxy-Cache $upstream_cache_status;

            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;

            proxy_http_version 1.1;
            proxy_set_header Connection "";
            proxy_pass http://localhost:1337;
}

これは、以下のものについては/、コメントにあるように、おそらく存在しないリクエストを送信するlocalhost:1337ことを意味します。Nginxには60秒のタイムアウトがあるため、その時間待機してから、ファイルを配信するフォールバックを推測します。/home/admin_user/root

必要なのは、構成を次のように変更することです。

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        listen 443 ssl http2; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/mysite.net-0001/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/mysite.net-0001/privkey.pem; # managed by Certbot

        index index.html index.htm index.nginx-debian.html;

        server_name mysite.net;

        location / {
            root /home/admin_user/root;
        }
    }

Angular はクライアント側でレンダリングされるアプリケーションであるため、プロキシされるバッキング サーバーはありません。したがって、アセットを で配信するだけです/home/admin_user/root。

関連情報