個人總結了3種方法來實現在一臺伺服器上使用nginx部署多個前端專案的方法。

• 基於域名配置
• 基於埠配置
• 基於location配置

基於域名配置（常用）

基於域名配置，前提是先配置好了域名解析。比如說你自己買了一個域名：www.fly.com。 然後你在後臺配置了2個它的二級域名： a.fly.com、 b.fly.com。

配置檔案如下：

• 配置 a.fly.com 的配置檔案：vim /usr/nginx/modules/a.conf

• server {
  listen 80;
  server_name a.fly.com;
  
  location / {
  root /data/web-a/dist;
  index index.html;
  }
  }

• 配置 b.fly.com 的配置檔案：vim /usr/nginx/modules/b.conf

• server {
  listen 80;
  server_name b.fly.com;
  
  location / {
  root /data/web-b/dist;
  index index.html;
  }
  }

基於埠配置（不常用）

配置檔案如下：

• 配置 a.fly.com 的配置檔案：vim /usr/nginx/modules/a.conf

• server {
  listen 8000;
  
  location / {
  root /data/web-a/dist;
  index index.html;
  }
  }

  # nginx 80埠配置 （監聽a二級域名）
  server {
  listen 80;
  server_name a.fly.com;
  
  location / {
  proxy_pass http://localhost:8000; #轉發
  }
  }

• 配置 b.fly.com 的配置檔案：vim /usr/nginx/modules/b.conf

• server {
  listen 8001;
  
  location / {
  root /data/web-b/dist;
  index index.html;
  }
  }

  # nginx 80埠配置 （監聽b二級域名）
  server {
  listen 80;
  server_name b.fly.com;
  
  location / {
  proxy_pass http://localhost:8001; #轉發
  }
  }

基於location配置（常用）

配置檔案如下：

• 配置 a.fly.com 的配置檔案：vim /usr/nginx/modules/ab.conf

• server {
  listen 80;
  
  location / {
  root /data/web-a/dist;
  index index.html;
  }
  
  location /web-b {
  alias /data/web-b/dist;
  index index.html;
  }
  }

參考：https://www.cnblogs.com/zhaoxxnbsp/p/12691398.html