如何帶虛擬路徑將Angular2項目部署至IIS及Nginx
一、不帶路由發佈至IIS
1、發佈Angular項目
在src路徑下添加web.config文件，內容如下：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="./index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
修改angular.json或.angular-cli.json或其它名稱的angular環境配置文件，在assets配置處，添加web.config
使用NG命令發佈至文件系統：
ng build --prod
2、部署IIS環境
安裝IIS：略
安裝Url Rewrite Module：安裝Url Rewrite Module
安裝Url Rewrite Module可以解決訪問頁面時刷新或通過href方式進行路由跳轉裏，出現無法訪問網頁的情況。
3、項目發佈至IIS根目錄
常用的兩種方式：
方式一：
直接將文件Copy至IIS根目錄（默認爲：C:\inetpub\wwwroot），並在此目錄中添加web.config文件，內容如下：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="WebDAVModule"/>
</modules>
</system.webServer>
</configuration>
方式二：
將文件放在要發佈的位置，進入IIS管理頁面，右擊網站，選擇“添加網站”，輸入名字，選擇路徑，選擇一個非託管應用程序池即可。
二、不帶路由發佈至Nginx
參考我的另一博文：《如何在Nginx上發佈Angular，以及解決路由問題》
三、帶路由發佈至IIS
1、發佈Angular項目
在src路徑下添加web.config文件，內容如下：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="./index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
修改angular.json或.angular-cli.json或其它名稱的angular環境配置文件，在assets配置處，添加web.config
使用NG命令發佈至文件系統：
ng build --base-href /yourRelativePath/ --prod
2、部署IIS環境
安裝IIS：略
安裝Url Rewrite Module：安裝Url Rewrite Module
安裝Url Rewrite Module可以解決訪問頁面時刷新或通過href方式進行路由跳轉裏，出現無法訪問網頁的情況。
3、項目發佈至IIS根目錄
直接將文件Copy至網站根目錄（默認爲：C:\inetpub\wwwroot），並在此目錄中添加web.config文件，內容如下：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<remove name="WebDAVModule"/>
</modules>
</system.webServer>
</configuration>
四、帶路由發佈至Nginx
1、發佈Angular項目
使用NG命令發佈至文件系統：
ng build --base-href /yourRelativePath/view --prod
2、配置Nginx
進入Nginx根目錄，打開conf目錄下的nginx.conf文件，在http層級下添加（或修改）：
server {
listen 80;
server_name 127.0.0.1 localhost;
location /yourRelativePath/view {
rewrite .* /index.html break;
root D:\angular\deply\app1;
}
location /yourRelativePath {
alias D:\angular\deply\app1;
}
}
將發佈好的應該Copy至配置文件中指定路徑即可。
五、IIS中將一個Angular網站發佈至另一個Angular網站下
參照前述方式發佈第一層Angular網站時，web.config配置文件需改爲：
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
<!-- <action type="Rewrite" url="/BjChincold/" /> -->
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
第二層網站繼續參照前述發佈方式，將網站直接按相對路徑放在第一層網站下即可。
六、Nginx中將一個Angular網站發佈至另一個Angular網站下
兩個網站均按需求，參照前述方式發佈。
nginx.conf配置文件中的http項下添加（或修改）server配置節點：
server {
listen 80;
server_name 127.0.0.1 localhost;
location / {
root D:\angular\deploy\firstApp;
index index.html;
try_files $uri $uri/ /index.html;
}
location /secondAppRelativePath/view {
rewrite .* /index.html break;
root D:\angular\deploy\secondApp;
}
location /secondAppRelativePath {
alias D:\angular\deploy\secondApp;
}
}
IIS部分參照：Deploy an Angular Application to IIS 文章進行實施、總結、整理。