IIS部署 vue3+.net7+SignalR

最新推荐文章于 2024-06-16 01:08:56 发布

奔跑吧树袋熊

最新推荐文章于 2024-06-16 01:08:56 发布

阅读量577

点赞数

文章标签： .net

目标服务器为window2016，IIS10.0

一.IIS使用安装。

第一步，打开“控制面板”，进入启动或关闭Windows功能页面，系统会打开“服务器管理器”。

一直点下一步，进入到下述界面，其中常见HTTP功能中的WebDAV发布按需求选择，这个功能会过滤掉一些请求谓词，比如使用put、delete方式，导致无法正常请求，报Error 405 - Method Not Allowed，下面会有解决该问题的说明。

一直点下一步，等待安装完成即可。

二.部署准备工作

光是下好IIS并不行，我们要部署前端还需要IIS中有“Web 平台安装程序”(点击跳转安装)，下载完成后如下。

接着，我们需要在“Web 平台安装程序”中下载两个模块，分别 URLRewrite(点击跳转安装) 和 Application Request Routing(点击跳转安装)，安装过程及完成后如图所示。

然后，双击“Application Request Routing”，在右侧操作中点击“Proxy”中的“Server Proxy Settings...”，然后将“Enable proxy”打上勾即可

三.部署前端（以vue为主）

第一步，右击“网站”后，点击“添加网站”

第二步，如图所示。

第三步，双击你创建部署的网站，在右侧操作中，点击“浏览网站”，即可访问成功，如下图。

到这一步部署只是部署了，能访问，但是还有很多问题跟报错，接下来解决错误。

四.问题与报错

1.HTTP 错误 404.0 - Not Found(需重写路由入口)

经过上面的部署后，我们会发现，如果刷新页面或者跳转路由，会报错

HTTP 错误 404.0 - Not Found

您要找的资源已被删除、已更名或暂时不可用。

最可能的原因:

指定的目录或文件在 Web 服务器上不存在。
URL 拼写错误。
某个自定义筛选器或模块(如 URLScan)限制了对该文件的访问。
可尝试的操作:

在 Web 服务器上创建内容。
检查浏览器 URL。
创建跟踪规则以跟踪此 HTTP 状态代码的失败请求，并查看是哪个模块在调用 SetStatus。
详细错误信息:

模块 IIS Web Core
通知 MapRequestHandler
处理程序 StaticFile
错误代码 0x80070002
请求的 URL http://xxx.xxx.x.xxx/login
物理路径 C:\Users\Admin\Desktop\aa\dist\login
登录方法匿名
登录用户匿名
详细信息:

此错误表明文件或目录在服务器上不存在。请创建文件或目录并重新尝试请求。

这个错误是由路由入口错误造成的，主要是因为没有确定路由的入口，这个时候就需要我们去使用 URLRewrite 去重写路由入口，保证每次路由请求都能从index.html主入口进入，保证路由的准确性，我这里简单配置后，就可以刷新和路由跳转了，具体如下。

(1).点击“URL重写”，然后点击操作中的“添加规则”

(2).编辑规则，完成后在部署的网站中重启，在点击浏览网站，成功解决报错。

注意：
名称：名称按功能命名即可
匹配URL：选择使用正则表达式，然后模式根据请求的api来填写，比如我请求的api地址全都是为'/api/---'，那我这里填写 ^((?!(api)).)*$ 即可，会将URL中所有不含api文字的链接重写为首页。

2.请求调用不了(需要重写请求地址)

这里重写是根据我的devServer.proxy中的重写来的，正则表达式只需将api替换为你定义的重写名

3.地址显示undefined

如果出现以下这种问题，先确定请求重写规则是否设置并启用了，若启用了，则可能是因为部署地址的端口被占用。

修改操作如下，这样之后就可以正常调用请求了。

4.前端Vue项目如需解决跨域问题可以通过下述方式解决(一般不需要)

方法一：手动设置

选中当前站点》右侧找到HTTP响应头》右侧“增加”

Access-Control-Allow-Headers：AuthToken, Authorization, Origin, Content-Type, Accept, X-Requested-With

Access-Control-Allow-Methods：GET, POST, PUT, DELETE, OPTIONS

Access-Control-Allow-Origin：*
————————————————

方法二：站点根目录的配置文件设置

1.新建一个txt

2.把下面代码写入到文件里

3.文件和后缀名改成 web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Headers" value="AuthToken, Content-Type, Accept, X-Requested-With" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

5.如果Vue前端中有 POST请求，会出现 405 - 不允许用于访问此页的 HTTP 谓词

1、为什么会出现这个错误？

我们可以理解为在当前IIS服务器上，html页面只支持get请求，不支持post请求。

2、处理办法

登陆远程服务器，打开IIS管理工具，选择出现此问题的站点，点击进入“处理程序映射”–>”添加模块映射”，在请求路径录入“*.html”，模块选择“ServerSideIncludeModule”,可执行文件不用选，名称可以随便填一个（例如：SSI-html），然后点击“确认”即可。

如果在服务器上面找不到“ServerSideIncludeModule”模块，提示“ServerSideIncludeModule不是可识别的本机模块”，不着急，处理方案在这里

