IIS10.0部署netcor+vue前后端两个HTTPS域名方法IIS配置API接口转发

netcore api发布

        这个不多说，懂的都懂，右击API项目--发布--设置发布参数--发布就完事，然后把发布后的文件上传到服务器

vue打包

执行Npm run build 在vue项目的根目录下获得dist的文件夹，把这个文件夹上传到服务器

重点来了重点来了

1. 配置https 的SSL证书申请

        我用的阿里云免费的SSL证书

        选择免费证书，点击立即购买，然后点击证书申请

        申请方式：

        阿里云免费证书是单域名证书，就是说一个证书对应一个域名，我这里配置的是二级域名，一个部署notcore api后端二级域名证书，一个vue 前端二级域名证书；

        申请完了以后先把证书下载的本地，一会需要安装到服务器的。

        注意：如果你的域名是阿里云注册的那么当证书申请下来的时候会自己解析，如果不是那么有一个东西需要提前复制保存起来，看下面图

        验证完了以后，点击提交审核，抽根烟就搞定了。。。接下来我们就可以去安装SSL证书了

配置windows服务器环境

1. 安装IIS有两种方式（这个我还是说一下）

        一种为下载一个宝塔（这是个很好的运维工具）https://www.bt.cn/new/index.html

        下载后安装到你服务器（使用方式看宝塔使用手册），然后登录宝塔控制面板--软件安装--安装IIS即可，包括数据库和其他环境插件

        我这里已经安装了 所以只有卸载按钮

        第二种方式：手动安装

        https://www.microsoft.com/zh-cn/download/details.aspx?id=48264

        下载后双击安装--一路下一步，也可以根据自己实际情况选择安装，我没有手动安装过

        （阿里云的windows服务器自带有，没有我也是用的宝塔）

1. 部署netcore api

        运行环境配置

        部署netcore api需要安装环境，IIS默认是不支持的，支持环境需要安装

       net core运行时： dotnet-hosting-5.0.17-win.exe

       net5.0 SDK： dotnet-sdk-5.0.408-win-x64.exe

        下载地址：下载 .NET 5.0 (Linux、macOS 和 Windows)

（注意：这两个插件的版本一定要一一对应，我这里是net5.0 所以ASP.NET Core运行时是5.0.XX，NET SDK是5.0.XX，如果你是的3.1 和需要下载3.1的）

        下载后安装顺序为 先dotnet-hosting运行时 在安装SDK。

        安装完这两个插件后重启IIS，重启IIS命令： IISReset

        重启后在下图中查看

        模块中存在下面红色框中的模块就说明环境已经安装好了，没有的话多重启几下IIS 或者重新再装一次

        部署netcore API网站

        安装证书，这里一次性把两个证书全部安装好，把已经申请下来的证书文件上传到服务器，选择IIS，选择服务器证书点击进入--点击右上角导入

 

        然后依次上传证书 输入密码，密码是跟证书一起下载下来的，多个证书别弄混淆了跟证书一一对应的。

        证书安装完开始部署NET core API网站

        添加网站了以后，需要设置一下“应用程序池”， .NET CLR版本设置为无托管代码， 管道设置成集成

        到这里就可以访问测试了，不出意外的话 部署完成。

1. 部署vue

        环境配置

        部署vue首选需要配置环境，IIS默认支持VUE访问的不需要另外安装其他运行环境，主要是需要安装重写、代理环境，所以需要安装两个插件

        ARRv3_0.exe 允许代理服务，下载地址：

Application Request Routing : The Official Microsoft IIS Site

urlrewrite2.exe 配置重写服务，下载地址：

URL Rewrite : The Official Microsoft IIS Site

到这里环境就配置好了

        部署vue网站

        网站部署跟netcore API部署方式一样，这里就不做重复，注意一下SSL选择即可，重点讲重写和代理配置

        因为我们的vue运行时，请求的接口地址是不直接暴露在外的，而是通过前端域名+通配符+结果路径组成。因此这需要配置代理和重写。

        重写作用是通过通配符的模式匹配，然后指向API域名真实地址

        举个例子： vue.xxx.com/api/login，通过通配符 api重写后 得到API地址 api.xxx.com/login

我们开始配置

     首先开启允许代理，下图中红框中的模块点击进入页面--按图操作即可

      接下来我们配置重写--也有一种说话叫接口转发

       选择URL重写--进入页面

     下面是配置接口转发，重写的目的是为了通过条件/prod-api/(.*)通配符 是否需要跳转接口地址，也就是通过这个通配符来判断地址是前端地址还是后端地址，如果是后端地址就通过这个重写设定跳转到最先面指定的接口地址。

        图片说明:     prod-api这个通配符每个人定义的不一样，来源是你vue项目定义的接口地址一般在 vue.config.js中，可以查找一个 也有做封装配置的，我的是全局配置打包注入的

        名称：可以随便写

 

 

        重写URL：API域名 {C：1}是变量怎么来定义的呢，可以通过测试条件得出的结果获得

        {C：1}是变量怎么来定义的呢，可以通过测试条件得出的结果获得，里面有{C：0}{C：1}根据你实际情况使用{C：0}或{C：1}一般是最后一个

        到这里接口转发就配置好了，可以访问了。

        接下来有个需要注意的重写配置，刷新出现400的配置，当我们可以访问了后浏览器返回或刷新都会出现400，怎么处理呢，可以通过重写指定跳转至首页或当前页

配置方法

这样就可以了，有一些地方不是很了解的可以查阅相关资料。