如何带虚拟路径将Angular2项目部署至IIS及Nginx

如何带虚拟路径将Angular2项目部署至IIS及Nginx

 

一、不带路由发布至IIS

1、发布Angular项目

在src路径下添加web.config文件，内容如下：

修改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文件，内容如下：

 

方式二：

将文件放在要发布的位置，进入IIS管理页面，右击网站，选择“添加网站”，输入名字，选择路径，选择一个非托管应用程序池即可。

二、不带路由发布至Nginx

参考我的另一博文：《如何在Nginx上发布Angular，以及解决路由问题》

三、带路由发布至IIS

1、发布Angular项目

在src路径下添加web.config文件，内容如下：

修改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文件，内容如下：

 

四、带路由发布至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配置文件需改为：

第二层网站继续参照前述发布方式，将网站直接按相对路径放在第一层网站下即可。

六、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 文章进行实施、总结、整理。