動的および静的分離を実装するための 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をインストールするときに初期パスワードを忘れた場合の対処方法

推薦する

要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)

ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル

目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...

Docker のタイムゾーンの問題とデータ移行の問題

最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

MySQLにインデックスを追加する方法

インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...

MySQL での数値のフォーマットの詳細な説明

最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

mysql5.7.18 のインストール時にエントリが見つからない問題の解決方法

mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...

埋め込みJavaScriptと外部リンクの基本的な応用方法

目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...

HTML のメタタグの簡単な比較

メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...

Mariadb リモート ログイン構成と問題解決

序文:インストール プロセスについては詳しく説明しません。問題に直接触れましょう。MySQL のリモ...

Vue 初心者ガイド: 環境の構築と開始方法

目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...