요전날 투고한 「 【Electron】HTML+JS+C#=클라이언트 어플리케이션!? Electron.Net을 사용해 본다 」에서,
실제의 개발이나 배포까지의 흐름에 대해서, 정보가 부족한 부분이 있었으므로 엔트리를 추가했습니다.

이번에는 디버깅 방법과 컴파일하여 설치 프로그램을 만들 때까지의 방법을 설명합니다.

1. VisualStudio에서 디버깅 해보세요.

환경의 구축은 할 수 있었지만, 개발시에 스텝 실행하고 싶다··. 하고 싶지 않아?
공식 문서에 따르면 VisualStudio에서 디버깅하는 방법도 안내되었습니다. 유능.

솔루션 파일을 VisualStudio에서 엽니다.
디버그 유형이 'Electron.NET App'로 표시됩니다.


그러나 이대로 디버깅해도 중단점에서 멈추지 않습니다. 슬프다.


디버거를 시작하는 동안 디버그 메뉴에서 프로세스에 연결을 클릭합니다.


'프로세스 필터링' 입력란에 프로젝트 이름을 입력합니다. 이번에는 "electron_test"를 입력.
그러면, 기동중의 디버그 프로세스가 표시되므로, 선택하고 [어태치(_A)]를 클릭.


그러면 중단 점이 활성화되었습니다! 기쁘다!
그 상태에서 메뉴를 클릭하면 정상적으로 스텝 실행을 할 수 있습니다.
Form 어플리케이션이나 WPF의 경험이 있는 분이라면 친숙해지네요.


워치식의 정보도 이대로 취급할 수 있습니다.

2. 컴파일 해 본다

그럼, 이대로 구축을 한다고 해서, 배포는 어떻게 하는 거야?
설치 프로그램을 만드는 방법을 모르겠습니다 .... 그런 당신에게 좋은 소식입니다.
Electron.NET은 설치 프로그램을 작성할 때까지 지원합니다.

프로젝트 파일의 경로에서 명령 프롬프트를 시작합니다.
이후의 작업을 Gitbash로 실시했을 경우, 왠지 잘 작동하지 않았습니다··. 와이만?


다음 명령을 입력합니다.

cmd.exe

C:\Users\Delight\source\repos\electron_test\electron_test>electronize build /target win
Build Electron Application...
Build ASP.NET Core App for win-x64...
Executing dotnet publish in this directory: C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win
Build ASP.NET Core App for win-x64 under Release-Configuration...
Microsoft Windows [Version 10.0.17134.950]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_test\electron_test>dotnet publish -r win-x64 -c Release --output "C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win\bin"
.NET Core 向け Microsoft (R) Build Engine バージョン 15.9.20+g88f5fadfbe
Copyright (C) Microsoft Corporation.All rights reserved.
  C:\Users\Delight\source\repos\electron_test\electron_test\electron_test.csproj の復元が 55.56 ms で完了しました。
  electron_test -> C:\Users\Delight\source\repos\electron_test\electron_test\bin\Release\netcoreapp2.2\win-x64\electron_test.dll
  electron_test -> C:\Users\Delight\source\repos\electron_test\electron_test\bin\Release\netcoreapp2.2\win-x64\electron_test.Views.dll
  electron_test -> C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win\bin\
C:\Users\Delight\source\repos\electron_test\electron_test>
Start npm install...
Microsoft Windows [Version 10.0.17134.950]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>npm install --production
npm notice created a lockfile as package-lock.json. You should commit this file.
added 67 packages from 64 contributors and audited 359 packages in 4.246s
found 0 vulnerabilities
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>
Start npm install electron-builder...
Microsoft Windows [Version 10.0.17134.950]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>npm install electron-builder --global
C:\Users\Delight\AppData\Roaming\npm\install-app-deps -> C:\Users\Delight\AppData\Roaming\npm\node_modules\electron-builder\out\cli\install-app-deps.js
C:\Users\Delight\AppData\Roaming\npm\electron-builder -> C:\Users\Delight\AppData\Roaming\npm\node_modules\electron-builder\out\cli\cli.js
+ [email protected]
updated 1 package in 4.921s
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>
ElectronHostHook handling started...
Build Electron Desktop Application...
Executing electron magic in this directory: C:\Users\Delight\source\repos\electron_test\electron_test\bin\desktop
Create electron-builder configuration file...
Microsoft Windows [Version 10.0.17134.950]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>node build-helper.js
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>
Package Electron App for Platform win...
Microsoft Windows [Version 10.0.17134.950]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>electron-builder . --config=./bin/electron-builder.json --win --x64 -c.electronVersion=5.0.8
  窶｢ electron-builder  version=21.2.0 os=10.0.17134
  窶｢ loaded configuration  file=C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win\bin\electron-builder.json
  窶｢ packaging       platform=win32 arch=x64 electron=5.0.8 appOutDir=C:\Users\Delight\source\repos\electron_test\electron_test\bin\Desktop\win-unpacked
  窶｢ default Electron icon is used  reason=application icon is not set
  窶｢ building        target=nsis file=C:\Users\Delight\source\repos\electron_test\electron_test\bin\Desktop\electron_test Setup 1.0.0.exe archs=x64 oneClick=true perMachine=false
  窶｢ building block map  blockMapFile=C:\Users\Delight\source\repos\electron_test\electron_test\bin\Desktop\electron_test Setup 1.0.0.exe.blockmap
C:\Users\Delight\source\repos\electron_test\electron_test\obj\desktop\win>
... done

그러면 .\bin\Desktop 에 설치 프로그램이 생성됩니다!

[프로젝트 이름 Setup 1.0.0.exe] ... 설치 프로그램 형식 파일

[win-unpacked] ... 설치 프로그램에 내장 된 실행 파일 등을 저장합니다

즉시 설치 프로그램을 실행해 보면 설치 프로그램이 실행되어 시작 메뉴에 나타납니다! 실행도 문제 없음!
손쉽게 배포까지 연결할 수 있는 것은 기쁜 한군요.




이하의 커멘드로 크로스 플랫폼용의 컴파일도 할 수 있다는 것. 무적?
(osx 형식의 경우 Mac에서 컴파일해야한다는 것입니다.)

electronize build /target win
electronize build /target osx
electronize build /target linux

자세한 내용은 공식 문서를 참조하세요.
htps : // 기주 b. 이 m/에ぇct 론에 T/에에ct 론. 네 T#부이 ld

3. 정리

Electron.NET은 아직 침투하지 않았지만 C#의 프론트로서 채용의 가치는 있다고 생각합니다.
React+Redux등의 JS 프레임워크와 조합해 구축할 수 있을지도 시험해 보고 싶네요.

이번에 사용한 코드는 다음 리포지토리에 올려 놓았으므로,
좋으면 참조하십시오.
htps : // 기주 b. 이 m / n q ぢ 오 r / 에 ct 론 _ st

질문・요망등 있으면 부담없이 코멘트 주세요～.