nginx配置多個angular項目(angular2/4/5)
場景：
同一個服務器，同一個ip下，需要部署多個angular項目
一、打包命令：
項目1（pc端項目）：ng build --base-href /pc/view --aot --prod
項目2（移動端項目）：ng build --base-href /moblie/view --aot --prod
二、將包拷貝至服務器上
windows：
項目1（pc端項目）：D:\html\aaa\（示例）
項目2（移動端項目）：D:\html\bbb\（示例）
linux：
項目1（pc端項目）：\...\html\aaa\（示例）
項目2（移動端項目）：\...\html\bbb\（示例）
三、nginx配置
windows:
location /pc/view {
rewrite .* /index.html break;
root D:/html/aaa;
}
location /pc {
alias D:/html/aaa;
}
location /moblie/view {
rewrite .* /index.html break;
root D:/html/bbb;
}
location /moblie {
alias D:/html/bbb;
}
linux:
location /pc/view/ {
rewrite .* /index.html break;
root /.../html/aaa/;
}
location /pc/ {
alias /.../html/aaa/;
}
location /moblie/view/ {
rewrite .* /index.html break;
root /.../html/bbb/;
}
location /moblie/ {
alias /.../html/bbb/;
}
四、總結
ng build --base-href /pc/view 時，會在html的<head>中 增加 <base href="/pc/view">
1、angular請求的路由，會自動在路由前增加--base-href /pc/view 中的 /pc/view 部分
http://www.****.com:***/pc/view/login
http://www.****.com:***/pc/view/home
http://www.****.com:***/pc/view/about
通過
location /pc/view/ {
rewrite .* /index.html break;
root D:/html/aaa/;
}
將請求代理到 D:/html/aaa/index.html
2、資源文件請求時，會自動在資源文件前增加--base-href /pc/view 中的 /pc 部分，如下圖
通過
location /pc/ {
alias D:/html/aaa/;
}
將靜態資源的映射到 D:/html/aaa/ 目錄下。
注:
1、nginx中alias與root的區別與用法，這里不做深入，感興趣的同學可以自己去了解
2、這里的angular路由是通過 rewrite 配置的，也可以使用 try_files 配置，感興趣的同學可以自己去研究下，附上相關博文 http://www.rzrgm.cn/defaultlee/p/7677034.html
浙公網安備 33010602011771號