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

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

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


8f409f10abd487ae29d523eb2bc584be.png


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


d5b869311cfa04091ae71616ed424116.png


点击确定

4.运行Vue应用


c5f71a61015993dff7b84a7e7b307b30.png


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


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


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


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


5. 反向代理动态api请求


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


637bc938681f46fa5ffc11ff3b69e42c.png


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


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

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

361d6ea0c7d11907b549babf7edce8ac.png


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



相关文章
|
2月前
|
C++
【Azure云服务 Cloud Service】如何在部署云服务Cloud Service时候通过启动任务Start Task来配置IIS (如开启ARR)
【Azure云服务 Cloud Service】如何在部署云服务Cloud Service时候通过启动任务Start Task来配置IIS (如开启ARR)
|
2月前
|
开发框架 .NET API
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
在IIS上部署ASP.NET Core Web API和Blazor Wasm详细教程
136 3
|
2月前
|
网络安全 C++
【Azure Developer】Visual Studio 2019中如何修改.Net Core应用通过IIS Express Host的应用端口(SSL/非SSL)
【Azure Developer】Visual Studio 2019中如何修改.Net Core应用通过IIS Express Host的应用端口(SSL/非SSL)
|
3月前
|
弹性计算 持续交付 Docker
阿里云云效产品使用合集之如何部署到阿里云服务器上的 Windows Server 上的 IIS
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
3月前
|
前端开发 JavaScript 应用服务中间件
windows server + iis 部署若伊前端vue项目
5,配置url重写规则(重写后端请求) 注:如果没有Application Request Routing Cachefourcloudbdueclaim和URL重写,则是第二部的那两个插件没装上 打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能
196 0
|
4月前
|
应用服务中间件 网络安全 数据安全/隐私保护
SSL证书在IIS上部署使用
该文介绍了如何在IIS上部署SSL证书以实现HTTPS访问。首先建议使用nginx,但若需使用IIS,需有SSL证书(fullchain.pem和privkey.pem)并熟悉IIS操作。文中提供了两种证书转换方法:已有openssl,使用命令`openssl pkcs12 -export`生成.pfx文件;无openssl,通过Python脚本(pyOpenSSL v23.2.0)转换。转换后的.pfx文件导入Windows,选择“本地用户”并输入密码。最后在IIS中绑定证书,测试https访问应能正常工作。
230 0
|
5月前
|
Kubernetes 网络安全 Windows
要在云效部署到阿里云服务器上的 Windows Server 上的 IIS
【2月更文挑战第18天】要在云效部署到阿里云服务器上的 Windows Server 上的 IIS
440 4
|
5月前
|
容器
IIS 应用程序池
IIS 应用程序池
75 1
|
5月前
|
存储 网络安全 数据安全/隐私保护
Windows Server 2019 IIS HTTPS证书部署流程详解
Windows Server 2019 IIS HTTPS证书部署流程详解
486 0
|
5月前
|
JavaScript Windows
VUE部署到IIS中报404错误解决方案-配置URL重写
VUE部署到IIS中报404错误解决方案-配置URL重写
221 0