同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

同じドメイン名を持つ Nginx プロキシのフロントエンドとバックエンドの分離プロジェクトの完全な手順

フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエンドはドメイン名を共有します。フロントエンド プロジェクトとバックエンド プロジェクトは、ドメイン名の後の URL プレフィックスによって区別されます。

vue + php プロジェクトを例に挙げます。サーバー モジュールの nginx 構成に直接移動します。

サーバ
 {
 聞く 80;
 #listen [::]:80 default_server ipv6only=on;
 server_name demo.com; #プロジェクトのドメイン名を設定します index index.html index.htm index.php;

 # 1. 処理場所のフロントエンドへの転送 /
 {
  # フロントエンドのパッケージ化後の静的ディレクトリ alias /home/wwwroot/default/vue-demo/dist/;
 }

 # 2. 処理場所 /api/ のバックエンドに転送します {
  try_files $uri $uri/ /index.php?$query_string;
 }

 # 3. 最後に、PHPはここでfpmに転送されます
 場所 ~ [^/]\.php(/|$)
 {
  # バックエンド プロジェクト ディレクトリ ルート /home/wwwroot/default/demo/public/;
  127.0.0.1 のパスは 9000 です。
  fastcgi_pass unix:/tmp/php-cgi.sock;
  fastcgi_index インデックス.php;
  fastcgi.conf をインクルードします。
  pathinfo.conf をインクルードします。
 }

 # 4. バックエンドの静的リソースの処理 location /public/ {
  エイリアス /home/wwwroot/default/demo/public/uploads/;
 }

 #エラーページ 404 /404.html;

 access_log /home/wwwlogs/access.log メイン;
}

簡単な説明

  • ドメイン名の後にプレフィックス /api/ が続く場合、処理のためにバックエンドに転送されます。
  • ドメイン名の後に /uploads/ プレフィックスを追加すると、バックエンドの静的リソースにアクセスします。
  • 正確な位置マッチングの原則により、上記以外のすべての訪問は、フロントエンド ページにアクセスする最初の場所に転送されます。

例えば:

記事リストインターフェースにアクセス

https://demo.com/api/posts を取得します。

アップロードされた画像にアクセスする

アップロード/2022/web/xxx.jpg を取得

フロントエンドのホームページにアクセス

https://demo.com/ から入手

記事ページをご覧ください

https://demo.com/posts を取得

PS: エイリアス パスの最後には / が必要です。

要約する

Nginx プロキシ同一ドメイン名フロントエンドとバックエンド分離プロジェクトに関するこの記事はこれで終わりです。Nginx プロキシ同一ドメイン名フロントエンドとバックエンド分離プロジェクトに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • NodeJS によるフロントエンドとバックエンドの分離の考え方と実践 (VI) Nginx + Node.js + Java のソフトウェアスタック展開実践
  • フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順
  • nginx+vue.jsを使用してフロントエンドとバックエンドを分離するサンプルコード
  • Nginxはフロントエンドとバックエンドの分離を実現します
  • VueとNginxをベースにしたフロントエンドとバックエンドのデプロイメントチュートリアルの詳細な説明

<<:  Vue3 でタイマーコンポーネントをカプセル化する方法

>>:  count(1)、count(*)、count(列名)の実行の違いの詳細な説明

推薦する

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。 1. ナビゲー...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...

古典的なスネークゲームの JavaScript 実装

この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに...

検索履歴を実装するjQueryプラグイン

毎日jQueryプラグイン - 検索履歴を作成するためのものです。参考までに、具体的な内容は次のとお...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

DockerでRedisをデプロイして起動する方法

DockerでRedisをデプロイするまずLinuxにDockerをインストールし、次にDocker...

MySQL データベース インデックスが B+ ツリーの使用を選択するのはなぜですか?

MySQL データベース インデックスが B+ ツリーを使用する理由をさらに分析する前に、データ構...

Angular CLI リリース パスの構成項目の簡単な分析

序文プロジェクトのリリースでは、常に特定の状況に応じたパッケージ化が必要です。Angular CLI...

テーブル編集操作を実現する js+Html

この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...

Vue: メモリリークの詳細な説明

メモリリークとは何ですか?メモリ リークとは、新しいメモリが作成されたが、解放またはガベージ コレ...

HTMLタグのフルネームと機能の紹介

アルファベット順DTD: このタグが許可される XHTML 1.0 DTD を示します。 S=厳密、...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

DockerでGPUを使用するプロセスの詳細な説明

目次tf-gpu をダウンロード取得したtf-gpuイメージに基づいて独自のイメージを構築するイメー...