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

在 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   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一、开启IIS全部功能。二、部署PHP1.官网下载并解压PHP: https://windows.php.net/downloads/releases/2.将php.ini-development文件改为php.ini3.修改php.ini(1)去掉注释,并修...【详细内容】
2021-07-15  Tags: IIS  点击:(128)  评论:(0)  加入收藏
作者 | 小码甲来源 | 全栈码农画像(ID:nodotnet)头图 | CSDN 下载自东方IC目前公司的 Web 项目是 SPA 应用,采用前后端分离开发,所以有时也会倒腾 Vue 框架。前后端应用最终以容...【详细内容】
2020-11-13  Tags: IIS  点击:(88)  评论:(0)  加入收藏
今天上午基于.net core做了一个简单的Web Api的Demo,练习一下IIS部署,本以为很简单,没想到遇到了很多坑,折腾了大半天才部署成功,简单记录一下,以供大家参考。1、发布项目 2、下...【详细内容】
2020-09-27  Tags: IIS  点击:(95)  评论:(0)  加入收藏
1. 打开服务器管理器,点击【添加角色和功能选项】。 2. 进入“添加角色和功能向导”页面,点击下一步。 3. 安装类型选择【基于角色或基于功能的安装】,点击下一步。 4. 进入...【详细内容】
2020-06-30  Tags: IIS  点击:(338)  评论:(0)  加入收藏
1. 将MySQL安装压缩包解压,将解压后的文件夹移动到安装目录下,比如示例中将mysql-5.7.24-winx64.zip解压后的文件夹重命名为mysql,并移动到C:\Program Files下 2. 右击“此电脑...【详细内容】
2020-05-12  Tags: IIS  点击:(76)  评论:(0)  加入收藏
Web Server中文名称叫网页服务器或web服务器。WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务IISIIS是微软公司的Web服务器。主要支持ASP语言环...【详细内容】
2020-04-18  Tags: IIS  点击:(106)  评论:(0)  加入收藏
云服务器iis怎么设置网站?IIS 是一种web服务器,它让网站程序发布变得十分简单易行。这里介绍下如何在云服务器上用IIS部署搭建一个网站。1.远程登录云服务器,单击 开始&rarr;管...【详细内容】
2020-03-13  Tags: IIS  点击:(113)  评论:(0)  加入收藏
现在 Windows 10 已经成为了大家常用的操作系统了,那么 Windows 10 如何安装 IIS 呢?Win10 安装 IIS 的方法与 Win7 非常类似,步骤几乎相同,下面简单分步骤介绍一下:1、打开 控制...【详细内容】
2020-01-09  Tags: IIS  点击:(108)  评论:(0)  加入收藏
导语:人往高处走,水往低处流。技术发展往高层堆叠,技术学习则往底层深处探索。 参考文章:1、 百度百科:IIS:https://baike.baidu.com/item/iis/19755079Apache:https://baike.ba...【详细内容】
2020-01-02  Tags: IIS  点击:(64)  评论:(0)  加入收藏
IIS6中的解析漏洞下面是iis6文件解析的原理:1、当WEB目录下,文件名以 xxx.asp;xxx.xxx 来进行命名的时候,此文件将送交asp.dll解析(也就是执行脚本)2、当WEB目录下,在访问以 xx...【详细内容】
2019-09-12  Tags: IIS  点击:(166)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(8)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条