Nginx の基本的な使用法とフロントエンド プロジェクトのデプロイメント

序文

私は最近 Nginx について学び、ブログを作成しました。主な参考資料はサイト b にある Kuangshenshuo のビデオ チュートリアルです。記事へのリンクは次のとおりです:Crazy Godshuo Nginx Quick Start a>


1. Nginxをダウンロードして起動します

1.Nginxをダウンロードする

Nginx 公式 に移動し、お使いのコンピュータに適した安定バージョンを選択してダウンロードしてください。私は Windows バージョンをダウンロードしました。
ここに画像の説明を挿入します
ダウンロード後、圧縮されたパッケージが作成されます。解凍された nginx コンテンツを保存するフォルダーを作成する必要があります (注: Nginx が保存されるフォルダーには中国語を含めないことをお勧めします。そうしないと、エラーが報告されます)。解凍されたコンテンツは次のとおりです。
ここに画像の説明を挿入します

今後よく使用するのは、conf 構成ファイルです。

2.Nginxを起動する

Win+R、cmd を実行し、nginx が解凍されたディレクトリに切り替えます。
ここに画像の説明を挿入します
conf ディレクトリ内の nginx.conf ファイルを表示できます。
ここに画像の説明を挿入します
メモ帳で開くと、デフォルトのポートがポート 80 で、デフォルトのアクセス ドメイン名が localhost であることがわかります。つまり、今後ポート 80 にアクセスする限り、Nginx によって傍受されることになります。
ここに画像の説明を挿入します
次に、ブラウザを開き、 http://localhost:80 と入力して Enter キーを押します。次の内容が表示されれば、Nginx は正常に起動しています。
ここに画像の説明を挿入します
タスク マネージャーで nginx が実行されていることも確認できます。
ここに画像の説明を挿入します

3. よく使用されるコマンド

强制停止nginx:nginx -s stop
安全退出nginx:nginx -s quit
重新加载配置文件:nginx -s reload (如果修改了配置文件就执行这行命令,否则修改就是无效的。前提:nginx服务是启动的状态,否则reload是不成功的。)

2. nginx.conf設定ファイルの分析

一番上のものはグローバル構成です。イベントは接続の最大数です。http には、複数のサーバーを構成できる静的リソース ファイル構成などの小さなモジュールがいくつかあり、サーバーは場所などのさまざまなサービスを構成できます。 、アップストリームの負荷分散構成など。
ここに画像の説明を挿入します

1. リバースプロキシを構成する

たとえば、nginx.conf 設定ファイルを変更し、YSL 公式 Web サイトを指すように proxy_pass を設定します。

// 这行代码就说明请求会代理到 https://www.yslbeautycn.com
proxy_pass  https://www.yslbeautycn.com 

ここに画像の説明を挿入します

注:
proxy_pass の後にはスペースが続きます。
設定項目を記述した後は、セミコロンで終わる必要があります。

nginx.conf 構成ファイルを変更した後、nginx -s reload
を実行し、ブラウザに http://localhost:80 と入力して Enter キーを押します。YSL 公式 Web サイトが表示されることがわかります。
ここに画像の説明を挿入します

2. アップストリームの負荷分散

多数のサーバーにおいて、Nginx はクライアントのリクエストをこれらのサーバーに「均等に」分散することができ、これが負荷分散です。

シナリオ: リクエストが多く、1 つのサーバーがビジー状態になる場合は、複数のサーバーが連携して動作する必要があります。 100G サーバー、64G サーバー、および 16G サーバーがある場合、100G サーバーへのリクエストが増加し、16G サーバーへのリクエストが少なくなることが期待されます。これは負荷分散の機能です。

一般的に使用される方法:

  • ポーリング
    「ポーリング」は、クライアントのリクエストをループ内の異なるバックエンド サーバーに分散します。ポーリングでは、不当なリソース割り当てにより問題が発生しやすくなります。
    ここに画像の説明を挿入します
    サーバーが 3 つあると仮定すると、nginx.conf ファイルのアップストリーム ブロックを使用してこれら 3 つのサーバーを定義し、その場所で proxy_pass ディレクティブを構成してアップストリーム名を指すようにできます。次のように書かれています。
    ここに画像の説明を挿入します

  • 加重ポーリング
    は、サーバーのパフォーマンスが異なるクラスタで使用され、リソースの割り当てをより合理的にします。
    ここに画像の説明を挿入します
    サーバーのパフォーマンスが優れているほど重みは大きくなり、パフォーマンスが低いほど重みは低くなります。 (权重weight)
    上の図に示すように: リクエストが多い場合、多数のリクエストは重み 4 の 3 番目のサーバーに送信されます。 、その一部のみ リクエストは重み 1 のサーバーにのみ送信され、サーバーが過負荷にならないようにします。重みが大きいほどリクエストが多くなるため、サーバーのパフォーマンスを最大限に高めることができ、小規模なサーバーでもオンラインで使用できるため、コストを節約できます。
    Weight を通じてサーバーの異なる重みを設定できます。書き込み方法は次のとおりです。
    ここに画像の説明を挿入します
    优点:分布式处理,提升网络的灵活性、稳定性,使得服务器性能最大化。

3. Nginx にフロントエンド プロジェクトをデプロイする

Vue プロジェクトをパッケージ化する必要があります。パッケージ化されたプロジェクトに対して npm run build を実行するだけです。パッケージ化が完了すると、プロジェクトに追加の dist ディレクトリが作成されます。ここでの私のプロジェクトは、demo と呼ばれます。
デモ プロジェクトの下の dist ディレクトリの内容を nginx ディレクトリの下の html ディレクトリにコピーして貼り付け、nginx の下の元の html の内容を削除します。
ここに画像の説明を挿入します
結果は次のようになります。
ここに画像の説明を挿入します
設定ファイルはデフォルトのポート 80 のままで、localhost が開きます。実行: nginx を起動すると、vue プロジェクトが正常に実行されることがわかります。
ここに画像の説明を挿入します


要約する

以上が私が共有したいNginx関連のコンテンツです。

おすすめ

転載: blog.csdn.net/m0_52043522/article/details/130701034