Uno 플랫폼.GitHub 페이지의 NET WebAssembly 응용 프로그램

이 문장에서 나는 어떻게 하나를 구축하는지 소개할 것이다.NET WebAssembly 응용 프로그램을 사용하고 GitHub 작업으로 GitHub 페이지에 게시합니다.
Uno 플랫폼은 C# 기반의 크로스 플랫폼 프레임워크로 XAML을 활용한 애플리케이션 구축입니다.WPF, Xamarin, UWP에 익숙한 사람이라면 누구나 익숙해 보인다.
이 앱들은 다양한 플랫폼과 장치에 배치할 수 있지만, 내가 관심 있는 플랫폼은 Web Assembly이다.특히 GitHub 페이지에서 호스팅되는 정적 사이트에서 C#을 실행할 수 있습니다.
GitHub 페이지에서는 정적 사이트를 무료로 호스팅할 수 있으며 저장소에서 직접 배포하므로 배포할 사이트를 쉽게 설정할 수 있습니다.

Uno 플랫폼 개시하다

GitHub에서 테스트를 실행하기 위해서는 이러한 선결 조건이 필요합니다.

GitHub 계정에 계정이 없는 경우

GitHub 저장소에 재구매 계약이 없는 경우 다음 기사를 참조하여 설정을 확인하십시오. join here

로컬 클론 저장소

VScode - 어플리케이션의 IDE 편집 및 디버깅Create a repo

클론 저장소 Uno WebAssembly 프로젝트 설정하기

먼저 프로젝트 템플릿을 Uno에서 설치합니다.

dotnet new -i Uno.ProjectTemplates.Dotnet

이제 다음 명령을 사용하여 템플릿에서 새 Uno 프로젝트를 작성할 수 있습니다.

I have disabled a number of targets, if you intend to run this app on another platform, you can flip the respective false option to true

dotnet new unoapp -o GitHub.UnoPages -wasm=true -android=false -macos=false -uwp=false -ios=false -skia-wpf=false -skia-gtk=false -st=false -v=true

이 명령을 실행하면 새 폴더 생성 호출 GitHub.UnoPages 을 볼 수 있습니다.
테스트 항목이 유효한지 여부

VScode

의 폴더 열기GitHub.UnoPages

GitHub을 엽니다.페이지가 없습니다.공유 > 홈 페이지.xaml 및 xaml의 다음 줄 변경
... 에서 오다<TextBlock Text="Hello, world!" Margin="20" FontSize="30" />대상<TextBlock Text="Hello, Pages!" Margin="20" FontSize="30" />

변경 사항 저장

디버그 탭으로 전환

실행 및 디버깅 메뉴에서 선택합니다.NET Core 출시

녹색 부팅 버튼을 누르거나 F5를 누릅니다.

프로젝트를 구축하고 실행하기 시작하면 컨트롤러

에서 볼 수 있습니다Now listening on: http://localhost:5000

브라우저에서 https://code.visualstudio.com/열면 안녕하세요, Pages!

프로그램이 실행됨에 따라 디버깅을 중지할 수 있습니다

변경 사항을 커밋하고 GitHub 저장소로 푸시합니다.

For simplicity in this post, I am pushing directly to the main branch, In practice it is advisable to protect your main branch, and create a feature branch, and subsequent PR

http://localhost:5000 파이프를 건설하다

우리는 현재 프로그램을 자동으로 구축하고 발표하기 위해 파이프라인을 세울 것이다.

GitHub 재구매 계약의 홈 페이지에서 운영 탭을 누릅니다.

작업 페이지에서 *을(를) 클릭하여 워크플로우를 직접 설정*

미리 채워진 Yaml 삭제

다음 Yaml 복사 및 붙여넣기

name: UnoPages App
on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]   
  workflow_dispatch:  # Allows workflow to be ran via a button
