建站工作室,齐家网装修官网,在本地做的网站怎么修改域名,汕头高端网站开发安装
URL Rewrite
Works With: IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10
URL Rewrite : The Official Microsoft IIS Site 目前电脑IIS是6版本的#xff0c;以下的方法不太合适操作。目前用Nginx部署#xff0c;够用了。
nginx配置参考#xff1a;
uni-app 前面项目以下的方法不太合适操作。目前用Nginx部署够用了。
nginx配置参考
uni-app 前面项目vue部署到本地win系统Nginx上_Lan.W的博客-CSDN博客 参考
目前公司的 Web 项目是 SPA 应用采用前后端分离开发所以有时也会倒腾 Vue 框架。
在 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 version1.0 encodingutf-8?configurationsystem.webServerrewriterulesrule nameHandle History Mode and custom 404/500 stopProcessingtruematch url(.*) /conditions logicalGroupingMatchAlladd input{REQUEST_FILENAME} matchTypeIsFile negatetrue /add input{REQUEST_FILENAME} matchTypeIsDirectory negatetrue //conditionsaction typeRewrite url/ //rule/rules/rewritehttpErrorsremove statusCode404 subStatusCode-1 /remove statusCode500 subStatusCode-1 /error statusCode404 path/survey/notfound responseModeExecuteURL /error statusCode500 path/survey/error responseModeExecuteURL //httpErrorsmodules runAllManagedModulesForAllRequeststrue//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 version1.0 encodingutf-8?configuration!-- To customize the asp.net core module uncomment and edit the following section. For more info see https://go.microsoft.com/fwlink/?linkid838655 --system.webServerrewrite rules clear / rule nameReverseProxyInboundRule stopProcessingtrue match urlapi/([_0-9a-z/-]) /conditions logicalGroupingMatchAll trackAllCapturesfalse /action typeRewrite urlhttp://10.200.200.157:8091/{R:0} / /rule rule nameResourceToIndex stopProcessingtruematch url(.*) /conditions logicalGroupingMatchAll trackAllCapturesfalseadd input{REQUEST_FILENAME} matchTypeIsFile negatetrue /add input{REQUEST_FILENAME} matchTypeIsDirectory negatetrue //conditionsaction typeRewrite url/ //rule/rules/rewritehttpErrorsremove statusCode404 subStatusCode-1 /remove statusCode500 subStatusCode-1 /error statusCode404 path/survey/notfound responseModeExecuteURL /error statusCode500 path/survey/error responseModeExecuteURL //httpErrors /system.webServer/configuration!--ProjectGuid: 068855e8-9240-4f1a-910b-cf825794513b--
注意黄色背景行便是反向代理规则 ReverseProxyInboundRule 注意反向代理规则要在静态资源规则 ResourceToIndex 的前面。
这样我们就完成了在前后端分离开发模式下使用 IIS 托管 Vue 应用的全过程。 参考
IIS常见错误
Internet 信息服务 (IIS) 网页上的 HTTP 错误 500.19 - Internet Information Services | Microsoft Learn
在 IIS 中部署 SPA 应用多么痛的领悟
