フロントエンドに必要なNginx設定の詳細な説明

フロントエンドに必要なNginx設定の詳細な説明

Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり、汎用プロキシ サーバー (TCP/UDP/IMAP/POP3/SMTP) でもあります。元々はロシア人の Igor Sysoev によって作成されました。

基本コマンド

nginx -t は設定ファイルの構文エラーをチェックします
nginx -s reload ホットリロード、設定ファイルをリロードします
nginx -s stop クイックシャットダウン
nginx -s quit ワーカープロセスが完了するまで待ってからシャットダウンします

nginx サーバーをセットアップして起動したら、まず nginx のデフォルト設定を確認し、次にさまざまな使用シナリオを 1 つずつ紹介します。

デフォルト設定

Nginxのインストールディレクトリで、`nginx.conf`のコピーを`nginx.conf.default`に設定ファイルのバックアップとしてコピーし、`nginx.conf`を変更します。

# ワーカープロセスの数 worker_processes 1;
イベント {
  worker_connections 1024; #ワーカープロセスあたりの接続数}

http {
  mime.types を含めます。
  デフォルトタイプ アプリケーション/オクテットストリーム;

  # ログ形式 log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
         '$status $body_bytes_sent "$http_referer" '
         '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
  access_log /srv/log/nginx/access.log access; # ログ出力ディレクトリ gzip オン;
  ファイル送信オン;

  # リンクタイムアウト、自動切断 keepalive_timeout 60;

  # 仮想ホストサーバー {
    8080を聴く;
    server_name localhost; # ブラウザアクセスドメイン名 charset utf-8;
    access_log ログ/localhost.access.log アクセス;

    # ルートの場所 / {
      root www; # ルートディレクトリにアクセスします index index.html index.htm; # エントリファイル}
  }

  #その他の設定ファイルを導入する include servers/*;
}

サイトを構築する

その他の設定ファイル `servers` ディレクトリに、新しいサイト設定ファイル xx.conf を追加します。

127.0.0.1 xx_domian#仮想ホストをコンピュータのhostsファイルに追加します。

サーバー{
  8080を聴く;
  server_name xx_domian; #ブラウザアクセスドメイン名 charset utf-8;
  access_log ログ/xx_domian.access.log アクセス;

  # ルートの場所 / {
    root www; # ルートディレクトリにアクセスします index index.html index.htm; # エントリファイル}
}

nginx -s reload コマンドを実行します。成功したら、ブラウザで xx_domian にアクセスするとページが表示されます。

ファイルの種類に応じて有効期限を設定する

場所 ~.*\.css$ {
  有効期限は1日です。
  壊す;
}
場所 ~.*\.js$ {
  有効期限は1日です。
  壊す;
}

場所 ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  access_log オフ;
  15日で期限切れになります。#15日間保存します。
}

# curl -x127.0.0.1:80 upload/2022/web/logo.png -I #画像の最大保存期間をテストする

ファイルキャッシュを無効にする

開発環境ではコードが変更されることが多く、その効果を確認するにはブラウザのキャッシュを更新する必要があります。ブラウザのキャッシュを無効にして効率を上げる方法

場所 ~* \.(js|css|png|jpg|gif)$ {
  add_header Cache-Control no-store;
}

アンチホットリンク

他のウェブサイトからファイルが呼び出されないようにする

場所 ~* \.(gif|jpg|png)$ {
  # 192.168.0.1 のみがリソースを要求できるようにします valid_referers none blocked 192.168.0.1;
  ($invalid_referer) の場合 {
    ^/ http://$host/logo.png を書き換えます。
  }
}

静的ファイル圧縮

サーバー{
  # gzip 圧縮をオンにします gzip on;
  # gzip に必要な最小 HTTP プロトコル バージョンを設定します (HTTP/1.1、HTTP/1.0)
  gzip_http_バージョン1.1;
  # 圧縮レベルを設定します。圧縮レベルが高いほど、圧縮時間が長くなります (1-9)
  gzip_comp_レベル4;
  # 圧縮の最小バイト数を設定し、ページ Content-Length から gzip_min_length 1000 を取得します。
  # 圧縮ファイルのタイプを設定する (text/html)
  gzip_types テキスト/プレーン アプリケーション/javascript テキスト/css;
}

