使用nginx部署多個前端專案(三種方式)

2021-10-17 01:55:57 字數 1498 閱讀 5286

使用nginx部署多個前端專案

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

在正式開始之前,我們先來看一下nginx安裝的預設配置檔案:/etc/nginx/nginx.conf 檔案

可以看到圖中的:include /usr/nginx/modules/*.conf,這句話的作用就是可以在nginx啟動載入所有 /usr/nginx/modules/ 目錄下的 *.conf 檔案。所以,平時我們為了方便管理,可以在此目錄下面定義自己的 xx.conf 檔案即可。但是注意,一定要以.conf 結尾。

介紹完畢,下面我們先來說一下最常用,也是許多公司線上使用的方式。

基於網域名稱配置,前提是先配置好了網域名稱解析。比如說你自己買了乙個網域名稱:www.fly.com。然後你在後台配置了2個它的二級網域名稱:a.fly.com、 b.fly.com。

配置檔案如下:

vim /usr/nginx/modules/a.conf

server 

}

vim /usr/nginx/modules/b.conf

server 

}

這種方式的好處是,主機只要開放80埠即可。然後訪問的話直接訪問二級網域名稱就可以訪問。

配置檔案如下:

vim /usr/nginx/modules/a.conf

server 

}# nginx 80埠配置 (監聽a二級網域名稱)

server

}

vim /usr/nginx/modules/b.conf

server 

}# nginx 80埠配置 (監聽b二級網域名稱)

server

}

可以看到,這種方式一共啟動了4個server,而且配置遠不如第一種簡單,所以不推薦。

配置檔案如下:

vim /usr/nginx/modules/ab.conf

server 

location /web-b

}

注意:這種方式配置的話,location / 目錄是root,其他的要使用alias。

可以看到,這種方式的好處就是我們只有乙個server,而且我們也不需要配置二級網域名稱。並且前端專案裡要配置二級目錄react 配置請參考:

vue 配置請參考:

使用nginx部署多個前端專案

目錄個人總結了3種方法來實現在一台伺服器上使用nginx部署多個前端專案的方法。在正式開始之前,我們先來看一下nginx安裝的預設配置檔案 etc nginx nginx.conf 檔案 可以看到圖中的 include usr nginx modules conf,這句話的作用就是可以在nginx啟...

使用nginx部署前端專案

當前環境 centos7 安裝相關依賴 yum install gcc c pcre perl compatible regular expressions 是乙個perl庫,包括 perl 相容的正規表示式庫。nginx 的 http 模組使用 pcre 來解析正規表示式,所以需要在 linux ...

如何在NGINX中部署多個前端專案

nginx中單設定乙個web前端很容易,改變埠,改變root指向基本就搞定了,那麼,假設我們有多個前端專案部署在同乙個網域名稱下,該怎麼設定呢?1.先假設我們有乙個應用,http domain就可以訪問了,現在改版了希望可以訪問舊的應用http domain,同時也可以通過http domain n...