同じドメイン名を持つ 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: