您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

在 IIS 中部署 SPA 应用,多么痛的领悟

时间:2020-11-13 10:11:02  来源:  作者:
在 IIS 中部署 SPA 应用,多么痛的领悟

作者 | 小码甲

来源 | 全栈码农画像(ID:nodotnet)

头图 | CSDN 下载自东方IC

目前公司的 Web 项目是 SPA 应用,采用前后端分离开发,所以有时也会倒腾 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 中部署 SPA 应用,多么痛的领悟

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

 

2. 创建web.config

将 yarn 生成的 dist 文件夹拷贝到 C: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应用

在 IIS 中部署 SPA 应用,多么痛的领悟

点击确定

 

4.运行Vue应用

在 IIS 中部署 SPA 应用,多么痛的领悟

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

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

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

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

 

5. 反向代理动态api请求

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

在 IIS 中部署 SPA 应用,多么痛的领悟

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

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

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

在 IIS 中部署 SPA 应用,多么痛的领悟

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 应用的全过程。

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



Tags:IIS   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
作者 | 小码甲来源 | 全栈码农画像(ID:nodotnet)头图 | CSDN 下载自东方IC目前公司的 Web 项目是 SPA 应用,采用前后端分离开发,所以有时也会倒腾 Vue 框架。前后端应用最终以容...【详细内容】
2020-11-13   IIS  点击:(0)  评论:(0)  加入收藏
今天上午基于.net core做了一个简单的Web Api的Demo,练习一下IIS部署,本以为很简单,没想到遇到了很多坑,折腾了大半天才部署成功,简单记录一下,以供大家参考。1、发布项目 2、下...【详细内容】
2020-09-27   IIS  点击:(10)  评论:(0)  加入收藏
1. 打开服务器管理器,点击【添加角色和功能选项】。 2. 进入“添加角色和功能向导”页面,点击下一步。 3. 安装类型选择【基于角色或基于功能的安装】,点击下一步。 4. 进入...【详细内容】
2020-06-30   IIS  点击:(31)  评论:(0)  加入收藏
1. 将MySQL安装压缩包解压,将解压后的文件夹移动到安装目录下,比如示例中将mysql-5.7.24-winx64.zip解压后的文件夹重命名为mysql,并移动到C:\Program Files下 2. 右击“此电脑...【详细内容】
2020-05-12   IIS  点击:(4)  评论:(0)  加入收藏
Web Server中文名称叫网页服务器或web服务器。WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务IISIIS是微软公司的Web服务器。主要支持ASP语言环...【详细内容】
2020-04-18   IIS  点击:(19)  评论:(0)  加入收藏
云服务器iis怎么设置网站?IIS 是一种web服务器,它让网站程序发布变得十分简单易行。这里介绍下如何在云服务器上用IIS部署搭建一个网站。1.远程登录云服务器,单击 开始&rarr;管...【详细内容】
2020-03-13   IIS  点击:(13)  评论:(0)  加入收藏
现在 Windows 10 已经成为了大家常用的操作系统了,那么 Windows 10 如何安装 IIS 呢?Win10 安装 IIS 的方法与 Win7 非常类似,步骤几乎相同,下面简单分步骤介绍一下:1、打开 控制...【详细内容】
2020-01-09   IIS  点击:(37)  评论:(0)  加入收藏
导语:人往高处走,水往低处流。技术发展往高层堆叠,技术学习则往底层深处探索。 参考文章:1、 百度百科:IIS:https://baike.baidu.com/item/iis/19755079Apache:https://baike.ba...【详细内容】
2020-01-02   IIS  点击:(8)  评论:(0)  加入收藏
IIS6中的解析漏洞下面是iis6文件解析的原理:1、当WEB目录下,文件名以 xxx.asp;xxx.xxx 来进行命名的时候,此文件将送交asp.dll解析(也就是执行脚本)2、当WEB目录下,在访问以 xx...【详细内容】
2019-09-12   IIS  点击:(41)  评论:(0)  加入收藏
SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务器身份后颁发,具有服务器身份验证和数据传输加密功能。目前绝大多数网站,以及几户全部的电商、金融及证券类...【详细内容】
2019-09-09   IIS  点击:(61)  评论:(0)  加入收藏
环境:IIS:127.0.0.1,监听9800端口Nginx:监听80端口nginx反向代理IIS时,服务端会返回Location,而Location中的地址恰巧是域名+9800(IIS监听的端口),会进行重定向,导致访问域名时会自动...【详细内容】
2019-08-21   IIS  点击:(159)  评论:(0)  加入收藏
有一些网站安全性的要求,我们的网站浏览器里必须使用https来访问,如果我们强制输出https时,页面会出现 403-4.htm的错误,相信大家对这个页面不会陌生。 这个时候我们可以设置IIS...【详细内容】
2019-07-19   IIS  点击:(187)  评论:(0)  加入收藏
1.apache 主要支持PHP IIS 主要支持asp 静态的网页他们都支持入htm, 端口冲突的话你可以更改其中一个服务器的端口来实现端口的避让, IIS在右击“我的电脑”“管理”“服务...【详细内容】
2019-06-11   IIS  点击:(195)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条