post提交访问html页面，需要ServerSideIncludeModule的支持，那服务器上面找不到这个模块该怎么办呢？不要着急，请接着往下面看

出现找不到的情况，是因为我们在安装IIS服务的时候，少装了一个叫“客户端包含”的功能，按下面的步骤安装好后，就能找到ServerSideIncludeModule了

win10安装该功能的步骤
打开“windows功能”，打开“Internet Information Services”–>“万维网服务”–>“应用程序开发功能”，选中“服务器端包含”，安装即可。

6. .net core API 的项目，部分请求地址使用了put、delete方式，导致无法正常请求，报Error 405 - Method Not Allowed。

可能一：由于配置IIS时把“WebDAV 发布”给勾选了，所以会导致拦截。

解决方案

方案一：服务器上删除“WebDAV 发布”（需在所有项目未用到该功能的前提下）

1、打开“控制面板”=》“程序和功能”

2、点击“启用或关闭windows 功能”

3、在服务器管理器中，找到“管理”=》“删除角色和功能”

4、在“删除角色和功能向导”=》一步步往下走，找到“服务器角色”=》“web服务器(IIS)”=》“Web服务器”=》“常见HTTP功能”=》“WebDAV发布”，勾选去掉，然后继续点击下去。

5、最后重启服务器即可。

方案二，修改.net core api 发布文件中的web.config文件，在 modules 和 handlers 移除掉WebDav模块

 <system.webServer> 
   <modules runAllManagedModulesForAllRequests="true"> 
     <remove name="WebDAVModule" /> 
   </modules> 
   <handlers>
      <remove name="WebDAV" />
   </handlers>
 </system.webServer>

可能二：AspNetCoreModule模块对请求谓词进行了拦截，通过下述图片说明进行修改。

五、以开源前后端分离项目成功挂载到IIS的经历作为总结。

文件链接 Admin.Core.ZR: 🎉Admin.NET(ZRAdmin)是一款前后端分离的、跨平台基于RBAC的通用权限管理后台。ORM采用SqlSugar。前端采用Vue、AntDesign，支持多种数据库、缓存、任务调度、支持统一异常处理、接口限流、支持一键生成前后端代码，支持动态国际化翻译(Vue3)，等诸多黑科技，代码简洁易懂、易扩展让开发更简单、更通用。⚡⚡⚡master为net7 ZR.Admin.Vue3: 🎉Vue 3.0 + Vite 2.9 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios + Pinia + Composition api+ i18n 开发的后台管理系统我的部署方式为部署成两个站点，同一ip，端口不一样。

vue 项目的开发环境设置 .env.development 文件 5030是后端接口

# 开发环境配置
ENV = 'development'

VITE_APP_API_HOST = 'http://localhost:5030'

# 开发环境
VITE_APP_BASE_API = '/dev-api'

# 路由前缀
VITE_APP_ROUTER_PREFIX = '/'

# 默认上传地址
VITE_APP_UPLOAD_URL = '/Common/UploadFile'

#socket API
VITE_APP_SOCKET_API = '/msghub'

vite.config.js 中的部分代码 5020是前端vue项目运行端口

 server: {
      port: 5020,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: env.VITE_APP_API_HOST,
          changeOrigin: true, //是否允许跨越
          rewrite: (path) => path.replace(/^\/dev-api/, '')
        },
        '/msghub': {
          target: env.VITE_APP_API_HOST,
          ws: true,
          rewrite: (path) => path.replace(/^\/msgHub/, '')
        }
      }
    }

.env.production 发布文件我使用的是ip发布，填写的是ip地址

# 生产环境配置
ENV = 'production'

VITE_APP_API_HOST='http://xxx.xx.xx.xx:5030'
# 生产环境
VITE_APP_BASE_API = '/prod-api'

# 路由前缀
VITE_APP_ROUTER_PREFIX = '/'

# 默认上传地址
VITE_APP_UPLOAD_URL = '/Common/UploadFile'

#socket API
VITE_APP_SOCKET_API = '/msghub'

IIS上新建个Vue站点，设置如下：

使用 yarn build:prod 命令将Vue 项目打包，拷贝dist目录下的文件到IIS站点的发布目录下，即上图中高级设置中的物理路径下

在该目录下新建个web.config文件，填写为下述文件，保存重启网站即可（注意在iis管理控制台对该网站的任何操作修改，都会更新到web.config）。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
                <clear />
                <rule name="prod-api" stopProcessing="true">
                    <match url="^(.*?)prod-api/(.*)$" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://localhost:5030/{R:2}" />
                </rule>
                <rule name="msghub" enabled="true" stopProcessing="true">
                    <match url="^(.*?)msghub(.*)$" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://localhost:5030/msghub{R:2}" />
                </rule>
                <rule name="Handle History Mode and custom 404/500" enabled="true" stopProcessing="true">
                    <match url="^((?!(api|msghub)).)*$" />
                    <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>
        <modules runAllManagedModulesForAllRequests="true">
            <remove name="WebDAVModule" />
        </modules>
        <handlers>
            <remove name="WebDAV" />
        </handlers>
        <security>
            <requestFiltering>
                <verbs>
                    <add verb="POST" allowed="true" />
                </verbs>
            </requestFiltering>
        </security>
  </system.webServer>
