ASP 구축 방법NET Blazor WebAssembly - Azure 정적 웹 응용 프로그램
업데이트된 강좌를 보려면 https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-azure-static-web-apps 를 방문하십시오.
ASP 사용.NET Blazor WebAssembly(WASM)를 생성할 수 있습니다.NET 웹 응용 프로그램, 이 응용 프로그램들은 완전히 브라우저 샌드박스에서 실행됩니다.Blazor WASM 프로젝트의 게시 출력은 정적 파일입니다.이제 너는 달리기를 할 수 있다.서버 사이드 코드가 필요 없는 NET 웹 응용 프로그램은 Azure 정적 웹 응용 프로그램과 GitHub 페이지 등 정적 사이트 호스트에 배치할 수 있습니다.
이 연습에서는 Blazor WASM을 Azure 정적 웹 응용 프로그램에 배치하는 방법을 보여 줍니다.Azure 정적 웹 응용 프로그램 (미리보기판) 은 GitHub에서 배포한 정적 사이트를 관리할 수 있는 새로운 무료 서비스입니다.이 서비스는 정적 사이트 관리 외에도 다음과 같은 기능을 제공합니다.
ASP를 생성합니다.NET Core Blazor WebAssembly 프로젝트
다음 명령을 실행하여 새 Blazor WASM 프로젝트를 만듭니다.
mkdir AzureSwaBlazorWasmDemo
cd AzureSwaBlazorWasmDemo
dotnet new blazorwasm
dotnet run을 실행하고 출력의 URL을 찾습니다(예:dotnet run
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: https://localhost:5001
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: http://localhost:5000
# info: Microsoft.Hosting.Lifetime[0]
# Application started. Press Ctrl+C to shut down.
# info: Microsoft.Hosting.Lifetime[0]
# Hosting environment: Development
# info: Microsoft.Hosting.Lifetime[0]
# Content root path: C:\Users\niels\source\repos\AzureSwaBlazorWasmDemo
dotnet publish 명령을 사용하여 프로젝트를 게시하고 출력을 검증할 수 있습니다.dotnet publish -c Release
# Microsoft (R) Build Engine version 16.7.0+b89cb5fde for .NET
# Copyright (C) Microsoft Corporation. All rights reserved.
#
# Determining projects to restore...
# All projects are up-to-date for restore.
# AzureSwaBlazorWasmDemo -> C:\Users\niels\source\repos\AzureSwaBlazorWasmDemo\bin\Release\netstandard2.1\AzureSwaBlazorWasmDemo.dll
# AzureSwaBlazorWasmDemo (Blazor output) -> C:\Users\niels\source\repos\AzureSwaBlazorWasmDemo\bin\Release\netstandard2.1\wwwroot
# AzureSwaBlazorWasmDemo -> C:\Users\niels\source\repos\AzureSwaBlazorWasmDemo\bin\Release\netstandard2.1\publish\
https://localhost:5001 Blazor 프로젝트를 GitHub로 밀어넣기
Azure 정적 웹 응용 프로그램은 GitHub 저장소에 애플리케이션 소스 코드가 있어야 합니다.
먼저 로컬 Git 저장소를 만들고 다음 명령을 사용하여 소스 코드를 저장소에 커밋해야 합니다.
# add the gitignore file tailored for dotnet applications, this will ignore bin/obj and many other non-source code files
dotnet new gitignore
# create the git repository
git init
# track all files that are not ignore by .gitignore
git add --all
# commit all changes to the repostiroy
git commit -m "Initial commit"
git remote add origin https://github.com/Swimburger/AzureSwaBlazorWasmDemo.git
git push -u origin master
Azure 정적 웹 응용 프로그램 만들기
Azure 포털 으로 이동하여 왼쪽 탐색 메뉴에서 리소스 만들기 를 클릭합니다.
portal.azure.com
정적 웹 응용 프로그램을 검색하고 정적 웹 응용 프로그램(미리보기) 카드를 클릭합니다.
정적 웹 응용 프로그램 세부 정보 페이지에서 만들기 버튼을 클릭합니다.
정적 웹 앱 블레이드를 만드는 필드를 입력하십시오.
GitHub 로그인 사용 버튼을 클릭합니다.그러면 Azure 권한을 부여하라는 GitHub 대화 상자가 표시됩니다.이러한 권한은 Azure가 CI/CD의 GitHub 작업 YAML 파일을 제출하고 GitHub를 Azure에 배치할 수 있도록 하는 데 필수적입니다.
이제 Azure 정적 웹 응용 프로그램에 GitHub를 연결했습니다. 조직, 저장소 및 분기 필드를 입력하여 GitHub 저장소를 선택하십시오.
[다음] 버튼을 클릭합니다.Build 탭에서는 GitHub Actions YAML 파일에 소스 코드에 대한 정보를 묻습니다.다음과 같이 입력합니다.
어플리케이션 위치:/
이것은 응용 프로그램 소스 코드의 폴더입니다.하위 폴더에 항목을 넣으면 하위 폴더 이름이 여기에 표시됩니다.이 연습에서 항목이 하위 폴더에 없으면 "/"를 사용해야 합니다.
Api 위치: [비어 있음]
이것은 Azure 기능의 폴더입니다.이 연습에서는 JavaScript/TypeScript Azure 함수만 지원하므로 이 필드를 비워야 합니다.
응용 프로그램 작업 위치: wwwroot
wwwroot 하위 폴더를 지정합니다.
그런 다음 보기 + 만들기 버튼을 클릭한 다음 만들기 버튼을 클릭합니다.
배포가 완료될 때까지 기다린 다음 "자원으로 이동"단추를 누르십시오.
Azure 정적 웹 응용 프로그램 개요 페이지에는 다음과 같은 링크가 많이 있습니다.
URL: 웹 응용 프로그램의 호스팅 위치입니다
출처: GitHub 저장소에서 선택한 브랜치에 대한 링크입니다
배포 내역: GitHub 저장소
워크플로우 파일: GitHub 저장소의 GitHub 작업 YAML 파일에 대한 링크입니다.
새 정적 웹 응용 프로그램을 보려면 URL을 누르십시오.Blazor 응용 프로그램이 이미 설치되어 있을 것입니다.조금만 기다리지 않으면 페이지를 새로 고칩니다.
GitHub 작업 YAML 파일 설명
Azure/GitHub가 내 응용 프로그램을 어떻게 구축하고 배치하는지 알고 싶을 수도 있습니다.Azure가 GitHub 저장소에 생성하여 제출한 GitHub 작업 YAML 파일을 살펴보겠습니다.
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
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: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_MUSHROOM_03650520F }}
repo_token: ${{ secrets.GITHUB_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: "/" # App source code path
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: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_MUSHROOM_03650520F }}
action: "close"
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
if문은 닫기를 요청하지 않는 한 항상 실행됩니다 build_and_deploy_job.runs-on Ubuntu VM에서 실행할 작업을 지정합니다.작업steps의 첫 번째 단계는 자주 지점의 최신 코드를 서명합니다.다음 단계에서는 Azure의'정적 웹 응용 프로그램 배치'작업을 사용할 것입니다.이 동작은 코드를 구축하고 배치하며 요청을 위한 환경을 만들 것입니다.이 GitHub 작업은 모든'마력'을 숨기지만, 잠시 후 더 많은 설명이 있을 것입니다.
이 작업과 구성 방법에 대한 자세한 내용은 Microsoft 설명서 를 참조하십시오.
with 섹션에서 Azure 리소스를 생성할 때 구성된 매개변수를 찾습니다.다른 매개 변수는 Azure가 Azure 정적 웹 응용 프로그램을 만들 때 만든 비밀입니다.이러한 비밀은 Azure와 GitHub에서 인증 및 보안 작업을 수행하는 데 사용됩니다.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: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_MUSHROOM_03650520F }}
repo_token: ${{ secrets.GITHUB_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: "/" # App source code path
app_artifact_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
if 속성의 지정에 따라 닫힐 때만 실행됩니다.이것은 같은 Azure GitHub 작업을 사용하지만 action 섹션의 with 매개 변수는 "close"로 설정됩니다.이 단계는 Azure의 환경을 삭제합니다. 이 환경은 주 지점에 대한 드래그 요청을 열 때 자동으로 생성됩니다.
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: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_DELIGHTFUL_MUSHROOM_03650520F }}
action: "close"
GitHub Actions workflows for Azure Static Web Apps Preview 자술 파일은 마이크로소프트의 또 다른'Oryx'라는 소스 프로젝트를 사용했다고 지적했다.
"Oryx is a build system which automatically compiles source code repos into runnable artifacts. It is used to build web apps for Azure App Service and other platforms."
Oryx GitHub readme.md
프로젝트와 원본 코드를 탐색할 때, 이 프로젝트는 명령이나 다른 힌트를 주지 않고 원본 코드를 구축하려고 시도하는 것을 발견할 수 있습니다.Oryx는 원본 코드를 스캔하여 프로젝트 형식을 검사하고 이를 바탕으로build 명령을 실행합니다.
GitHub 작업 흐름에서 실행되는 로그를 볼 수 있습니다.GitHub 작업 흐름에 대한 자세한 내용을 찾아 로그를 확인합니다.
GitHub repository of the action
구축과 배치에서 익숙한 출력을 발견할 수 있습니다.NET Core 게시 명령:
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues
Oryx Version: 0.2.20200719.1, Commit: 80603ef82312ab8b6d950149f332638c5707de74, ReleaseTagName: 20200719.1
Build Operation ID: |heeYKwd2eqw=.6c88ce35_
Repository Commit : 4b9ce0842c5c2a5b4038a4c226e47a4f002f1030
Detecting platforms...
Detected following platforms:
dotnet: 3.1.6
Version '3.1.6' of platform 'dotnet' is not installed. Generating script to install it...
Source directory : /github/workspace
Destination directory: /bin/staticsites/ss-oryx/app
Downloading and extracting dotnet version 3.1.302 to /tmp/oryx/platforms/dotnet/sdks/3.1.302...
Downloaded in 39 sec(s).
Verifying checksum...
Extracting contents...
Done in 43 sec(s).
Using .NET Core SDK Version: 3.1.302
Welcome to .NET Core 3.1!
---------------------
SDK Version: 3.1.302
Telemetry
---------
The .NET Core tools collect usage data in order to help us improve your experience. The data is anonymous. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.
Read more about .NET Core CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry
----------------
Explore documentation: https://aka.ms/dotnet-docs
Report issues and find source on GitHub: https://github.com/dotnet/core
Find out what's new: https://aka.ms/dotnet-whats-new
Learn about the installed HTTPS developer cert: https://aka.ms/aspnet-core-https
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli-docs
Write your first app: https://aka.ms/first-net-core-app
--------------------------------------------------------------------------------------
Determining projects to restore...
Restored /github/workspace/AzureSwaBlazorWasmDemo.csproj (in 2.25 sec).
Publishing to directory /bin/staticsites/ss-oryx/app...
Microsoft (R) Build Engine version 16.6.0+5ff7b0c9e for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.
Determining projects to restore...
All projects are up-to-date for restore.
AzureSwaBlazorWasmDemo -> /github/workspace/bin/Release/netstandard2.1/AzureSwaBlazorWasmDemo.dll
AzureSwaBlazorWasmDemo (Blazor output) -> /github/workspace/bin/Release/netstandard2.1/wwwroot
AzureSwaBlazorWasmDemo -> /bin/staticsites/ss-oryx/app/
Removing existing manifest file
Creating a manifest file...
Manifest file created.
Done in 69 sec(s).
---End of Oryx build logs---
Finished building app with Oryx
dotnet publish.어떤 이유로든 Oryx의 기본 동작을 사용할 수 없습니다. 정적 사이트 작업에 추가 인자
app_build_command 를 추가하여build 명령을 덮어쓰거나 이전 단계에서 프로그램을 구축할 수 있습니다.보상: 끌어당기기 요청 만들기
주 지점에 드래그 요청을 만들면 자동으로 새 환경이 만들어집니다. 이 환경은 드래그 요청의 응용 프로그램 버전을 불러옵니다.
다음 명령을 실행하여 새 브랜치를 생성합니다.
git checkout -b ChangeTitle
다음 스크립트를 실행하여 변경 사항을 커밋하고 GitHub로 분기를 전송합니다.
git add --all
git commit -m "change title"
git push --set-upstream origin ChangeTitle
두 번째 드롭다운 목록으로 ChangeTitle 분기를 선택하고 요청 작성을 클릭한 다음 요청 작성을 다시 클릭합니다.
GitHub 작업 흐름은 자동으로 사용자의 요청에 따라 실행됩니다.완료되면 Azure는 코드 변경을 위탁 관리하는 새로운 환경을 가리키는 URL을 포함하는 추출 요청에 댓글을 남깁니다.
드래그 요청을 닫으면 워크플로가 다시 실행되지만 이 워크플로는 환경을 삭제합니다.
총결산
Azure 정적 웹 응용 프로그램에서는 GitHub 작업을 사용하여 CI/CD 파이핑을 자동으로 생성합니다.Azure 정적 웹 응용 프로그램 작업은 Oryx를 사용하여 자동으로 응용 프로그램을 구축하는 방법을 알고 있습니다.Oryx는 코드를 스캔하여 처리 중인 코드 형식을 검사하고 정확한 구축 명령을 실행합니다.build 명령이나 사용자 정의 GitHub 작업 YAML을 제공하여 프로젝트를 구축한 다음 정적 웹 응용 프로그램에 결과를 전달할 수 있습니다.
Reference
이 문제에 관하여(ASP 구축 방법NET Blazor WebAssembly - Azure 정적 웹 응용 프로그램), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/swimburger/how-to-deploy-asp-net-blazor-webassembly-to-azure-static-web-apps-1k32텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
