在IIS上部署Web API和Blazor WASM

  1. 软件安装

安装IIS:

对于Windows 桌面操作系统,启用“IIS 管理控制台”和“万维网服务”。

  • 导航到“控制面板” > “程序” > “程序和功能” > “打开或关闭 Windows 功能”(位于屏幕左侧)。
  • 打开“Internet Information Services”节点。 打开“Web 管理工具”节点。
  • 选中“IIS 管理控制台”框。
  • 选中“万维网服务”框。

接受“万维网服务”的默认功能,或自定义 IIS 功能

在IIS上部署Web API和Blazor WASM_第1张图片

对于万维网服务里面的安装,我这边安装了如下一些信息(实际根据需求定):

在IIS上部署Web API和Blazor WASM_第2张图片

安装 .NET Core 托管捆绑包

使用以下链接下载安装程序(注意安装了VS也不一定会装此模块):

https://dotnet.microsoft.com/download/thank-you/dotnet-runtime-2.2.3-windows-hosting-bundle-installer

注意最新的Hosting可能比上述网站的新,所以进入网站后,直接选择最新版本下载。

特别提醒:一定是先安装IIS,再安装.NET Core 托管捆绑包,如果后安装了IIS,则必须重新安装托管包。

2、Web API项目的发布

点击:

在IIS上部署Web API和Blazor WASM_第3张图片

在IIS上部署Web API和Blazor WASM_第4张图片

在IIS上部署Web API和Blazor WASM_第5张图片

选择文件系统模式,设置一个发布文件夹,点击发布

3、创建 IIS 站点

 1>创建可托管ASP net core 的应用池

打开IIS管理器,如下图添加应用池:

在IIS上部署Web API和Blazor WASM_第6张图片

2>添加站点

右键点击“网站”,添加网站,如下填写相关内容:

在IIS上部署Web API和Blazor WASM_第7张图片

其中,IP地址这一栏如果不填,就只能本机通过http://localhost:80/访问,如果希望局域网内的其他设备能够访问到,这里就应该填写自己电脑在网段内的IP地址。

主机名为域名,外网访问时使用(内网访问不填写),必须由万维网注册一个可用的域名才能使用,或者使用路由器功能做一次外网与内网地址的映射设置,也可以在外网访问。

3>文件夹权限编辑

选择添加的网站,右侧点击“编辑权限…”,安全-->编辑-->添加打开如下对话框,输入IIS AppPool\程序池名称,如下:

IIS AppPool\www.wxy.com

在IIS上部署Web API和Blazor WASM_第8张图片

注意,涉及到IIS的配置修改,需要时直接重启IIS:

4、设置入站规则

上面添加网站时,设置了端口号,这里需要进行相应的防火墙设置

控制面板:

在IIS上部署Web API和Blazor WASM_第9张图片

点击高级设置,创建一个以特定端口(这里为80)的网络规则(入站规则),可以输入多个端口,端口之间用逗号隔开:

在IIS上部署Web API和Blazor WASM_第10张图片

5、数据库设置

经过上面的几步,网站即可以访问了,但如果需要访问到数据库,需要进行如下设置:

连接字符串类似如下(在项目根文件appsettings.json里面修改即可):

Server=(local);Database=MvcMovieContext-8sql;Trusted_Connection=True;MultipleActiveResultSets=true

在IIS中的应用程序池名称为www.wxy.com,选择的进程模型标识为ApplicationPoolIdentity,则需要在SQL Server管理器中创建登录名,如下几个界面的设置:

在IIS上部署Web API和Blazor WASM_第11张图片

在IIS上部署Web API和Blazor WASM_第12张图片

选择“用户映射”(注意当新生成了一个数据库后,都需要设置如下界面):

在IIS上部署Web API和Blazor WASM_第13张图片

经过上面的流程,即可进行完整的访问,如果存在问题,可能需要重启IIS或者网站。

6、Blazro WASM的独立部署

Blazro项目如果是托管在ASP.NET Core里面的(创建项目时选择),部署时按照上面Web API的方式部署即可,如果是非托管在ASP.NET Core,采用的则是独立部署。

独立部署将 Blazor WebAssembly 应用作为客户端直接请求的一组静态文件提供  任何静态文件服务器均可提供 Blazor 应用。

需要安装重写URL模块https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads,点击下载并安装:

Blaror项目以文件夹的形式发布

在IIS上部署Web API和Blazor WASM_第14张图片

指定存储路径

在IIS上部署Web API和Blazor WASM_第15张图片

IIS中添加新网站,并指向上述文件夹,应用程序池设定为默认池即可(DefaultAppPool)

在IIS上部署Web API和Blazor WASM_第16张图片

创建的站里面就包含2项内容:

Blazor WASM不用考虑数据库的访问,因为对数据库的访问是通过Web API实现的。

7、Blazor WASM站点访问WEB API站点

如果是托管在ASP Net Core中(也就是VS创建项目时项目模板会生成3个项目),不需要考虑跨越访问,基地址也不用修改,直接来自容器,下面的流程主要针对非托管Blazro WASM项目(创建项目时项目模板只会生成1个项目)。

Blazor WASM项目中的Startup.cs中修改HttpClient的基地址(指向Web API的站点):

       //添加Web请求,如果来自父容器,则使用builder.HostEnvironment.BaseAddress
            string baseAddress = "https://localhost:44313/";
            builder.Services.AddTransient(sp => new HttpClient
            {
                BaseAddress = new Uri(baseAddress)
           });

Web API项目中添加CORS

浏览器安全性可防止网页向不处理网页的域发送请求。 此限制称为相同源策略 同一源策略可防止恶意站点读取另一个站点中的敏感数据。 有时,你可能想要允许其他站点对你的应用进行跨域请求。

Web API项目Startup.cs中ConfigureServices函数中添加(下例子添加了一个Blazor项目调试的站点和一个部署站点,容许Blazor WASM项目的站点可以跨域访问本Web API站点)

           services.AddCors(options =>
            {
                 options.AddDefaultPolicy(
                    builder =>
                    {
                        builder.WithOrigins("http://localhost:91",
                                          "https://localhost:44318")
                        .AllowAnyHeader().AllowAnyMethod();
                    });
            });

Configure函数中添加:

app.UseCors();

特别说明:对UseCors的调用位于UseRouting之后但在UseAuthorization之前

你可能感兴趣的:(在IIS上部署Web API和Blazor WASM)