首页 > 其他分享 >Blazor WebApp配置应用基路径PathBase

Blazor WebApp配置应用基路径PathBase

时间:2024-02-18 21:46:28浏览次数:24  
标签:PathBase 子项目 app2 app1 proxy https WebApp Blazor Microsoft

Blazor WebApp配置应用基路径PathBase

在一个设备数据管理软件系统中,根据生命周期和应用场景不同,可能会划分几个独立的软件子项目。在部署到的时候,可以采用不同的端口号来访问不同的软件子项目,也可以采用统一的端口号和不同的应用基路径来访问不同的软件子项目。

基本实现方案:

1,软件子项目配置应用基路径PathBase;

2,通过nginx反向代理转发请求到软件子项目容器;

 

参考微软官网:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-8.0&tabs=visual-studio#app-base-path

 

软件子项目配置应用基路径PathBase

新建Blazor WebApp项目App1,选择Server端呈现,简单一点。

在App.razor设置base href

D:\Software\gitee\PathBaseWeb\App1\Components\App.razor

    @* <base href="/" /> *@

    @* 应用基路径 *@

    <base href="/app1/" />

 

在Program调用UsePathBase

D:\Software\gitee\PathBaseWeb\App1\Program.cs

var app = builder.Build();

 

//应用基路径

app.UsePathBase("/app1");

 

在launchSettings.json设置启动软件时打开的路由,使得本机调试时应用基路径

D:\Software\gitee\PathBaseWeb\App1\Properties\launchSettings.json

      "https": {

        "commandName": "Project",

        "dotnetRunMessages": true,

        "launchBrowser": true,

        "applicationUrl": "https://localhost:7001;http://localhost:5001",

        //应用基路径

        "launchUrl": "https://localhost:7001/app1",

        "environmentVariables": {

          "ASPNETCORE_ENVIRONMENT": "Development"

        }

      },

 

然后在本机调试运行App1软件,可以看到浏览器地址栏是https://localhost:7001/app1,带有基路径。

 

注意,在软件子项目中,涉及相对路由跳转的代码,要采用相对路由,不能是绝对路由。微软官网提供了很好的示例。

如果软件子项目访问Identity Server 4认证服务器,也要注意同步修改认证服务器的config,比如:

AllowedCorsOrigins = { "https://localhost:7001" },

RedirectUris = { "https://localhost:7001/app1/signin-oidc" },

PostLogoutRedirectUris = { "https://localhost:7001/app1/signout-callback-oidc" },

 

退出登录,返回软件子项目主页相对路径./

var properties = new AuthenticationProperties

{

    RedirectUri = "./"

};

 

搭建nginx反向代理容器

新建docker compose.yml,把各个软件子项目,nginx放在一个容器网桥里,软件子项目只暴露端口,不映射端口到外网,只能通过nginx反向代理访问。软件子项目app1发布后的文件上传到云服务器docker compose.yml当前目录的/pub/app1下面,app2放到/pub/app2。下载IIS的SSL证书、nginx的SSL证书并修改文件名为myweb.*,都放在云服务器docker compose.yml当前目录,再映射到容器内部。

 

version: '3'

services:

  app1:
    container_name: app1
    image: app1image
    build:
      context: ./pub/app1
      dockerfile: Dockerfile
    expose:
      - 7001
    environment:
      - ASPNETCORE_Kestrel__Certificates__Default__Path=/https/myweb.pfx
      - ASPNETCORE_Kestrel__Certificates__Default__Password=xxx
      - ASPNETCORE_URLS=https://*:7001
      - ASPNETCORE_ENVIRONMENT=Production
      - TZ=Asia/Shanghai
    volumes:
      - ./:/https #SSL证书myweb.pfx放在宿主机当前目录,映射到容器/https
    security_opt:
      - seccomp=unconfined #取消docker的seccomp调用白名单安全检查
    restart: always

  app2:
    container_name: app2
    image: app2image
    build:
      context: ./pub/app2
      dockerfile: Dockerfile
    expose:
      - 7002
    environment:
      - ASPNETCORE_Kestrel__Certificates__Default__Path=/https/myweb.pfx
      - ASPNETCORE_Kestrel__Certificates__Default__Password=xxx
      - ASPNETCORE_URLS=https://*:7002
      - ASPNETCORE_ENVIRONMENT=Production
      - TZ=Asia/Shanghai
    volumes:
      - ./:/https #SSL证书myweb.pfx放在宿主机当前目录,映射到容器/https
    security_opt:
      - seccomp=unconfined #取消docker的seccomp调用白名单安全检查
    restart: always

  pathbasenginx:
    container_name: pathbasenginx
    image: nginx:1.17.2
    ports:
      - "8008:8008"
    environment:
      - TZ=Asia/Shanghai
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ./myweb.pem:/etc/nginx/myweb.pem
      - ./myweb.key:/etc/nginx/myweb.key
    restart: always
    links:
      - app1
      - app2

 

