webview 기반에 dotnet winforms 개발(React)

dotnet 6.0 winforms + nginx + webview2 로 구성해서 웹뷰 기반에 윈도우 앱을 회사에서 개발 하고 있었습니다. 그런데 문제가 있어서 결국 포기하고, dotnet 5.0 winforms +  ASP.NET + React + webview2 프로젝트를 구성하는식으로 변경하였다. 어떤 문제가 있었냐면..

1. nginx.exe 위치에 한글이 포함되어 있으면 nginx는 에러를 출력되며, 실행되지 않는다.
2. 위 문제를 해결할 방법을 찾지 못해서, 결국 nginx를 c드라이브 밑으로 심볼릭 링크를 만들었다.
3. 심볼릭 링크를 만드는 권한은 윈도우OS에 개발자 모드에서만 사용 가능한 API 였다.

위 문제에서 1번 문제에 해당하는 내용은 여기 작성해 놓았다. 위와 같은 문제를 겪고,  dotnet 5.0 winforms +  ASP.NET + React + webview2 프로젝트 형태로 구성을 변경하였다. ASP.NET 은 정확한 원리는 모르지만, 내부에서 nginx를 빌드하여 구성하는 형태인거 같다. 아래 블로그를 참고하여 만들었다.

• https://www.codementor.io/@gabrieleferreri/write-a-desktop-app-with-react-typescript-asp-net-core-and-webview2-1irclqmu8f

Write a Desktop app with React, Typescript, ASP.NET Core and WebView2 | Codementor

위 블로그를 참고할 때 주의할 점은 dot net 6.0 -> dot net 5.0으로 구성해야 한다. 6.0으로 처음에 시도했다가, react를 모르는 나에게는 블로그 내용과 달라서 헤매었다.

 

그리고 위 블로그 내용대로 할 경우, React를 모르시는 분들은 헤맬수 있는 부분이 위 프로젝트는 개발환경에서 react를 빌드하여 로드하는 방법 이기 때문에, ClientApp 폴더에서 npm 관련 빌드가 잘안되면, ClientApp 폴더에서 수동으로 npm 빌드를 해보면서 윈도우 앱을 테스트하길 권한다. 아래와 같은 에러 내용이 나오면, ClientApp 폴더 : ‘npm install’ 명령어 입력 후, 재실행시켜주면 된다.

 

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The npm script 'start' exited without indicating that the create-react-app server was listening for requests. The error output was: C:\Users\Pointmobile\AppData\Roaming\npm\node_modules\react-scripts\node_modules\resolve\lib\sync.js:113

 

그리고 위 블로그 내용을 참고할때, 주의할 부분이 https 관련 부분이다. 위 프로젝트는 https로 로드 하도록 소스코드 구현되어 있는데, npm 설정이 잘 안되어있으면 https로 로드가 잘 안될수 있다. 그럴때는 ClientApp 폴더에 npm 빌드를 다시 한번 차근차근 설정해보길 권한다.