nginx -s reloadコマンドを実行し、成功したらブラウザでアクセスします。

エラーページを指定する

# ステータスコードに応じて、対応するエラーページを返します error_page 500 502 503 504 /50x.html;
場所 = /50x.html {
  ルート /source/error_page;
}

nginx -s reloadコマンドを実行し、成功したらブラウザでアクセスします。

クロスドメインの問題

クロスドメインの定義

同一オリジンポリシーは、同じオリジンから読み込まれたドキュメントまたはスクリプトが別のオリジンのリソースと対話する方法を制限します。これは、潜在的に悪意のあるファイルを隔離するための重要な安全メカニズムです。異なるソース間の読み取り操作は通常許可されません。

相同の定義

プロトコル、ポート (指定されている場合)、ドメイン名が同じである場合、2 つのページのオリジンは同じになります。クロスドメイン問題を解決する Nginx の原理

例えば:

  • フロントエンドサーバーのドメイン名は http://xx_domain です。
  • バックエンドサーバーのドメイン名は https://github.com です。

これで、http://xx_domain が https://github.com にリクエストを送信すると、クロスドメイン リクエストが発生します。

ただし、nginx サーバーを起動し、server_name を xx_domain に設定し、対応する場所を設定して、フロントエンドに必要なクロスドメイン リクエストをインターセプトし、最後にリクエストを github.com にプロキシするだけです。次の構成に示すように:

## リバースプロキシパラメータを設定する server {
  8080を聴く;
  サーバー名 xx_ドメイン

  ## 1. ユーザーが http://xx_domain にアクセスすると、リバースプロキシは https://github.com に移動します。
  位置 / {
    proxy_pass https://github.com;
    proxy_redirect オフ;
    proxy_set_header Host $host; # ドメイン名を渡す proxy_set_header X-Real-IP $remote_addr; # IPを渡す
    proxy_set_header X-Scheme $scheme; #送信プロトコル proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

これにより、ブラウザの同一オリジン ポリシーを完全に回避できます。github.com が nginx の github.com にアクセスすると、同一オリジン アクセスとなり、nginx がサーバーに転送したリクエストはブラウザの同一オリジン ポリシーをトリガーしません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法
  • フロントエンド開発のための Nginx 構成 (シナリオ)
  • $remote_addr に基づく nginx フロントエンド配布方法の詳細な説明
  • nginx で複数のフロントエンド プロジェクトをデプロイするいくつかの方法
  • Nginx がフロントエンド リソースへのクロスドメイン アクセスの問題をどのように解決するかの詳細な説明
  • フロントエンドでnginxが何ができるかの詳細な説明

<<:  MySQL 8.0.13 zipパッケージのインストール方法について

>>:  データベースの削除から逃走までの MySQL の徹底分析_上級編 (I) - データ整合性

推薦する

JS を使用して航空機戦争の小さなゲームを実装する

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順

目次1. プロキシモジュールをインストールする2. プロキシを設定する1. プロキシモジュールをイン...

nginx プロキシ サーバーで双方向証明書検証を構成する方法

証明書チェーンを生成するスクリプトを使用して、ルート証明書、中間証明書、および 3 つのクライアント...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

Vueライフサイクル機能の詳細な説明

目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...

MySQL マスタースレーブ同期遅延の原因と解決策

歴史的な理由により、MySQL レプリケーションは、REDO ログではなく論理バイナリ ログに基づい...

MySQLの文字列インターセプト関連関数の概要

この記事では、MySQL の文字列インターセプト関連の機能を紹介します。具体的な内容は以下のとおりで...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...

WeChatアプレットコンポーネント開発:視覚的な映画座席選択機能

目次1. はじめに1. コンポーネントデータ2. コンポーネントページのレイアウト1. ロゴエリアの...

Reactを使用して画像認識アプリを実装する方法

まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...

MySQL の innodb_flush_log_at_trx_commit と sync_binlog を区別する方法

2 つのパラメータ innodb_flush_log_at_trx_commit と sync_bi...

トラフィックの多いウェブサイト向けのソリューション

まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...