nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆さんと共有します。詳細は次のとおりです。

上流 dfct {
#ip_ハッシュ;
 サーバー 121.41.19.236:8192;
}
 
サーバー{
 サーバー名 ct.aeert.com;
 
 位置 / {
  ルート /opt/web;
  try_files $uri $uri/ /index.html;
  error_page 405 =200 http://$host$request_uri;
 }
 
 場所 ^~/web/ {
  proxy_set_header ホスト $proxy_host;
# proxy_set_header ホスト $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  プロキシパス http://121.41.19.236:8192/;
 }
 
 
 listen 443 ssl; # Certbot によって管理されています
 ssl_certificate /etc/letsencrypt/live/ct.aeert.com/fullchain.pem; # Certbot によって管理されています
 ssl_certificate_key /etc/letsencrypt/live/ct.aeert.com/privkey.pem; # Certbot によって管理されます
 include /etc/letsencrypt/options-ssl-nginx.conf; # Certbot によって管理されます
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # Certbot によって管理されます
 
}
 
 
サーバー{
 $host = ct.aeert.comの場合{
  301 https://$host$request_uri を返します。
 } # Certbot によって管理されています
 
 
 聞く 80;
 サーバー名 ct.aeert.com;
 404 を返します。# Certbot によって管理されています
 
 
}

補足: nginx を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする 3 つの方法

フロントエンドとバックエンドが分離されたプロジェクトの場合、フロントエンドとバックエンドは異なるドメイン名を使用することも、同じドメイン名を使用することもできます。

以下は、フロントエンドとバックエンドが同じドメイン名を使用する場合です。

1. フロントエンドはwww.xxx.comを使用し、バックエンドはapi.xxx.comを使用します。

サーバー{
サーバー名 www.xxx.com;

位置 / {
 ルート /tmp/dist;
 インデックス index.html;
 try_files $uri $uri/ /index.html;
  }
 }

サーバー{
サーバー名 api.xxx.com;
位置 / {
uwsgi_pass 127.0.0.1:8000;
/etc/nginx/uwsgi_params を含めます。
 }
}

2. フロントエンドはwww.xxx.comを使用し、バックエンドはwww.xxx.com/api/を使用します。

1. uwsgiがhttpを使用する場合は、次のように設定できます。

サーバー{
サーバー名 www.xxx.com;

位置 / {
 ルート /tmp/dist;
 インデックス index.html;
 try_files $uri $uri/ /index.html;
 }

場所 ^~ /api/ {
 プロキシパス http://127.0.0.1:8000/;
 }
}

2. uwsgiがソケット方式を使用する場合は、次のように設定する必要があります。

サーバー{
サーバー名 www.xxx.com;
位置 / {
 ルート /tmp/dist;
 インデックス index.html;
 try_files $uri $uri/ /index.html;
}

場所 ^~ /api/ {
 プロキシパス http://127.0.0.1:8080/;
 }
}
サーバー{
8080を聴く;
位置 / {
uwsgi_pass 127.0.0.1:8000;
/etc/nginx/uwsgi_params を含めます。
 }
}

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法についてはこれで終わりです。nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

<<:  CSS のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード

>>:  TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです

推薦する

MySQLで時間別データと最後の時間別データの差をクエリするアイデアの詳細な説明

1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

一般的なDocker Composeコマンドの詳細な説明

1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

フロントエンド開発における一般的なテクニックのまとめ

1. 記事タイトルリストの右側に日付を表​​示する方法:コードをコピーコードは次のとおりです。 &l...

MySQL の FIND_IN_SET() と IN の違いを簡単に分析します

以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...

カラフルな時計効果を実現する JavaScript キャンバス

キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページ...

Vue で v-for を更新する方法

ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...

JavaScript 遅延読み込みの詳細な説明

目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...

Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します

この記事では、ドロップダウンテーブルの複数選択と検索を実現するためのvue+elementuiの具体...

Vue3 トランジションアニメーションの落とし穴記録について

目次背景問題の場所さらなる分析要約する背景私のコース「Vue 3 エンタープライズレベルの音楽アプリ...

Dockerを使用してサーバー上で複数のPHPバージョンを実行する

PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...

MySQL の最適化: サブクエリの代わりに結合を使用する

サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...

スキニングを実現するネイティブJavaScript

ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...