動的および静的分離を実装するための Nginx サンプル コード

動的および静的分離を実装するための Nginx サンプル コード

この記事のシナリオと組み合わせて、Nginx と Java 環境 (SpringBoot プロジェクトを実行するため) をインストールする必要があります。

1.1 Linux に Nginx をインストールする方法については、私の記事 --- (ポータル) を参照してください。

1.2 この記事では、SpringBoot は Thymeleaf テンプレートを使用し、プロジェクト ポート番号は 8888 です。

1.3 jquery.jsはローカルの/Users/dalaoyang/Downloads/staticファイルに保存されます

2. 動きと静止の分離とは何ですか?

動きと静止の分離を理解する前に、まず動きとは何か、静止とは何かを理解しなければなりません。

Web 開発では、一般的に、動的リソースはバックグラウンド リソースを指し、静的リソースは HTML、JavaScript、CSS、img などのファイルを指します。

一般的に、動的リソースと静的リソースは分離する必要があり、静的リソースは Nginx 上に展開する必要があります。リクエストが来たとき、それが静的リソースのリクエストであれば、nginx によって設定された静的リソース ディレクトリからリソースを直接取得します。動的リソースのリクエストであれば、nginx はリバース プロキシの原理を使用して、リクエストをバックグラウンド アプリケーションに転送して処理することで、動的と静的の分離を実現します。

フロントエンドとバックエンドの分離を使用すると、静的リソースへのアクセス速度が大幅に向上します。同時に、開発プロセス中にフロントエンドとバックエンドの開発を並行して実行できるため、開発時間を効果的に改善し、共同デバッグ時間を短縮できます。

3. プロジェクト構成

SpringBoot アプリケーションのスタートアップ クラスを変更し、次のコードに示すように、アクセス ルート パスが index.html にジャンプできるように単純なジャンプを作成します。

@SpringBootアプリケーション
@コントローラ
パブリッククラスDemoApplication {

	パブリック静的voidメイン(String[] args) {
		SpringApplication.run(DemoApplication.class、引数);
	}

	@GetMapping("/")
	パブリック文字列インデックス(){
		「インデックス」を返します。
	}
}

index.htmlのコードは以下のとおりです。jquery.jsが導入されていることに注意してください。参照が成功した後は、jqueryを使用してdivに値を割り当てます。コードは以下のとおりです。

<!DOCTYPE html>
<!--エラーを解決する-->
<html lang="ja" xmlns:th="http://www.w3.org/1999/xhtml">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイムリーフ</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<本文>
<h1>これは静的ページです</h1>
<div id="test_div"></div>
</本文>

<script type="text/javascript">
 $('#test_div').html('jquery.js が正常に参照されました');
</スクリプト>

</html>

プロジェクト構造を以下に示します。jquery.js がないことがわかります。Nginx を使用して jquery.js にアクセスするだけです。

4. Nginxの設定

以下に示すように、nginx.conf 構成を変更します。最初の場所はバックグラウンド リクエストの処理を担当し、2 番目の場所は静的リソースの処理を担当します。

ワーカープロセス 1;

イベント {
 ワーカー接続 1024;
}

http {

 サーバー{
  10000を聴く;
  server_name ローカルホスト;
  
  #バックグラウンドリクエストの場所を傍受 / {
  proxy_pass http://localhost:8888;
  proxy_set_header X-Real-IP $remote_addr;
  }

  #静的リソースの場所をインターセプトする ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ {
  ルート /Users/dalaoyang/Downloads/static;
  }

 }

}

5. テスト

SpringBoot アプリケーションを起動し、Nginx を起動します。

ブラウザで http://localhost:10000/ にアクセスすると、次の図が表示されます。

図の赤いボックスの内容は、静的リソースが正常に参照されていることを示しています。

6. まとめ

最近nginxについて読んでいます。今後もnginx関連の記事を更新していきますので、ご興味がありましたら引き続きご注目ください。

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

以下もご興味があるかもしれません:
  • 動的および静的分離のための Apache または Tomcat を使用した Nginx の基本構成例
  • Nginx+uWsgi を使用して Python の Django フレームワーク サイトの動的部分と静的部分を分離する
  • nginx + tomcatリバースプロキシと動的および静的分離のシンプルな実装
  • 静的Tomcatと動的Tomcatを分離するnginxの詳細な説明
  • nginxは負荷分散と動的および静的分離を実現します
  • Nginx+Apache の動的および静的分離の導入の詳細な例
  • 動的および静的分離を実現する nginx のサンプルコード
  • Nginx は動的と静的の分離を実装します 例の説明
  • Nginx の動的および静的分離実装ケースのコード分析
  • Springmvc nginxで動的と静的の分離を実現するプロセスの詳細な説明
  • 負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ
  • 負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析
  • Nginx の負荷分散と動的および静的分離の原理と構成
  • nginx が動的と静的の分離を実装する方法の例
  • インストールから設定までの nginx の詳細な手順 (インストール、セキュリティ設定、ホットリンク防止、動的および静的分離、HTTPS 設定、パフォーマンスの最適化)
  • Nginx+Tomcat 負荷分散と動的および静的分離クラスタの実装
  • 動的および静的分離を実現するサーバー負荷分散 nginx+tomcat
  • Nginx の動的および静的分離構成の実装と説明

<<:  React antd タブの切り替えによりサブコンポーネントが繰り返し更新される

>>:  MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法

推薦する

Vue.jsはタイムライン機能を実装します

この記事では、タイムライン機能を実装するためのVue.jsの具体的なコードを参考までに共有します。具...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

目次1. 準備2. グローバルコンポーネント quill-editor を定義する1. テンプレート...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

MySQLバッチは特定のフィールドのスペースを削除します

Mysql で特定のフィールドからスペースを一括削除する方法はありますか?文字列の前後のスペースだけ...

get メソッドによる HTML フォームの値転送の例

google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...

HTML 学習ノート - HTML 構文の詳細な説明 (必読)

1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...

Centos7 MySQL データベースのインストールと設定のチュートリアル

1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

JavaScript でのプロキシの使用を理解するための記事

目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...

Vue バックエンド管理システムのページング機能の実装例

この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...

JavaScript での実行コンテキストと実行スタックの例の説明

JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...

Docker のインストールと構成イメージの高速化の実装

目次DockerバージョンCentOS に Docker エンジンをインストールするシステム要件古い...