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

目前公司的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

如果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应用

点击确定

4.运行Vue应用

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 反向代理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 p. 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应用的全过程。  

-----

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/307088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql闪回工具下载_MySQL闪回工具之myflash 和 binlog2sql

实践利用binlog2sql查询两个binlog之间的SQL&#xff1a;必须是两个binlog日志&#xff0c;指定start-file和stop-filebinlog2sql -h127.0.0.1 -P3309 -udba -pxxxxxx -dsakila -t employee --start-filemysql-bin.000112 --stop-filemysql-bin.000113 > /tmp/db.sql利用bin…

MySQL大表优化方案

背景阿里云RDS FOR MySQL&#xff08;MySQL5.7版本&#xff09;数据库业务表每月新增数据量超过千万,随着数据量持续增加,我们业务出现大表慢查询,在业务高峰期主业务表的慢查询需要几十秒严重影响业务方案概述一、数据库设计及索引优化MySQL数据库本身高度灵活&#xff0c;造成…

使用Azure静态Web应用部署Blazor Webassembly应用

上一次演示了如何使用Azure静态web应用部署VUE前端项目&#xff08;使用Azure静态web应用全自动部署VUE站点&#xff09;。我们知道静态web应用支持VUE&#xff0c;react&#xff0c;angular等项目的部署。除了支持这些常见前端框架&#xff0c;静态web应用同样支持微软推出的最…

mysql无法创建新用户_如何mysql禁止创建新用户

展开全部使用户不具有e69da5e6ba9062616964757a686964616f31333337376264Create User权限或者deny Create User权限下面是权限列表mysql> show privileges \G*************************** 1. row ***************************Privilege: AlterContext: TablesComment: To al…

TIOBE 11 月榜单:Python 挤掉 Java,Java的下跌趋势确立了?

喜欢就关注我们吧&#xff01;TIOBE 公布了 2020 年 11 月的编程语言排行榜。Python 已成功跃居榜单第二名&#xff0c;本月排名率为 12.12%&#xff1b;Java 被挤到第三位&#xff0c;排名率降至 11.68%。自有 TIOBE 榜单以来&#xff0c;C 和 Java 之前一直占据着前两名的位置…

mysql mysqladmin 介绍_Mysql—mysqladmin 命令详解

mysqladmin是一个执行管理操作的客户端程序。它可以用来检查服务器的配置和当前状态、创建和删除数据库等。mysqladmin工具的使用格式&#xff1a;mysqladmin [option] command [command option] command ......1.查看mysql的安装目录&#xff0c;进入mysql命令行输入&#xff…

一路踩坑,被迫聊聊 C# 代码调试技巧和远程调试

一&#xff1a;背景 1. 讲故事每次项目预交付的时候&#xff0c;总会遇到各种奇葩的坑&#xff0c;我觉得有必要梳理一下以及如何快速解决的&#xff0c;让后来人避避坑&#xff0c;这篇就聊聊自己的所闻所遇&#xff1a;我去&#xff0c;本地环境代码跑的哧溜&#xff0c;上了…

mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型

速成指南5分钟搞懂MySQL数据类型之数值型--DECIMAL类型DECIMAL类型的语法&#xff1a;DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL]。其中M指定的是数字的总位数(精度&#xff0c;最大65&#xff0c;默认值10)&#xff0c;D指定的是小数点后数字的位数(最大30&#xff0c;并且不能大…

mysql 变量 数据类型_浅谈mysql(二)数据类型

//我。。。我才是不是傲娇呢//如有问题还请多多指教。上回我们说到我们如何使用MySQL&#xff0c;关键是要看它的用途。用途衍生语句。之后文章的思路&#xff0c;也是如此&#xff0c;从用途出发&#xff0c;然后再到语句。那么&#xff0c;我们先问几个问题&#xff0c;我们用…

Java面试必问JVM调优,那.NET5呢?

JVM调优已经是普通Java工程师的必修课了&#xff0c;而.NET开源快5年了&#xff0c;CLR层面的优化到目前都不多见&#xff0c;甚至常用的性能调优工具都还没玩过。.NET5马上来了&#xff0c;要想在互联网大潮中逆袭&#xff0c;光靠平台是不够的&#xff0c;开发者也得给力才行…

win10新建管理员账户_【经验篇001】Win10专业版如何开启超级管理员账户

