利用nginx同一端口部署多個前端的辦法(親測有效版)

更新時間：2026年01月26日 09:23:58 作者：呼啦啦呼啦啦啦啦啦啦

在Nginx中配置同一個端口支持多個前端應(yīng)用,通?？梢酝ㄟ^不同的路徑（location）來映射不同的前端項目,這篇文章主要介紹了利用nginx同一端口部署多個前端的相關(guān)資料,需要的朋友可以參考下

前言

許多時候由于各種策略或是出于安全等考慮，只開放單個端口，但是此時你需要上線兩個項目前端，就需要用到了nginx同一端口部署兩前端的方法。

一、必備條件

打包文件：

1.兩個前端的路由守衛(wèi)不互相沖突。

2.兩個前端打包的時候不能直接打包，需要在publicpath中加上對應(yīng)轉(zhuǎn)發(fā)路徑，如果不加上就會出現(xiàn)，請求的路徑匹配不上nginx轉(zhuǎn)發(fā)原則的情況。

nginx：

安全穩(wěn)定版本能跑起來的nginx（筆者吃過虧，遇到過本身就跑不起來的nginx）。

二、配置nginx的conf

這是關(guān)鍵的步驟

將nginx.conf改成：

server {
    listen 80;
    server_name example.com;

    # 配置第一個應(yīng)用，路徑為 /app1/
    location /app1/ {
        alias /var/www/app1/;
        try_files $uri $uri/ /app1/index.html;
    }

    # 配置第二個應(yīng)用，路徑為 /app2/
    location /app2/ {
        alias /var/www/app2/;
        try_files $uri $uri/ /app2/index.html;
    }
}

alias中配置的是兩個前端文件路徑，轉(zhuǎn)發(fā)的標識根據(jù)你打包文件中publicpath的路徑而定制

注意事項

在 alias 后的路徑末尾需要添加斜杠 /，否則可能會導(dǎo)致文件路徑錯誤。

最后

到此這篇關(guān)于利用nginx同一端口部署多個前端的文章就介紹到這了,更多相關(guān)nginx同一端口部署多個前端內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

nginx中狀態(tài)統(tǒng)計的實現(xiàn)
本文主要介紹了nginx中狀態(tài)統(tǒng)計的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
nginx實現(xiàn)發(fā)布靜態(tài)資源的方法
這篇文章主要介紹了nginx實現(xiàn)發(fā)布靜態(tài)資源的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01
解決nginx:[emerg]?getpwnam(“nginx“)failed報錯問題
編譯安裝nginx時,啟動服務(wù)報錯nginx:[emerg]getpwnam("nginx")failed,原因是沒有為nginx創(chuàng)建用戶,解決方法是創(chuàng)建一個nginx用戶,該用戶是你在編譯時指定的用戶
2025-02-02
詳解Nginx 工作原理
這篇文章主要介紹了Nginx 工作原理，幫助大家更好的理解和學(xué)習(xí)nginx，感興趣的朋友可以了解下
2020-10-10
寶塔nginx部署前端頁面刷新報404錯誤解決辦法
使用nginx部署前端項目是一篇非常詳細的教程,旨在幫助初學(xué)者使用Nginx來部署前端項目,這篇文章主要給大家介紹了關(guān)于寶塔nginx部署前端頁面刷新報404錯誤的解決辦法,需要的朋友可以參考下
2024-03-03
Nginx配置文件中l(wèi)ocation配置的多種場景
location主要做定位功能,根據(jù)uri來進行不同的定位,下面這篇文章主要給大家介紹了關(guān)于Nginx配置文件中l(wèi)ocation配置的多種場景,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
安裝Windows版nginx及部署前端代碼并解決刷新出現(xiàn)404問題
這篇文章主要給大家介紹了關(guān)于安裝Windows版nginx及部署前端代碼解決刷新出現(xiàn)404問題的相關(guān)資料,使用nginx部署前端項目是一篇非常詳細的教程,旨在幫助初學(xué)者使用Nginx來部署前端項目,需要的朋友可以參考下
2023-12-12
nginx的配置轉(zhuǎn)發(fā)到其他網(wǎng)站詳解
這篇文章主要為大家介紹了nginx的配置轉(zhuǎn)發(fā)到其他網(wǎng)站過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Nginx常見的錯誤配置舉例
這篇文章主要介紹了Nginx常見的錯誤配置舉例，幫助大家更好的理解和學(xué)習(xí)使用Nginx，感興趣的朋友可以了解下
2021-03-03
Nginx設(shè)置連接超時并進行測試的方法步驟
在高并發(fā)場景下,如果客戶端與服務(wù)器的連接長時間未響應(yīng),會占用大量的系統(tǒng)資源,影響其他正常請求的處理效率,為了解決這個問題,可以通過設(shè)置?Nginx?的連接超時時間來優(yōu)化資源管理,提高服務(wù)器的穩(wěn)定性,以下是具體的配置方法和測試步驟,希望對你有所幫助
2025-02-02