개요

Blazor로 만든 웹 사이트를 Firebase에서 정적 사이트로 호스팅할 때까지의 지침 참고.
당초 웹 서버로서 서버 측에 ASP.NET Core 등이 필수라고 생각했지만, 클라이언트 측 버전이면 Firebase 등의 정적 사이트를 호스팅하는 서비스에서도 사용할 수있는 것을 알았기 때문에, 시도해 보았을 때의 기록입니다.

전제

Window10 x64 사용
.NET Core 3.0 Preview SDK 설치
Visual studio 2019 미리보기 설치됨

Firebase 계정이 획득됨
Firebase CLI 설치

절차

Blazor 프로젝트 만들기

Blazor의 공식 문서 절차을 따라 Visaul Studio에서 Blazor 프로젝트를 만듭니다.
만들 때 클라이언트 측 버전 [Blazor (client-side)]을 선택합니다.


만든 후에 빌드할 수 있는지 확인합니다.

발행

작성한 Blazor의 프로젝트를 로컬로 출력합니다.
Visual Studio 솔루션 탐색기에서 마우스 오른쪽 단추로 클릭 → 게시를 선택합니다.



게시 대상 선택에서 폴더를 선택하고 출력 대상을 지정합니다.
게시 버튼을 눌러 파일을 출력합니다.


게시가 끝나면 다음에 호스팅할 Firebase를 설정합니다.

Firebase 프로젝트 생성 및 설정

Firebase에서 새 프로젝트를 만듭니다.


생성이 끝나면 명령 프롬프트를 시작하고 아래 명령으로 firebase 계정에 로그인합니다.
(브라우저가 시작되므로 방금 만든 프로젝트의 계정으로 로그인합니다.)

firebase login

그런 다음 현재 디렉토리를 방금 발행 한 폴더 + VisualStudio 프로젝트 이름으로 설정하여 firebase 초기화 명령을 실행합니다.

cd XXX\bin\Debug\netstandard2.0\publish\BlazorTest1
firebase init

초기 설정에 관해서는 아래와 같이 대답합니다.

? Are you ready to proceed? (Y/n)
→ y

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confi
rm your choices.
→ Hosting

? Select a default Firebase project for this directory: (Use arrow keys)
→先ほど作成したプロジェクトを選択（ここだとblazortest1)

? What do you want to use as your public directory? (public)
→ dist

? Configure as a single-page app (rewrite all urls to /index.html)?
→ y

? File dist/index.html already exists. Overwrite? (y/N)
→ n

이것으로 설정이 종료됩니다.
바로 아래 명령으로 배포해 봅시다.

firebase deploy

=== Deploying to 'blazortest1'...

i  deploying hosting
i  hosting[blazortest1]: beginning deploy...
i  hosting[blazortest1]: found 34 files in dist
+  hosting[blazortest1]: file upload complete
i  hosting[blazortest1]: finalizing version...
+  hosting[blazortest1]: version finalized
i  hosting[blazortest1]: releasing new version...
+  hosting[blazortest1]: release complete

+  Deploy complete!

Hosting URL: https://xxxx.firebaseapp.com

배포가 완료되면 Hosting URL로 이동합니다.
표시되는 것은 성공적인 배포 성공입니다.

마지막으로

C#에서 SPA를 만들 수 있는 Blazor, 이전부터 좋다고 생각하고 있었습니다.
처음에 쓴 것처럼 ASP.NET Core가 설치된 서버 환경이 필수라고 생각했기 때문에 문턱이 높다고 생각했습니다만, 클라이언트 측판이라고 불필요하게 생각했던 것보다 간단하게 공개할 수 있습니다 그래서 놀랐습니다.
우선 템플릿의 프로젝트를 그대로 배포했을 뿐이므로, 앞으로 여러가지 내용을 공부해 나갈까 생각합니다.

참고원