关注我们前言介绍我们在使用Win10系统的时候&#xff0c;有时候安装一些特殊的专业类软件&#xff0c;需要系统赋予软件特殊的权限&#xff0c;那就需要使用超级管理员帐户&#xff0c;Win10系统安装时候&#xff0c;Administrator账户默认是禁用的&#xff0c;所以我们就需要开…

SQL Server in Docker - 还原数据库

SQL Server in Docker 还原数据库上一回演示了如果在Docker环境下安装SQL Server(使用Docker运行SQL Server)&#xff0c;这次我们来演示下如何还原一个数据库备份文件到数据库实例上。使用winscp上传bak文件到linux服务器上一回我们启动docker容器的时候使用了-v参数挂账了本地…

Xamarin 从零开始部署 iOS 上的 Walterlv.CloudKeyboard 应用

本文将告诉大家如何从零开始在 iOS 上部署 Walterlv.CloudKeyboard 应用。这个 Walterlv.CloudKeyboard 应用是一个云输入法应用&#xff0c;在 GitHub 完全开源&#xff0c;采用 Xamarin 开发&#xff0c;用途是让手机接收电脑端的打字输入的输入法。因为我没有在 iOS 上找到任…

c 命令导出数据到mysql_MySQL命令行导出数据库

MySQL命令行导出数据库&#xff1a;1&#xff0c;进入MySQL目录下的bin文件夹&#xff1a;cd MySQL中到bin文件夹的目录如我输入的命令行&#xff1a;cd C:\Program Files\MySQL\MySQL Server 4.1\bin(或者直接将windows的环境变量path中添加该目录)2&#xff0c;导出数据库&am…

mysql权限create细化_mysql权限精细化分配-阿里云开发者社区

mysql中可以给你一个用户授予如select,insert,update,delete等其中的一个或者多个权限,主要使用grant命令,用法格式为&#xff1a;grant 权限 on 数据库对象 to 用户一、grant 普通数据用户&#xff0c;查询、插入、更新、删除 数据库中所有表数据的权利grant select on testdb…

Win10 Terminal + WSL 2 安装配置指南,精致开发体验

自从 Windows Terminal 正式发布后就再没有用过 Windows 系统自带的终端了。主要是 Terminal 简洁且灵活&#xff0c;更重要的是支持特殊字体&#xff0c;通过一些简单的配置可以使得终端看起来更舒适养眼。自从 Win 10 有了 Linux 子系统&#xff08;WSL&#xff09;&#xff…

mysql数据转储方法_Mysql数据库各种导出导入数据方式的区别(我的理解错误还望指正)...

mysqldump,NAVICAT转储&#xff0c;select * outfile在千级数据&#xff0c;万级&#xff0c;百万级数据下的表现。千级数据mysqldump导出sql文件导出是出了拒绝访问的错误&#xff1b;为对应目录(.sql文件要保存的目录)的对应用户添加(正在使用的用户)添加写入权限即可。mysql…

JetBrains 开发者调查 - 编程语言趋势

几个月前在公众号里发布了 StackOverflow 2020 开发者调查结果&#xff0c;其结果对 .NET Core 很友好。今天我们看看 JetBrains 2017-2020 四年的开发者调查结果统计&#xff0c;JetBrains 是偏 Java 系的&#xff0c;尤其是本家的 Kotlin 语言。 我们看一下在编程语言方面的趋…

mycli mysql_MyCLI :易于使用的 MySQL/MariaDB 客户端

导读MyCLI 是一个易于使用的命令行客户端&#xff0c;可用于受欢迎的数据库管理系统 MySQL、MariaDB 和 Percona&#xff0c;支持自动补全和语法高亮。它是使用 prompt_toolkit库写的&#xff0c;需要 Python 2.7、3.3、3.4、3.5 和 3.6 的支持。MyCLI 还支持通过 SSL 安全连接…

asp.net core 5.0的一些模块

.net 5就要发布了&#xff0c;把asp.net core 3.1的一些模块改成了5.0来适配&#xff0c;基本都是体力活&#xff0c;没有太大改动。ORMdapper一个轻量级的ORM&#xff0c;重点实现SQL语句实体映射&#xff0c;用sql不失灵活高效&#xff0c;映射用实体不失简便快捷&#xff0c…