배포NET Core Blazor 응용 프로그램과 Azure 정적 웹 응용 프로그램은 단 몇 분
TLDR; Azure Static Web Apps is a service that allows you to deploy both JavaScript apps but now also Blazor apps. The service is simple to use as it only requires an Azure subscription and a GitHub repo. That's all the set up you need.
리소스
브라조
Blazor는 C#fullstack을 작성할 수 있는 프레임워크입니다.fullstack 웹 응용 프로그램을 개발하고 있다면, 자바스크립트를 사용해야 합니다.페이지의 상호작용을 개선하기 위해 추가하거나 에서 백엔드를 사용합니다.React, Angular 또는 Vue와 같은 SPA 프레임워크를 사용하는 것과 같은 NET 및 JavaScript의 프런트엔드Blazor 응용 프로그램은 WebAssembly로 컴파일할 수 있기 때문에 일류 인터넷 시민이 될 수 있고 속도도 매우 빠르다.
만약 당신이 Blazor에 대해 완전히 낯설다면, 나는 당신이 이 글을 읽는 것을 건의합니다.
Azure 정적 웹 애플리케이션 서비스
정적 웹 응용 프로그램은 Azure 서비스로 몇 분 안에 fullstack 응용 프로그램을 배치할 수 있습니다.JavaScript 프로젝트와 Blazor를 배포할 수 있습니다.
NET developer here, you have my attention. So, it can deploy a Blazor project, what else can it do?
웹 호스팅, 응용 프로그램이 Azure에 호스팅됩니다. 호스팅된 최종 제품은 HTML, CSS, JavaScript 또는 웹 조립일 뿐입니다.
통합 API를 사용하면 서버 없는 API를 언제든지 애플리케이션에 추가할 수 있습니다.
리버스 프록시.API를 호출할 때 CORS를 구성할 필요가 없으며 작동합니다.
Social auth+AAD를 지원합니다.간단한 설정을 통해 GitHub와 같은 인증 제공 프로그램을 얻어 Azure Active Directory에 연결하고 심지어 Azure Active Directory 인증/인증을 받으면 정상적으로 작동할 수 있다.이것은 특정한 자원에 접근하기 위해 단독 역할을 설정할 수 있는 것을 포함한다.
That's a nice featurelist. I care about ease of use, what can you tell me about that?
기입할 것이 없습니다. 모든 것이 GitHub 환매 협의를 둘러싸고 있습니다. 환매 협의와 다른 것을 선택하면 그것을 배치하기 시작합니다.
Ok, but how does it work under the hood?
GitHub 작업을 생성하고 실행함으로써 의존 라이브러리 가져오기, 코드 구축, 최종 배치 등의 작업을 수행합니다.이른바 작업 흐름 파일이 환매 프로토콜에 전달될 것이다. (그것은 YAML 파일이다.)
Alright, but I'm likely to update my code quite a lot, does it help me with redeploy?
그렇습니다. 워크플로우 파일에서 PR을 통합하거나 주/주 지점에 제출하는 등 재배치를 트리거할 시기를 정의할 수 있습니다.
This all sounds very promising; can you take me through a deploy?
물론 내 명단의 다음 일은:)
첫 번째 Blazor 애플리케이션 배포
복제 응용 프로그램.가장 간단한 시작 방법은 이 GitHub 템플릿
Generate app
from GH template. Ensure you are logged into GitHub before clicking this link or you will get a 404
생성이 완료되면 GH 사용자를 다시 구매할 수 있습니다.다음 명령을 입력합니다.
git clone <name of repo URL>
응용 프로그램을 검사합니다.프로그램을 확인하려면 최신 버전의dotnet 코어install를 설치했는지 확인하십시오.디렉터리를 클론 리셋 디렉터리로 변경합니다.
dotnet build
클라이언트 응용 프로그램을 실행합니다.다음 명령을 입력하여 클라이언트를 실행합니다.
cd Client
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:
/path/to/project/blazor-sample/Client
응용 프로그램으로 이동합니다.브라우저 localhost에 다음 URL:5000을 입력합니다.브라우저에서 다음을 표시해야 합니다.
애플리케이션 배포
이제 Azure 정적 기능을 사용하여 배치할 수 있는 Blazor 응용 프로그램이 생겼습니다.어떻게 했어요?
구독, 필요한 구독 선택
자원 그룹, 필요한 자원 그룹을 선택하거나 새로운 자원 그룹을 만듭니다.
이름응용 프로그램 이름을 지정합니다.
지역영역을 선택합니다.
SKU.여기에서 선택할 필요가 없습니다. 이 서비스는 현재 무료입니다.
조직하다조직을 선택합니다.
저장소템플릿에서 재구매를 생성할 때 생성된 재구매를 선택합니다.
나뭇가지지점을 선택하십시오. 이런 상황에서 우리는 주 지점만 있습니다.
사전 설정을 생성합니다.사용자 지정 을 선택하면 다음과 같은 옵션이 표시됩니다.
응용 프로그램 위치.클라이언트 프로그램이 있는 곳입니다./client를 입력하십시오.
Api 위치, 기본값으로 유지
응용 프로그램 작업 위치이것은 클라이언트 응용 프로그램이 생성한 폴더입니다.wwwroot
위에 너는 자원이 있다.지정된 필드에서 URL을 클릭하면 기본 페이지로 이동합니다.왜?응용 프로그램이 아직 구축되지 않았습니다.GitHub 링크를 클릭하여 실행합니다.그러면 GitHub 재구매가 시작됩니다.모든 작업이 완료되면 다음과 같이 해야 합니다.
자, 배포한 어플리케이션:)
API 추가
현재 Blazor 응용 프로그램은 자신의 백엔드를 포함할 수 있습니다.Azure 정적 웹 응용 서비스의 구축 방식은 백엔드가 Api 디렉터리에 있을 것이라고 가정하지만.그럼 목록에 뭐가 있을까요?이것은 기능형 응용 프로그램이다.다행히도, 당신의 환매는 이미 기능이 정상적인 응용 프로그램을 가지고 있습니다.
우리의 환매 협의를 신속하게 되돌아봅시다.너의 해결 방안은 마땅히 이렇게 해야 한다.
-| Api
-| Data
-| Client
Client/
Api/
ProductData.cs
ProductsDelete.cs
ProductsPost.cs
ProductsPut.cs
ProductData.cs에는 메모리의 데이터 저장소가 포함되어 있습니다.나머지 세 파일은 API 라우팅일 뿐입니다.*** 잃어버린 GET 라우팅 추가
이 API를 완전한 생성-읽기-업데이트-삭제로 만들기 위해서는 다른 파일
ProductsGet.cs이 필요합니다. 이 파일을 만들고 다음 내용을 제공해야 합니다.using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
namespace Api
{
public class ProductsGet
{
private readonly IProductData productData;
public ProductsGet(IProductData productData)
{
this.productData = productData;
}
[FunctionName("ProductsGet")]
public async Task<IActionResult> Run(
[HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
{
var products = await productData.GetProducts();
return new OkObjectResult(products);
}
}
}
ProductsPut: [PUT] http://localhost:7071/api/products
ProductsGet: [GET] http://localhost:7071/api/products
ProductsPost: [POST] http://localhost:7071/api/products
ProductsDelete: [DELETE] http://localhost:7071/api/products/{productId:int}
로컬 테스트, CORS 설정
로컬 테스트를 할 때, 전역의 요청, 즉 우리의 Blazor 응용 프로그램을 허용하는 함수를 표시해야 합니다.우리 어떻게 해야 돼요?로컬을 찾습니다.설치.json 파일은 다음을 포함하고 있는지 확인합니다.
{
"IsEncrypted": false,
"Values": {
"AzureWebJobsStorage": "",
"FUNCTIONS_WORKER_RUNTIME": "dotnet"
},
"Host": {
"CORS": "*"
}
}
클라이언트 Blazor 응용 프로그램을 실행할 수 있습니다.
Blazor 응용 프로그램은 이제 기능 응용 프로그램 백엔드와 대화할 수 있습니다.
API를 사용하여 애플리케이션 배포
그렇다면 API 섹션을 어디에 배치하는 방법은 무엇입니까?다음 작업을 수행해야 합니다.
워크플로우 YML 파일 조정 및 Api 디렉토리 지정
변경 사항을 워크플로우 파일 및 Api 디렉토리로 밀어넣기
워크플로우 파일 조정
변혁을 추진하다
다음 명령을 입력합니다.
git add .
git commit -m "adding API"
git push
자, 당신의 Blazor 클라이언트와 API가 모두 일하고 있습니다!
총결산
너 속았어.
다음은 무엇입니까
퇴선 노선과 응용 프로그램을 어떻게 보호하는지 배워야 할 것도 많다.참고 자료 부분의 링크를 찾아보시면 Blazor에 대한 정보를 더 많이 알 수 있을 뿐만 아니라 저희가 방금 조금 느리게 만든 학습 모듈도 배울 수 있습니다.인증 링크를 추가하는 방법도 있습니다. AAD에 대한 지원은 내장되어 있으며 설정만 하면 작동합니다.
Blazor 어플리케이션을 많이 개발할 수 있도록 도와주시기 바랍니다.:)
Reference
이 문제에 관하여(배포NET Core Blazor 응용 프로그램과 Azure 정적 웹 응용 프로그램은 단 몇 분), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/azure/deploy-your-blazor-app-in-minutes-with-azure-static-web-apps-40bh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