在nginx.conf配置location,把不同的基路径转发到不同的软件子项目容器。

 

#支持http升级到websocket
map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }

#cookies太大会报错upstream sent too big header
proxy_buffer_size  128k;
proxy_buffers   32 32k;
proxy_busy_buffers_size 128k;

server {
  listen 8008 ssl;
  ssl_certificate      myweb.pem;
  ssl_certificate_key  myweb.key;

  location /app1/ {
    proxy_pass https://app1:7001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_set_header Host $host:$server_port;
    proxy_cache_bypass $http_upgrade;

    proxy_redirect off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
  }

  location /app2/ {
    proxy_pass https://app2:7002;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $http_connection;
    proxy_set_header Host $host:$server_port;
    proxy_cache_bypass $http_upgrade;

    proxy_redirect off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
  }

}

 

 

测试

在云服务器控制台docker-compose up构建容器并运行,看到app1和app2的启动信息,确定侦听协议和端口都正确。

app1             | warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]

app1             |       Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. For more information go to https://aka.ms/aspnet/dataprotectionwarning

app1             | warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]

app1             |       No XML encryptor configured. Key {d2f9ad5f-c488-489a-88b6-d8efc3e2ebbd} may be persisted to storage in unencrypted form.

app1             | warn: Microsoft.AspNetCore.Hosting.Diagnostics[15]

app1             |       Overriding HTTP_PORTS '8080' and HTTPS_PORTS ''. Binding to values defined by URLS instead 'https://*:7001'.

app2             | warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]

app2             |       Storing keys in a directory '/root/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. For more information go to https://aka.ms/aspnet/dataprotectionwarning

app2             | warn: Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager[35]

app2             |       No XML encryptor configured. Key {62dd3c7c-bc41-419f-a72e-9cd0bd8c07f9} may be persisted to storage in unencrypted form.

app2             | warn: Microsoft.AspNetCore.Hosting.Diagnostics[15]

app2             |       Overriding HTTP_PORTS '8080' and HTTPS_PORTS ''. Binding to values defined by URLS instead 'https://*:7002'.

app1             | info: Microsoft.Hosting.Lifetime[14]

app1             |       Now listening on: https://[::]:7001

app1             | info: Microsoft.Hosting.Lifetime[0]

app1             |       Application started. Press Ctrl+C to shut down.

app1             | info: Microsoft.Hosting.Lifetime[0]

app1             |       Hosting environment: Production

app1             | info: Microsoft.Hosting.Lifetime[0]

app1             |       Content root path: /app

app2             | info: Microsoft.Hosting.Lifetime[14]

app2             |       Now listening on: https://[::]:7002

app2             | info: Microsoft.Hosting.Lifetime[0]

app2             |       Application started. Press Ctrl+C to shut down.

app2             | info: Microsoft.Hosting.Lifetime[0]

app2             |       Hosting environment: Production

app2             | info: Microsoft.Hosting.Lifetime[0]

app2             |       Content root path: /app

 

打开浏览器,通过应用基路径访问2个软件子项目容器,正确显示。

https://www.xxx.cn:8008/app1

https://www.xxx.cn:8008/app2

 

问题

.net 8 Asp.Net Core的docker compose脚本参照.net 7编写,在容器运行报错Failed to create CoreCLR, HRESULT: 0x80070008,百度找到答案,取消docker的seccomp调用白名单安全检查,即可解决。参考:

https://www.cnblogs.com/cyq1162/p/17981333

《Failed to create CoreCLR, HRESULT_ 0x80070008--.net core 8 run in docker - 路过秋天 - 博客园》

 

