Blazor, Azure 기능 및 Azure 정적 웹 애플리케이션 시작

정적 사이트가 너무 좋아요.어쨌든, 너는 정적 사이트에서 이 글들을 읽는다.동적으로 생성된 파일이 필요하지 않다면, 왜 그것들의 비용을 걱정해야 합니까?정적 사이트가 지루하다는 것은 아니다. 다만 HTML과 같은 파일은 동적으로 생성된 것이 아니다.해야 할 일이 더 적기 때문에, 이 사이트들은 더욱 잘하고, 운행 원가가 더욱 낮다.
이것은 이러한 블로그에 매우 유용하지만, 많은 경우, 당신은 여전히 서버 측이 필요합니다.일부 API와 대화하고 논리를 처리해야 합니다.전통적으로 이것은 Azure storage나 Amazon S3와 같은 일부 저장 공급자와 관련될 것이다.Azure 기능 등 서버 없는 기술이 등장함에 따라 우리는 더 많은 생각을 해야 한다.
이제 Azure 정적 웹 응용 프로그램이 있으면 우리는 두 가지 장점을 모두 누릴 수 있다. 예쁜 패키지에 가벼운 전단과 서버 없는 API가 있다.(알고 싶은 경우 API는 선택 사항입니다.)최근에 발표한 Blazor 지원이 있어서 나는 어쩔 수 없이 해 보았다.

선결 조건

이 게시물을 사용하려면 다음이 필요합니다.

Azure 계정

Anon-preview .NET Core SDK(3.1.403)

비록NET 5는 본문을 발표할 때 몇 주 남았기 때문에 배포할 수 없습니다.NET 5 코드는 Azure 정적 웹 응용 프로그램에 적용됩니다.

Dell 어플리케이션

