Nginxの実践的な問題解決 - 指定したページにアクセスするためのアドレスを指定する方法

画像.png

問題の再発

/var/www/dist/biographicalNotes/biographicalNotes.html の下に HTML ファイルがあります。実際のnginxプロキシは次のようになります

server {
    listen 8080;
    server_name localhost;
    root /var/www/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # Allow access to static resources
    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/dist;
    }
}

この Nginx 構成は主にポート 8080 でリッスンするために使用され、基本的な静的ファイルサーバーを定義します。各部分の説明は次のとおりです。

listen 8080;: ポート 8080 でリッスンするように Nginx を指定します。
server_name localhost;: サーバーブロックの名前を指定します (この場合は localhost)。
root /var/www/dist;: Web サイトのルートディレクトリを指定します。ここでは /var/www/dist です。すべてのファイルパスは、このルートディレクトリからの相対パスです。
index index.html;: デフォルトのインデックスファイルを index.html に定義します。ファイル名を指定せずにディレクトリにアクセスすると、デフォルトで index.html のロードが試行されます。
location / { ... }: ルートパス / に対するリクエストを処理します。 try_files $uri $uri/ /index.html; は、指定された順序でファイルを検索しようとすることを意味し、見つからない場合は /index.html を返します。
location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ { ... }: 画像、CSS、JavaScript、SVG ファイルなどの静的リソースに対するリクエストを処理します。 expires max; と add_header Cache-Control "public, max-age=31536000"; を設定すると、ブラウザのキャッシュが有効になり、ページの読み込み速度が向上します。
error_page 500 502 503 504 /50x.html;: エラーページへのパスを定義します。500、502、503、または 504 エラーが発生すると、/50x.html が返されます。
location = /50x.html { ... }: /50x.html のリクエストを処理し、このエラーページを返します。

しかし、このページにアクセスするには localhost:8080/description が必要です。どうやって解決すればよいでしょうか? /var/www/dist/biographicalNotes/biographicalNotes.html

問題が解決しました

server {
    listen 8080;
    server_name localhost;

    root /var/www/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /description/ {
        alias /var/www/dist/biographicalNotes/;
        try_files $uri $uri/ /biographicalNotes.html;

        location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
            expires max;
            add_header Cache-Control "public, max-age=31536000";
        }
    }

    # Allow access to static resources
    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/dist;
    }
}

そこでセクションを追加しました。この構成は主に、アクセスパスが /description/ で始まるリクエストを処理するために使用されます。この設定ブロックをステップごとに説明してみましょう。

location /description/ {
    alias /var/www/dist/biographicalNotes/;
    try_files $uri $uri/ /biographicalNotes.html;

    location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ {
        expires max;
        add_header Cache-Control "public, max-age=31536000";
    }
}

location /description/ { ... }:
- これは、パス一致ルール、つまり、で始まるリクエストの処理を指定する Nginx location ブロックです。 /description/
alias /var/www/dist/biographicalNotes/;:
- は、alias ディレクティブを使用して実際のファイルシステムパスを指定し、リクエストを /var/www/dist/biographicalNotes/ ディレクトリにマッピングします。これは、アクセス /description/ が /var/www/dist/biographicalNotes/ にマッピングされることを意味します。
try_files $uri $uri/ /biographicalNotes.html;:
- try_filesこのディレクティブは、指定された順序でファイルを検索しようとし、見つからない場合は、最後のパラメータのパスを返します。
- $uri現在のリクエストの URI を表します。
- $uri/ は、ディレクトリの検索が試行されることを意味します。たとえば、リクエストが /description/something/ の場合、 /var/www/dist/biographicalNotes/something/ ディレクトリの検索が試行されます。。
- /biographicalNotes.htmlは、以前の試行が失敗した場合にこのファイルが返される最後の代替パスです。
location ~* .(jpg|jpeg|png|gif|ico|css|js|svg)$ { ... }:
- 画像、CSS、JavaScript、SVG ファイルなど、特定のタイプの静的ファイルを処理するためのネストされた location ブロック。
- ~*次の正規表現の大文字と小文字を区別しない一致を示します。
- .(jpg|jpeg|png|gif|ico|css|js|svg)$これらの拡張子で終わるファイルと一致します。
- expires max;ブラウザのキャッシュ有効期限を最大値に設定します。
- add_header Cache-Control "public, max-age=31536000";ブラウザがこれらの静的リソースをキャッシュできるように、キャッシュコントロールヘッダーを設定します。

全体として、この構成の目的は、/description/ パスに対するリクエストを処理し、指定されたファイルシステムディレクトリにマップし、その中の静的ファイルのブラウザキャッシュを有効にすることです。