DEMO代码地址:https://gitee.com/woodsun/pathbaseweb

 

标签:PathBase,子项目,app2,app1,proxy,https,WebApp,Blazor,Microsoft
From: https://www.cnblogs.com/sunnytrudeau/p/18019999

相关文章

  • Blazor WebAssembly 本地调试时如何将项目运行在子目录
    假设项目名为MyApp,想要运行的子目录名也叫MyAppMyApp.csproj<PropertyGroup> <StaticWebAssetBasePath>MyApp</StaticWebAssetBasePath></PropertyGroup>Properties/launchSettings.json"https":{"commandName":"Projec......
  • Blazor的呈现模式与LiteDB项目中的坑点
    参照文档指引,准备用.NET8的Blazor和LiteDB撸个小项目,结果引入的LiteDB相关代码一直无法访问目录中的数据库,重建了好几次项目都无果。琢磨了半天才发现自己踩了新版本Blazor的呈现模式(RenderMode)的坑。看来还是要持续学习.NET新技术,跟上时代步伐!解决方案先给出我琢磨出来的解决......
  • Net 8 Blazor Web App项目访问Identity Server 4
    Net8BlazorWebApp项目访问IdentityServer4IdentityServer系列目录BlazorServer访问IdentityServer4单点登录-SunnyTrudeau-博客园(cnblogs.com)BlazorServer访问IdentityServer4单点登录2-集成Asp.Net角色-SunnyTrudeau-博客园(cnblogs.com)BlazorSe......
  • Blazor OIDC 单点登录授权实例5 - 独立SSR App (net8 webapp ) 端授权
    目录:OpenID与OAuth2基础知识BlazorwasmGoogle登录BlazorwasmGitee码云登录BlazorOIDC单点登录授权实例1-建立和配置IDS身份验证服务BlazorOIDC单点登录授权实例2-登录信息组件wasmBlazorOIDC单点登录授权实例3-服务端管理组件BlazorOIDC单点登录授权实......
  • [Blazor WebAssembly] 学习随笔——组件1.微信弹框(WXDialog)
    总有以下的需求:等待用户确认,就是有【确定】和【取消】按钮,有个标题和内容的弹框(比如:您确定要删除吗?)就是告知一下,就是上面的【取消】按钮不显示(比如:保存成功!)莫有按钮,几秒钟后自己消失,就是所谓的toast(比如:已完成)莫有按钮,需要发送命令才能消息(比如:数据加载中)一开始犯了经验主......
  • BootstrapBlazor 模板适配移动设备使用笔记
    项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目,作者制作了项目模板(ProjectTemplates),使用dotnetnew命令行模式,使用步骤如下:安装项目模板dotnetnewinstallBootstrap.Blazor.Templates::8.0.1创建工程dotnetnewbbapp官网教程https:......
  • Asp-Net-Core学习笔记:4.Blazor-Server入门
    本来今天开始是有其他的安排了,也没办法抽出那么多时间来学NetCore,不过我想做事情有始有终吧,除了gRPC还没跑起来之外,Blazor这部分也了解了一点,官网地址:https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor目前来说还不是很完善,真正的离线单页应用还处于预览版阶段。Blazo......
  • [Blazor WebAssembly] 学习随笔——身份验证
    最近在折腾微信相关的开发,包括公众号、企业微信内部应用、企业微信第三方开发。基于Razor方式写了:企业微信内部应用的类库企业微信第三方应用的类库公众号的类库一个统一管理公众号、企业微信内部应用和第三方应用有关授权、Token之类的应用。然后准备写一个开源的简单的酒......
  • 使用 Kestrel 自托管https 并作为 Windows 服务启动 Blazor 提示: 无法配置 HTTPS 端
    原文链接https://stackoverflow.com/questions/53300480/unable-to-configure-https-endpoint-no-server-certificate-was-specified-and-the/71026252#71026252使用Kestrel自托管并作为Windows服务启动Blazor提示UnabletoconfigureHTTPSendpoint.Noservercertifi......
  • .NET中使用BootstrapBlazor组件库Table实操篇
    前言Table表格在后台管理应用中使用的是相当频繁的,因此找一个功能齐全的前端框架对于我们而言是非常必要的,因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件(本章使用的数据都是程序自动生成的模......