この記事のシナリオと組み合わせて、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
>>: MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法
ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...
目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...
最新のソリューション: -v /usr/share/zoneinfo/Asia/Shanghai:/...
序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...
インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...
最近、仕事の都合で、MySQL で数字をフォーマットする必要がありましたが、インターネット上にはほと...
概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...
mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...
目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...
メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...
序文:インストール プロセスについては詳しく説明しません。問題に直接触れましょう。MySQL のリモ...
目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...