angular 项目中使用nignx一个端口部署多个项目
场景:
同一个服务器,同一个ip下,需要部署多个angular项目
一、打包命令:
项目1(pc端项目):ng build --base-href /pc/view --aot --prod
项目2(移动端项目):ng build --base-href /moblie/view --aot --prod
二、将包拷贝至服务器上
三、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
angular路由是通过 rewrite 配置的,也可以使用 try_files 配置
try_files $uri /index.html index.html;
alias实现虚拟目录 alias与root的用法区别
最基本的区别:alias指定的目录是准确的,root是指定目录的上级目录,并且该上级目录要含有location指定名称的同名目录。另外,根据前文所述,使用alias标签的目录块中不能使用rewrite的break。
(1) . alias虚拟目录配置中,location匹配的path目录如果后面不带"/",那么访问的url地址中这个path目录后面加不加"/"不影响访问,访问时它会自动加上"/";
但是如果location匹配的path目录后面加上"/",那么访问的url地址中这个path目录必须要加上"/",访问时它不会自动加上"/"。如果不加上"/",访问就会失败!
(2) . root目录配置中,location匹配的path目录后面带不带"/",都不会影响访问。
所以,一般情况下,在nginx配置中的良好习惯是:
1)在location /中配置root目录;
2)在location /path中配置alias虚拟目录。
When location matches the last part of the directive’s value:
location /images/ {
alias /data/w3/images/;
}
it is better to use the root directive instead:
location /images/ {
root /data/w3;
}
网友评论