jobs:
  build:
    runs-on: ubuntu-latest
    name: Build
    env:
      config: 'Release'
      framework: 'netstandard2.0'
    steps:
    - uses: actions/checkout@v2
    - name: Setup .NET
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: 5.0.x
    - name: Restore Dependencies
      run: dotnet restore ./GitHub.UnoPages/GitHub.UnoPages.Wasm/GitHub.UnoPages.Wasm.csproj
    - name: Build 
      run: dotnet build ./GitHub.UnoPages/GitHub.UnoPages.Wasm/GitHub.UnoPages.Wasm.csproj --no-restore -f $framework -c $config
    - name: Publish Artifacts
      uses: actions/[email protected]
      if: github.event_name == 'workflow_dispatch' # Only deploy if Workflow manually ran
      with:
        name: pages
        path: ./GitHub.UnoPages/GitHub.UnoPages.Wasm/bin/${{env.config}}/${{env.framework}}/dist/        
  deploy:
    needs: build 
    runs-on: ubuntu-latest
    name: Deploy
    if: github.event_name == 'workflow_dispatch' # Only deploy if Workflow manually ran
    steps:
    - name: Download artifacts
      uses: actions/download-artifact@v2
      with:
        name: pages
        path: dist        
    - name: Deploy to GitHub Pages
      uses: crazy-max/ghaction-github-pages@v2
      with:
        target_branch: gh-pages
        build_dir: ./dist/
        jekyll: false
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

작업 흐름을 저장하고 다음과 같은 상세한 정보를 제공합니다. 마찬가지로 간단하게 보기 위해서main에 직접 제출할 것입니다.

제출 시작 버튼

을 누릅니다.

설명 추가CI: 워크플로우 구축

옵션을 직접 제출main 분기로 유지하거나 필요할 때 새 분기 생성)

새 파일 제출 버튼

을 누릅니다.

현재 actions 옵션 카드로 전환하면push tomain가 터치한 구축을 볼 수 있습니다

run CI:Build workflow를 클릭하여 워크플로 보기

현재 구축 작업의 운행을 보아야 합니다. 배치 작업이 아니라.이것은 의도적인 것이다. 만약 당신이 우리의 업무 흐름을 다시 보게 된다면, 당신은 우리가 구축된 사건을 촉발하는 조건이 있다는 것을 발견할 수 있을 것이다. 이것은 업무 흐름 스케줄링이 필요하다.

deploy:
   needs: build 
   runs-on: ubuntu-latest
   name: Deploy
   if: github.event_name == 'workflow_dispatch' # Only deploy if Workflow manually ran

트리거 배포

파이프 부분에서 말한 바와 같이, 우리는 업무 흐름 분배 사건이 발생할 때만 배치한다.
주 작업 탭으로 돌아가려면 다음과 같이 하십시오.

어플리케이션 워크플로우 목록에서 선택

워크플로우 실행 드롭다운 버튼이 나타날 수 있습니다

.

풀다운 패널에서 워크플로우 실행 버튼을 클릭하고 분기를 Main로 유지

워크플로우가 완료될 때까지 기다리며 배포 작업도 실행 중을 확인할 수 있습니다.

이 배포는 Uno Wasm 어플리케이션을 구축하여 gh-pages라는 분기로 푸시해야 합니다.

우리의 응용 프로그램의 구축과 파이프의 설치에 따라 다음 절에서는 마지막 단계를 소개할 것이다

GitHub 페이지 사용

페이지를 사용하기 위해서는 환매 협의를 사용해야 합니다.
재구매 협의서:
설정을 클릭하고 옵션 페이지에서 GitHub 페이지 제목이 표시될 때까지 오른쪽으로 아래로 스크롤합니다.
소스 코드 패널에서

분기 드롭다운 목록gh-pages에서 선택

폴더를 /(root)로 유지

Save 순

페이지가 새로 고침되면 GitHub 페이지 URL

을 볼 수 있습니다

링크를 클릭하면 배치된 응용 프로그램을 볼 수 있습니다!

샘플 배포 버전은 다음과 같습니다.

전체 저장소: