在IIS中部署前后端应用,多么痛的领悟!

目前手上的Web项目是前后端分离的,所以有时也会倒腾Vue框架。

前后端应用最终以容器形态、在k8s中部署, 为此我搭建了基于Gitlab flow的Devops流程。

在Devops实践中,容器部署成为良方和事实标准。

但是在开发和自测阶段,前后端团队还需要一个友好的联调+自测的验证环境

最友好、最顺手的web服务器当属IIS,(后端API已经使用WebDeploy部署到IIS),本文记录使用IIS托管Vue前端应用的姿势。

前置条件:安装IIS、Url-Rewrite Module !!! 1. 部署Vue应用

我们以Github上Vue Todo应用为例,执行yarn build

在IIS中部署前后端应用,多么痛的领悟!

如果build成功,你会发现生成了一个dist静态资源文件夹。

2. 创建web.config

将yarn生成的dist文件夹拷贝到随意位置,并添加以下web.config文件, 这个文件实际是我们在IIS Url-Rewrite module上配置的结果。

<?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule 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="http://www.likecs.com/" /> </rule> </rules> </rewrite> <httpErrors> <remove statusCode="404" subStatusCode="-1" /> <remove statusCode="500" subStatusCode="-1" /> <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /> <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /> </httpErrors> <modules runAllManagedModulesForAllRequests="true"/> </system.webServer> </configuration> 3. 在IIS上部署Vue应用

在IIS中部署前后端应用,多么痛的领悟!


点击确定

4.运行Vue应用

在IIS中部署前后端应用,多么痛的领悟!

Nice! 现在你的Vue静态应用就运行在IIS上。

But, 在前后端分离模式中,我们的Vue应用不仅有静态资源,还要发起动态api请求。

一般情况下webpack打包后的api请求路径是/, 会尝试请求同域名下api资源, 实际并不存在。

我们需要将对Vue应用的api请求代理到真实后端地址。

5. 反向代理后端api请求

Vue应用站点还要充当一部分反向代理服务器的作用。

在IIS中部署前后端应用,多么痛的领悟!

假设真实后端api地址以部署在10.200.200.157:8091地址上,api以/api为前缀。

下面利用Url-Rewrite Module反向代理 Vue api请求到真实后端:

点击站点功能视图---> Url重写---> 添加入站规则

在IIS中部署前后端应用,多么痛的领悟!

Url重写的结果其实就是下面的web.config文件

<?xml version="1.0" encoding="utf-8"?> <configuration> <!-- To customize the asp.net core module uncomment and edit the following section. For more info see https://go.microsoft.com/fwlink/?linkid=838655 --> <system.webServer> <rewrite> <rules> <clear /> <rule stopProcessing="true"> <match url="api/([_0-9a-z/-]+)" /> <conditions logicalGrouping="MatchAll" trackAllCaptures="false" /> <action type="Rewrite" url="http://10.200.200.157:8091/{R:0}" /> </rule> <rule stopProcessing="true"> <match url="(.*)" /> <conditions logicalGrouping="MatchAll" trackAllCaptures="false"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="http://www.likecs.com/" /> </rule> </rules> </rewrite> <httpErrors> <remove statusCode="404" subStatusCode="-1" /> <remove statusCode="500" subStatusCode="-1" /> <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" /> <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" /> </httpErrors> </system.webServer> </configuration> <!--ProjectGuid: 068855e8-9240-4f1a-910b-cf825794513b-->

注意: 黄色背景行便是反向代理规则ReverseProxyInboundRule, 注意反向代理规则要在静态资源规则ResourceToIndex的前面。

这样我们就完成了在前后端分离开发模式下,使用IIS托管Vue应用的全过程。

可算解决了前后端团队开发中一大问题,我把这个问题定义为[效率工具]类,有兴趣的读者可以试一试。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwysxj.html