wasm:: blazor wasm을 localhost에서 실행하기

 

 

blazor wasm을 빌드해서 만든 폴더에서는 실행파일이 보이지 않고 release를 통해 wwwroot 폴더에서 index.html파일을 실행하면 아무런 반응이 없다.

그런데 예제들 처럼 dotnet run (or dotnet run watch)로 blazor wasm을 실행해 보면 잘 된다.

 

그럼, 내 PC에서도 web page처럼 실행하려면 어떻게 해야 할까?

 

 

dotnet run 으로 테스트하면 아래처럼 페이지가 잘 보인다

port 5057을 통해 실행하고 있다

 

 

 

 

 

 

blazor wasm을 github page에 deploy 하기

WASM은 static web이라서 github >> github page를 통해서 별도 server 구입없이 실행, hosting 할 수가 있다.

다음 예제들이 찾은 괜찮은 , 그리고 실행가능한 예제들이다.

 

 

https://www.peug.net/en/how-to-deploy-a-blazor-webassembly-app-on-github-pages/

How to deploy a Blazor Webassembly app on Github Pages - Blog of Christophe Peugnet

 

**동영상도 있고 해서 따라하기 좋음

https://swimburger.net/blog/dotnet/how-to-deploy-aspnet-blazor-webassembly-to-github-pages

How to deploy ASP.NET Blazor WebAssembly to GitHub Pages

 

https://dev.to/madhust/how-to-publish-blazor-webassembly-application-to-github-pages-using-github-action-54h4

How to publish Blazor WebAssembly application to GitHub pages using GitHub Action

 

 

** github SAMPLE이 포함됨

Publish blazor wasm .net 7 to github pages with Visual Studio 2022 - Stack Overflow

Publish blazor wasm .net 7 to github pages with Visual Studio 2022

 

 

 

 

https://www.youtube.com/watch?v=C4fVwppE1ZM 

 

 

 

 

https://vip00112.tistory.com/76

C#: Blazor IIS 배포 후 Route 이슈

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

blazor wasm _ local host에서 실행하기 

 

몇 개 샘플을 따라해 보니 충분히 홈페이지 대용으로 사용할 수 있을 듯하다.

간단한 파이썬이나 c# 코드를 짜집기 해서 활용하는 내 수준에서는 javascript를 배워서 뭘 만들기는 어렵고 그나마 익숙한 blazor(c#)를 문법을 활용할 수 있는 것이 큰 장점이다.

 

그런데!!

office add-in과 엮어서 사용하려니 github page에 올린 blazor는 address가 제대로 작동을 하지 않는다.

이것이 github page문제인지 내 publish 의 문제인지 확인을 하고 싶은데 방법이 없어서 찾다보니 다음과 같이 해결하였다.

 

 

 

blazor wasm Sample을 하나 만든다

 

 

 

 

 

"dotnet run"을 하면

실행을 위한 코드가 bin 폴더가 새로 생기면서 그 하부에 wwwroot 폴더에 저장된다.

이 파일을 실행하는 것인데,,,, 실제로 web에서는 파일을 바로 실행시킬 수 없다 

 

 

 

 

 

 

---

그래서 dotnet publish 명령어를 통해 web page용 파일을 생성한다.

찾아보면 (dotnet publish = dotnet build -c Relase) 인 것처럼 표시하니 어떤 명령어를 사용하더라도 무방하나 여기서는 publish로 하겠다.

 

(-configuration) -Release / Debug 중에 용량이 작은, 배포를 위한 -c Release 

(-output folder) folder name >> - o dist

(-framework) dotnet version(net6.0 / net7.0) >> -f net7.0

의  조합으로 아래처럼 publish를 진행하여 파일을 만든다

 

 

 

 

 

 

# wasm build용 (Emscripten)의 blazor(c#)버전인, wasm-tools workload를 설치해 둔다
dotnet workload install wasm-tools


blaozr 파일을 한번이라도 실행했다면 필요없겠지만, 
혹시 publish / build가 정상적으로 진행되지 않으면 wasm를 만들기 위한 
위 workload를 설치해 준다. powershell에서 실행

 

 

 

index.html 파일을 실행하려면 local server를 실행해야 하는데, 인터넷 글에는 dotnet-serve 명령어를 통해서 테스트 해보게 되어 있다. 하지만 최근에 무슨 세팅의 변화인지 정상작동 하지 않는다.
 (작년에 따라했을 때는 잘 작동을 했던 것 같은데...)  >>  dotnet serve 로 대체됨  (add, 2023-04-23)

# dotnet run 대신 dotnet serve를 통한 실행
dotnet serve -d:bin/Debug/net7.0/browser-wasm/AppBundle

 

 

 

 

 

 

그래서 대안으로 

 

원래 있던 폴더에서 실행했기 때문에, 폴더 구조만 보인다. 

wwwroot/index.html 파일이 있기에 클릭해서 들어가면 정상적으로 작동하지 않는다.

 

 

 

 

아래처럼 wwwroot로 들어가서 다시 http.server를 실행하면 정상적으로 테스트 해볼 수 있다.

처음 소개한 예제들은 이러한 과정을 자동으로 github action을 통해 publish하고, 404 error를 위한 copy page를 만들고 github page의 특성인 jeykill파일 세팅을 무시하는 것을 알려준 것이다.

 

>> wwwroot의 static web 실행방법을 알면 다른 serve나  azure에 올릴 때 오류사항을 미리 점검할 수 있다.

cd dist/wwwroot
python -m http.server

 

 

 

 

 

 

_end