大家好,我是考100分的小小码 ,祝大家学习进步,加薪顺利呀。今天说一说在IIS中部署前后端应用,多么痛的领悟![通俗易懂],希望您对编程的造诣更进一步.
目前手上的Web项目是前后端分离的,所以有时也会倒腾Vue框架。
“
前后端应用最终以容器形态、在k8s中部署, 为此我搭建了基于Gitlab flow的Devops流程。
在Devops实践中,容器部署成为良方和事实标准,。
但是在feature开发和自测阶段,不能滥打容器镜像,同时为了屏蔽学习成本(不是所有同事都会容器、都会nginx、都会centos),前后端团队还需要一个友好的联调+自测的验证环境,
最友好、最顺手的web服务器当属IIS,(后端API已经使用WebDeploy部署到IIS),本文记录使用IIS托管Vue前端应用的姿势。
前置条件:安装IIS、Url-Rewrite Module !!!
1. 部署Vue应用
我们以Github上Vue Todo应用为例,执行yarn build
如果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 name="Handle History Mode and custom 404/500" 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="/" />
</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应用
点击确定
4.运行Vue应用
![在IIS中部署前后端应用,多么痛的领悟![通俗易懂]插图5 在IIS中部署前后端应用,多么痛的领悟![通俗易懂]](https://daima100.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Nice! 现在你的Vue静态应用就运行在IIS上。
But, 在前后端分离模式中,我们的Vue应用不仅有静态资源,还要发起动态api请求。
“
一般情况下webpack打包后的api请求路径是
/
, 会尝试请求同域名下api资源, 实际并不存在。
我们需要将对Vue应用的api请求代理到真实后端地址。
5. 反向代理后端api请求
Vue应用站点还要充当一部分反向代理服务器的作用。
假设真实后端api地址以部署在10.200.200.157:8091地址上,api以/api
为前缀。
下面利用Url-Rewrite Module反向代理 Vue api请求到真实后端:
点击站点功能视图—> Url重写—> 添加入站规则
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 name="ReverseProxyInboundRule" 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 name="ResourceToIndex" 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="/" />
</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应用的全过程。
可算解决了前后端团队开发 sprint初期开发的痛点,我把这个问题定义为[效率工具]类,有兴趣的读者可以试一试。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/13097.html