Nginx配置 同一埠下部署不同專案

2022-07-08 14:51:19 字數 1384 閱讀 9998

1. 功能描述

2. **實現

3. 問題解決

4. 最終效果

react專案

1、package.json中增加配置homepage欄位,以網域名稱www.abc.cn為例

2、broserrouter中配置basename屬性

//其他引入項省略

// 引入路由元件

import from 'react-router-dom';

return (

// 增加basename屬性

)}

vue專案

1、router中配置基礎路徑

const router = new vuerouter();
2、vue.config.js(專案中沒有該檔案的,可以在專案根目錄下建立)中配置基礎路徑

module.exports =
nginx配置

nginx.conf中相關配置(我的nginx頁面根目錄為/data/www,vue專案部署在/data/www/home目錄下,react專案部署在/data/www/portfolio目錄下)

server 

location /home

location /portfolio

error_page 404 /404.html;

location = /404.html

error_page 500 502 503 504 /50x.html;

location = /50x.html

}# 如果沒有配置ssl或者不使用https可以忽略下列配置

server

location /home

location /portfolio

error_page 404 /404.html;

location = /404.html

error_page 500 502 503 504 /50x.html;

location = /50x.html

}

如上將兩個專案部署在二級目錄後,react專案下的子路由可以正常訪問,且重新整理訪問也正常。vue專案的子路由通過元件可以正常訪問,但是重新整理後會報「500 internal server error」,可以通過下面方式解決。

修改nginx.conf中部分配置:

location /home 

location @router

vue專案

react專案

JBOSS同一埠配置多個網域名稱

1,在你的專案裡的 web inf 下新建檔案jboss web.xml,類似如下內容 www.你的網域名稱.com 2,修改 jboss home server deploy jbossweb tomcatxx.sar server.xml 找到 www.你的網域名稱.com autodeploy...

http和websocket共用同一埠

webpack hot middleware 是模組熱替換外掛程式,可以避免網頁重新整理。這個功能並不重要,因為我們可以手動重新整理。webpack dev middleware 是開發外掛程式,自動增量構建webpack 只重新構建依賴所修改檔案的結點,因此能夠極大提高構建效率 webpack d...

同一埠如何區分不同的Socket

為了區分不同應用程序間的網路通訊和連線,主要有3個引數 通訊的目的ip位址 使用的傳輸層協議 tcp 或 udp 和使用的埠號。socket的原意是 插座 通過將這3個引數結合起來,與乙個 插座 socket繫結,應用層就可以和傳輸層通過套接字介面,區分來自不同應用程式程序或網路連線的通訊,實現資料...