</configuration>

rules 我添加了三个URL重写：

1.由于前端的请求地址都带有 prod-api 前缀，将带有 prod-api 的请求URL全部重写到后台端口..

2.SignalR通信，将带有 msghub的请求重写，只需要改端口将前台接口5020重写到后台接口5030上。

3.将所有不带 api 、msghub 字样的URL 重写为/

我将网站的WebDAV发布进行了移除。由于SignalR通信 http://xxx.xxx.x.xxx:5020/msghub/negotiate?negotiateVersion=1 使用Post请求，在请求筛选的HTTP谓词中加了POST

.net 7 API发布的话由于Program.cs文件中处理了Cors，跨域不需要做其他工作

var corsUrls = builder.Configuration["corsUrls"]?.Split(',', StringSplitOptions.RemoveEmptyEntries);

//配置跨域
builder.Services.AddCors(c =>
{
    c.AddPolicy("Policy", policy =>
    {
        policy.WithOrigins(corsUrls == null ? Array.Empty<string>() : corsUrls)
        .AllowAnyHeader()//允许任意头
        .AllowAnyMethod()//允许任意方法
        .AllowCredentials();//允许cookie SignalR要求必须开启 AllowCredentials，而AllowCredentials需要和WithOrigins配对出现。
    });
});

另外如果安装IIS的时候勾选了安装WebDAV模块的话，也需要在发布后的Web.config中对该模块进行移除.

IIS 如果报错 500.19 位置在 <modules runAllManagedModulesForAllRequests="true"> 这一句的话

解决办法：

出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制，默认情况下会锁住配置项不允许更改。要取消锁定可以以管理员身份运行命令行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/handlers 。其中的 handlers 是错误信息中红字显示的节点名称。

如果modules也被锁定，可以运行 %windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules

%windir%\system32\inetsrv\appcmd unlock config -section:system.webServer/modules

注意：要以管理员身份运行才可以，默认不是管理员身份，方法，在开始菜单中的搜索程序与文件输入CMD，就会在上方出现一个CMD.EXE，在这个CMD.EXE文件上点击键，选择“以管理员身份运行”，打开命令行窗口，输入以上命令即可。
另外，如果使用Asp.net的朋友，在安装IIS7的时候一定记得勾选Asp.net，默认不选，也会出现类似的错误信息

如果出现下图的错误，提示服务没启动，可以检查运行环境及后台程序里的appsettings.json文件。目前已知的比如连接字符串加上 Integrated Security=SSPI 就会有如下的错误。

打开事件查看器：

可以定位到具体错误。如下所示是由于数据库连接字符串错误导致的。

如果前端请求参数过长或者上传文件过大的话可以通过在Program中的下述配置更改：

            //配置文件大小限制
            services.Configure<FormOptions>(options =>
            {
                options.ValueLengthLimit = int.MaxValue;
                options.MultipartBodyLengthLimit = int.MaxValue;// 60000000; 
                options.MultipartHeadersLengthLimit = int.MaxValue;
            });

如果是在VS中调试的项目，需要修改项目根目录 .vs\YundiErp\config\applicationhost.config 中找到<requestFiltering>节点添加

 <requestLimits maxAllowedContentLength="1073741824" />

如果是发布到IIS上的项目，找到web.config在<system.webServer>节点下添加。注意以后每次发布不要覆盖掉该web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<security>
<requestFiltering>

<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
</system.webServer>
</configuration>

修改IIS中配置->配置编辑器 system.webServer/serverRuntime 节点

修改ASP中修改最大请求实体主体限制

FormOptions.ValueLengthLimit 属性 (Microsoft.AspNetCore.Http.Features) | Microsoft Learn

另外如果服务器重启，访问网站出现500相关错误的话，可以尝试着将后台网站项目停止，应用程序池停用，再重新启用，重启网站。

.net core api 详细部署相关可以参考这篇文章，.net core 3.1-7.0 都适合，无非是安装的包的版本不一样：https://www.cnblogs.com/riddly/p/13747989.html

参考链接：【精选】IIS部署vue前端过程（含IIS及相关配置和安装），部署遇到的问题及报错（承接vueconfig.js全局配置环境变量，跨域问题）-CSDN博客

https://www.cnblogs.com/mzflog/p/16039932.html

奔跑吧树袋熊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
IIS部署 vue3+.net7+SignalR

文件链接Admin.Core.ZR: 🎉Admin.NET(ZRAdmin)是一款前后端分离的、跨平台基于RBAC的通用权限管理后台。ORM采用SqlSugar。前端采用Vue、AntDesign，支持多种数据库、缓存、任务调度、支持统一异常处理、接口限流、支持一键生成前后端代码，支持动态国际化翻译(Vue3)，等诸多黑科技，代码简洁易懂、易扩展让开发更简单、更通用。⚡⚡⚡master为net7。
复制链接

扫一扫