美文网首页
nignx部署angular 项目

nignx部署angular 项目

作者: nzjcnjzx | 来源:发表于2020-02-27 17:00 被阅读0次

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;
}

相关文章

网友评论

      本文标题:nignx部署angular 项目

      本文链接:https://www.haomeiwen.com/subject/wcrxhhtx.html