1. Dotnet9首页
  2. .NET
  3. Blazor

使用Github Pages托管Blazor应用

17

1.环境

VS2019 16.5.1

.NET Core SDK 3.1.200

Blazor WebAssembly Templates 3.2.0-preview2.20160.5 

2.简介

每个Github用户都可以拥有一个Github Pages,可以用来作为个人网站或者是用来作为项目的demo、文档等。本文将介绍如何将一个balzor应用(WASM)部署到Github Pages上。

3.流程

3.1.创建Github Pages

首先登录Github,然后创建一个仓库userName.github.io,其中userName是github的用户名。仓库的名字必须为此,否则无效。

3.2.发布项目

邮件Blazor项目,将其发布到本地文件夹中。由于没有服务器交互,这里只需要将wwwroot目录下的文件push到仓库即可。

3.3.SPA解决方法

Github Pages本身支持多页面程序的部署,为了托管Blazor这样的SPA,需要通过404页面的重定向来解决。步骤如下:

(1)创建404页面

在wwwroot目录下新建404.html,并在404页面中写入如下内容。注意,404页面至少需要512个字节才能工作,所以可以直接将下面的所有内容都复制到404页面中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafrex/spa-github-pages
      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
      // ----------------------------------------------------------------------
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)

      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
      // Otherwise, leave segmentCount as 0.
      var segmentCount = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );

    </script>
  </head>
  <body>
  </body>
</html>

(2)更改index.html

在index页面中加入重定向脚本,其脚本必须内嵌至index.html文件中,而且是在页面的其他脚本执行之前执行。另外,如果index.html并不是在仓库的根目录下,还需要更改<base href=”/” />为<base href=”/folder/…/” />,以使得href+index.html能找到本页面。最终样子大概如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>title</title>
    <base href="/" />
    ...
</head>

<body>
    <app>Loading...</app>
     <!-- End Single Page Apps for GitHub Pages -->
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    
    <!-- Start Single Page Apps for GitHub Pages -->
    <script type="text/javascript">
        // Single Page Apps for GitHub Pages
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // This script checks to see if a redirect is present in the query string
        // and converts it back into the correct url and adds it to the
        // browser's history using window.history.replaceState(...),
        // which won't cause the browser to attempt to load the new url.
        // When the single page app is loaded further down in this file,
        // the correct url will be waiting in the browser's history for
        // the single page app to route accordingly.
        (function(l) {
            if (l.search) {
                var q = {};
                l.search.slice(1).split('&').forEach(function(v) {
                    var a = v.split('=');
                    q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
                });
                if (q.p !== undefined) {
                    window.history.replaceState(null, null,
                        l.pathname.slice(0, -1) + (q.p || '') +
                        (q.q ? ('?' + q.q) : '') +
                        l.hash
                    );
                }
            }
        }(window.location))
    </script>
   
    <!-- Temporary polyfill for IE support -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,fetch"></script>    
    <script src="_framework/blazor.webassembly.js"></script>
    ...
</body>
</html>

3.4.添加Jekyll file

GitHub Pages使用的是Jekyll,凡是以“_”、“.”、“#”开头或是以“~”结尾的文件、文件夹均不会本构建到网站中。而blazor中会用到_framework和_content中的资源,为了解决这个“bug”,需要在仓库的根目录下创建一个“.nojekyll”的空文件。

3.5.Failed to find a valid digest in the ‘integrity’ attribute for resource…

如果这样就将仓库push到github,很有可能会遇到如下问题:

Failed to find a valid digest in the ‘integrity’ attribute for resource ‘https://xxx/_framework/wasm/dotnet.3.2.0-preview2.20159.2.js’ with computed SHA-256 integrity ‘FJC7gQVpQ5ZmLsci9Oxg/MIH96sVbWXaxI5G3fM7Doc=’. The resource has been blocked.

这个问题可以在github上找到解决方案:https://github.com/dotnet/aspnetcore/issues/19907。其中有两个说法,都是需要配置.gitattributes,一个是添加autocrlf=false,另外一个是添加* binary。将这两个配置添加到.gitattributes后,执行push,这样才能通过userName.github.io正常的访问到blazor应用程序。

示例:https://github.com/zxyao145/zxyao145.github.io/ByNotice,And欢迎大家start ByNotice 😊,一个完全使用blazor和css实现的通知组件。

本文参考:

https://github.com/rafrex/spa-github-pages

https://github.com/blazor-demo/blazor-demo.github.io

原文出处:博客园【半野】

原文链接:https://www.cnblogs.com/zxyao/p/12739114.html

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论