本文介绍了在同一服务器上如何部署多个Angular项目。通过ng build命令为不同项目设置base-href，然后将打包后的文件上传至服务器指定目录。在nginx配置中，利用location、rewrite和root或alias指令，实现对PC端和移动端项目的路由管理和静态资源映射，确保Angular路由和资源请求的正确处理。
场景：
同一个服务器，同一个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的
中 增加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配置，
扫一扫
6328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
