動的および静的分離を実装するための 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 の動的および静的分離構成の実装と説明