Azure 정적 웹 앱 인스턴스를 만들기 전에 GitHub에서 응용 프로그램을 호스팅해야 합니다. Azure에서 인스턴스를 만들 때 리셋 프로토콜과 자세한 정보를 요구합니다.
나는 Blazor Blast Off라는 빠른 응용 프로그램을 썼다.현재 이것은 공인된 간단한 응용 프로그램입니다. 앞으로 몇 개월 동안 저는 Blazor의 개념과 최선의 실천을 깊이 연구하고 이를 위해 새로운 응용 프로그램을 추가할 것입니다.전화blastoffwithblazor.com에 오신 것을 환영합니다(그리고 clone the GitHub repo의 설명을 읽고 로컬에서 실행하는 방법에 대한 상세한 정보를 확인하십시오).
이 응용 프로그램은 Blazor Web Assembly를 통해 서비스를 제공합니다.프로그램이 불러올 때 Azure 함수를 호출합니다.이 함수는 이 세계에서 온 사진을 얻기 위해 미국 우주국의 매일 천문 사진 (APOD) API를 거꾸로 호출한다.APOD 사이트README.md file는 1995년 6월 16일 이후 매일 놀라운 사진을 가지고 있다.프로그램을 다시 불러올 때마다 시작 날짜와 오늘 사이의 언제든지 무작위 그림을 가져옵니다.Index.razor 파일에서 나는 @code 함수(has been serving up의 OnInitializedAsync() 블록에서 이렇게 한다.

@code {
    private Data.Image image;

    protected override async Task OnInitializedAsync()
    {
        image = await http.GetFromJsonAsync<Data.Image>("api/image");
    }
}

Azure 함수의 api/image 경로에서 APOD API를 호출합니다(full code.

[FunctionName("ImageGet")]
public static async Task<IActionResult> Run(
      [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "image")] HttpRequest req,
      ILogger log)
{
      var apiKey = Environment.GetEnvironmentVariable("ApiKey");
      var response = await httpClient.GetAsync($"https://api.nasa.gov/planetary/apod?api_key={apiKey}&hd=true&date={GetRandomDate()}");
      var result = await response.Content.ReadAsStringAsync();
      return new OkObjectResult(JsonConvert.DeserializeObject(result));
}

일단 내가 회답을 얻으면, 나는 되돌아오는 대상의 속성에 방문하여 페이지에 이미지, 제목, 날짜와 판권을 표시한다.이것은 로켓 과학이 아니지만, 그래도 된다.
이 글에서 나는 달에 가서 Blazor와 Azure 기능으로 돌아가지 않을 것이다. 왜냐하면 나는 Azure 정적 웹 응용 프로그램에 전념하기 때문이다.앞으로의 댓글에서 나는 하나하나를 더욱 상세하게 토론할 것이다.
다음은 실행 중인 응용 프로그램입니다.별을 너의 눈 속에 넣어라, 그렇지 않니?
full code
시작하기 전에 응용 프로그램 설정을 살펴보겠습니다.

예비 노선 지원

단일 페이지 응용 프로그램에서 반환 루트는 매우 중요하다.만약 내가 특수한 경로가 있다고 가정한다/nasa.페이지에 액세스하면 브라우저 /nasa 를 포함한 경로가 표시되지만 페이지를 수동으로 새로 고치면 기본적으로 응용 프로그램이 다시 로드되지 않습니다 /nasa.반대로, "서버"에 /nasa 페이지가 없기 때문에 404 오류를 표시할 수 있습니다. (또는 우리의 예에서 서버가 전혀 없습니다.)
다행히도 Azure 정적 웹 응용 프로그램은 반환 루트를 지원합니다.다음과 같이 정적 자산 폴더의 루트 디렉토리에 파일routes.json을 넣습니다.

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

wwwroot키는 모든 노선이 일치하는지 확인합니다.

CORS 지원

Azure 정적 웹 응용 프로그램은 Azure 기능을 구성하기 때문에 소스 간 공유(CORS) 문제를 처리할 필요가 없습니다. 간단히 말하면 API 서버가 허용하지 않는 한 브라우저가 요청을 막는 것입니다.
하지만 로컬 환경에서 이 작업을 수행해야 합니다.Azure Functions 프로젝트의 route 폴더에 다음과 같은 내용을 포함하는 Properties 파일을 만듭니다.

{
     "profiles": {
         "Api": {
             "commandName": "Project",
             "commandLineArgs": "start --cors *"
         }
     }
 }

Visual Studio 도구를 사용하고 있습니다.명령줄에서 Azure 함수를 사용하려면 에서 이 작업을 수행해야 합니다.
응용 프로그램이 준비되면 Azure 포털local.settings.json file으로 가서 Azure 정적 웹 응용 프로그램을 만듭니다.

문호새파랗다일반 도메인 이름 형식 Azure 정적 웹 응용 프로그램 만들기

Azure 포털에 들어가면 정적 웹 응용 프로그램 (미리보기) 이 나타날 때까지 정적 응용 프로그램을 검색합니다. 그것을 클릭하고 새 실례를 만듭니다.
이를 바탕으로 다음을 수행합니다.

기존 구독과 자원 그룹을 선택하거나 새 구독을 만듭니다.

응용 프로그램에 적합한 이름과 지역을 입력하십시오.현재 유일한 SKU는 무료입니다.

"GitHub 로그인 사용"을 누르면 GitHub 자격 증명으로 로그인할 수 있으며, Azure 정적 웹 응용 프로그램이 사용자의 행동을 대표할 수 있는 권한을 부여합니다.

계정, 코드가 있는 저장소 및 지점을 선택합니다.

이 옵션을 선택하면 세부내용 생성 섹션이 표시됩니다.응용 프로그램 유형(예: Blazor)을 선택합니다.워크플로우가 트리거될 때, 그들은 응용 프로그램 형식을 기반으로 하는 모든 기존 절차를 실행할 수 있는 사전 설정을 사용할 수 있다.

중요 팁: GitHub에서 구입한 것보다 응용 프로그램 위치, Api 위치 및 응용 프로그램 부품 위치를 선택합니다.

응용 프로그램 위치 - 내 예에서 Blazor 프로젝트 파일이 포함된 폴더입니다.기본 위치는 클라이언트입니다.

Api 위치 - Azure 기능 항목이 있는 위치를 선택합니다.기본 위치는 Api입니다.

응용 프로그램 작업 위치 - 배치된 정적 파일의 위치.기본값은 wwwroot입니다.

마지막으로 Review + Create 를 클릭한 다음 Create 를 클릭합니다.실례를 배치하는 데는 몇 초밖에 걸리지 않는다.

작성한 양식은 다음과 유사해야 합니다.

배치가 완료되면 자원으로 이동 을 누르십시오.새 URL, 배포 내역 및 워크플로우 파일에 대한 링크가 표시됩니다.사이트가 준비되기 전에 워크플로우 파일이 실행됩니다. (리포의 launchSettings.json 디렉터리에 있습니다.)

워크플로우 파일 확인

워크플로우 파일은 Azure 정적 웹 응용 프로그램이 웹 사이트를 구축하는 방법을 표시하는 YAML 파일입니다.이것은 나의 것이다.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/[email protected]
        with:
          azure_static_web_apps_api_token: $
          repo_token: $ # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "Client" # App source code path
          api_location: "Api" # Api source code path - optional
          app_artifact_location: "wwwroot" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/[email protected]
        with:
          azure_static_web_apps_api_token: $
          action: "close"

이 파일은 보기에는 매우 무섭지만, 네가 그것을 훑어보았을 때, 그것은 실제로는 상당히 간단했다.만약 직접 전송이 있거나 나의 주요 지점에서 드래그 요청을 만들거나 변경했다면, 그들의 Oryx 구축 시스템 은 우리의 응용 프로그램을 검측하고 구축하며, 그 내용 (Azure 기능 포함) 을 Azure에 업로드할 것이다.
물론, 당신은 자신의 취향에 따라 이 파일을 수정할 수 있습니다.
GitHub 저장소의 Actions 섹션으로 이동하여 워크플로우의 상태를 모니터링하고 로그를 볼 수 있습니다.

자동으로 원본 코드를 실행 가능한 부품으로 컴파일합니다 문제가 있는 사람.github/workflows

나는 너에게 첫 번째 시도에서 구축이 성공했다고 말하고 싶지만, 그것은 줄곧 성공하지 못했다.

프로젝트에서 Gulp를 사용하여 Tailwind CSS 스타일을 구축하고 배치합니다.무의식중에, 나는 package.json 서류를 나의 환매에 배치했다.따라서 Oryx에서 노드가 감지됩니다.js 설치, 그래서 package.json 중의 build 절차를 찾고 있습니다.결과적으로 나의 구축은 실패했다.
이것은 나에게 어리석은 잘못이지만, 나는 이것이 문제의 다른 장면일 수도 있다는 것을 분명히 볼 수 있다.Azure 정적 웹 응용 프로그램이 미리 보기 중이기 때문에 몇 가지 문제를 해결하고 있기 때문에 해결될 수 있지만, 지금은 알고 있습니다.푸시package.json를 수행하려면 워크플로우 파일을 편집하여 생성 순서나 새 매개변수package.json를 변경해야 합니다.

감사합니다, 크리스 생티. 요청 사이트 가져오기

이것은 제가 가장 좋아하는 Azure 정적 웹 응용 프로그램입니다. 주 지점에 대한 pull 요청을 만들 때 GitHub 작업은 변경 사항을 볼 수 있는 임시 URL을 만듭니다.PR을 병합하고 닫으면 워크플로우가 실행되고 임시 환경이 제거됩니다.
예를 들어, 나는 작은 오류를 복구하기 위해 PR을 만들었다.GitHub에서 Create pull request 를 클릭하면 워크플로가 실행되고 PR은 임시 환경에 대한 링크를 사용하여 업데이트됩니다.

또한 Azure 포털의 환경 링크를 클릭하면 모든 내용이 잘 표시됩니다.

사용자 정의 도메인에 대한 설명

Azure 정적 웹 응용 프로그램은 사용자 정의 도메인을 지원합니다.어느 정도나는 있을 수 있지만 있을 수 없다app_build_command.맞아: 루트 지원은 포함되지 않습니다.
다행히도, .나는 이 변화의 영향이 Azure 정적 웹 응용 프로그램보다 더 크다는 것을 이해하기 때문에 약간의 시간이 필요할 수 있다.

버크 홀랜드는 당신의 보험이 있습니까? 총결산

이.. 폭발이야.나는 그것이 너의 기대를 초월하길 바란다.이 문서에서는 Azure 정적 웹 응용 프로그램의 가치에 대해 설명합니다.우리는 out of the 세계 예시 응용 프로그램을 훑어보고 Azure 정적 웹 응용 프로그램 해결 방안을 만들었으며 작업 흐름 파일을 탐색했고 몇 가지 문제를 설명했으며pull 요청 사이트의 작업 방식을 탐색했다.
만약 당신이 Blazor를 좋아한다면, 계속해서 관심을 가져 주십시오. 우리가 함께 Blazor에 대한 더 많은 정보를 알게 되면, 이 프로그램은 약간 강화될 것입니다!
물론 당신에게 무슨 문제가 있다면.

공구서류

(앨런 바벨)

Azure Static Web Apps with .NET and Blazor(Scott Hanselman)

Blazor WebAssembly on Azure Static Web Apps(케빈 W 그리피안)

I Love Azure Static Web Apps(닐스 스윈버그)

How to deploy Blazor WASM & Azure Functions to Azure Static Web Apps(버크 네덜란드)

How to configure a root domain in an Azure Static Web App(Microsoft 문서)

Azure Static Web Apps docs(Microsoft 문서)

Quickstart: Building your first static web app(Microsoft Learn)