Skip to main content

Windows on ARM

여러분의 앱이 Electron 6.0.8 이상에서 실행된다면, 이제 Windows 10 on ARM용으로 빌드할 수 있다. 이 방식은 성능을 크게 개선하지만, 앱에서 사용하는 모든 네이티브 모듈을 다시 컴파일해야 한다. 또한 빌드 및 패키징 스크립트에 약간의 수정이 필요할 수 있다.

기본 앱 실행하기​

앱이 네이티브 모듈을 사용하지 않는다면, Arm 버전의 앱을 쉽게 만들 수 있다.

  1. 앱의 node_modules 디렉토리가 비어 있는지 확인한다.
  2. 커맨드라인에서 npm install 또는 yarn install을 실행하기 전에 set npm_config_arch=arm64를 실행한다.
  3. Electron이 개발 의존성으로 설치되어 있다면, npm이 arm64 버전을 다운로드하고 압축을 해제한다. 이후 일반적인 방법으로 앱을 패키징하고 배포할 수 있다.

일반적인 고려 사항​

아키텍처별 코드​

많은 윈도우 전용 코드는 x64와 x86 아키텍처 중 하나를 선택하는 if... else 로직을 포함한다.

if (process.arch === 'x64') {
  // 64비트 작업 수행...
} else {
  // 32비트 작업 수행...
}

arm64를 대상으로 할 경우, 이런 로직은 일반적으로 잘못된 아키텍처를 선택할 수 있다. 따라서 이런 조건을 애플리케이션과 빌드 스크립트에서 꼼꼼히 확인해야 한다. 커스텀 빌드 및 패키징 스크립트에서는 현재 프로세스 아키텍처에 의존하지 말고, 환경 변수의 npm_config_arch 값을 항상 확인해야 한다.

네이티브 모듈​

네이티브 모듈을 사용한다면, 반드시 MSVC 컴파일러 v142 버전(Visual Studio 2017에서 제공)에 맞게 컴파일해야 한다. 또한 네이티브 모듈에서 제공하거나 참조하는 미리 빌드된 .dll 또는 .lib 파일이 Windows on Arm에서 사용 가능한지 확인해야 한다.

앱 테스트하기​

앱을 테스트하려면 Windows 10(버전 1903 이상)이 설치된 Arm 기반 윈도우 장치를 사용한다. 앱을 테스트 장치로 복사해야 한다. 네트워크 위치에서 앱 리소스를 로드할 경우 Chromium의 샌드박스가 제대로 동작하지 않을 수 있다.

개발 환경 준비사항​

Node.js와 node-gyp​

Node.js v12.9.0 이상 버전을 사용할 것을 권장한다. Node.js를 새 버전으로 업데이트하기 어려운 경우, npm에 포함된 node-gyp를 수동으로 업데이트할 수 있다. node-gyp 버전 5.0.2 이상은 Arm 프로세서용 네이티브 모듈을 컴파일하기 위한 필수 변경 사항을 포함하고 있다.

Visual Studio 2017​

네이티브 모듈을 크로스 컴파일하려면 Visual Studio 2017(모든 에디션)이 필요하다. Microsoft의 Visual Studio Dev Essentials 프로그램을 통해 Visual Studio Community 2017을 다운로드할 수 있다. 설치가 완료되면, 커맨드라인에서 다음 명령을 실행해 Arm 관련 컴포넌트를 추가할 수 있다:

vs_installer.exe ^
--add Microsoft.VisualStudio.Workload.NativeDesktop ^
--add Microsoft.VisualStudio.Component.VC.ATLMFC ^
--add Microsoft.VisualStudio.Component.VC.Tools.ARM64 ^
--add Microsoft.VisualStudio.Component.VC.MFC.ARM64 ^
--includeRecommended

크로스 컴파일 명령 프롬프트 설정하기​

환경 변수에 npm_config_arch=arm64를 설정하면 올바른 arm64 .obj 파일이 생성되지만, 기본적인 _Developer Command Prompt for VS 2017_은 x64 링커를 사용한다. 이 문제를 해결하려면 다음 단계를 따르면 된다.

  1. x64_x86 Cross Tools Command Prompt for VS 2017 바로가기를 복제한다. (예: 시작 메뉴에서 찾아 마우스 오른쪽 버튼을 클릭한 후 _파일 위치 열기_를 선택하고, 복사하여 붙여넣기)
  2. 새로 만든 바로가기를 마우스 오른쪽 버튼으로 클릭하고 _속성_을 선택한다.
  3. 대상 필드를 vcvarsamd64_x86.bat 대신 vcvarsamd64_arm64.bat로 변경한다.

성공적으로 설정했다면, 명령 프롬프트가 시작될 때 다음과 비슷한 메시지를 출력할 것이다.

**********************************************************************
** Visual Studio 2017 Developer Command Prompt v15.9.15
** Copyright (c) 2017 Microsoft Corporation
**********************************************************************
[vcvarsall.bat] Environment initialized for: 'x64_arm64'

Windows on Arm 장치에서 직접 애플리케이션을 개발하려면, 대상 필드에 vcvarsx86_arm64.bat를 사용하여 장치의 x86 에뮬레이션을 통해 크로스 컴파일이 가능하도록 설정한다.

올바른 node.lib 연결하기​

기본적으로 node-gyp는 Electron의 Node 헤더를 풀고 x86 및 x64 버전의 node.lib를 %APPDATA%\..\Local\node-gyp\Cache에 다운로드한다. 하지만 arm64 버전은 다운로드하지 않는다. (이 문제를 해결하기 위한 수정 사항이 개발 중이다.) 이 문제를 해결하려면 다음 단계를 따르면 된다.

  1. https://electronjs.org/headers/v6.0.9/win-arm64/node.lib에서 arm64 node.lib를 다운로드한다.
  2. 다운로드한 파일을 %APPDATA%\..\Local\node-gyp\Cache\6.0.9\arm64\node.lib로 이동한다.

여기서 6.0.9는 사용 중인 버전에 맞게 변경하면 된다.

네이티브 모듈 크로스 컴파일​

위의 모든 단계를 완료한 후, 크로스 컴파일용 커맨드라인 프롬프트를 열고 set npm_config_arch=arm64를 실행한다. 그런 다음 평소처럼 npm install을 사용해 프로젝트를 빌드한다. x86 모듈을 크로스 컴파일할 때와 마찬가지로, 이전에 다른 아키텍처용으로 컴파일된 네이티브 모듈이 있다면 재컴파일을 강제로 수행하기 위해 node_modules를 삭제해야 할 수도 있다.

네이티브 모듈 디버깅​

네이티브 모듈을 디버깅하려면 개발 머신에서 실행 중인 Visual Studio 2017과 대상 디바이스에서 실행 중인 Visual Studio Remote Debugger를 사용할 수 있다. 디버깅을 진행하려면 다음 단계를 따르면 된다:

  1. 대상 디바이스에서 _Command Prompt_를 통해 앱 .exe를 실행한다. 이때 --inspect-brk를 전달해 네이티브 모듈이 로드되기 전에 실행을 일시 중지한다.
  2. 개발 머신에서 Visual Studio 2017을 실행한다.
  3. _Debug > Attach to Process..._를 선택해 대상 디바이스에 연결한다. Visual Studio Remote Debugger 도구에 표시된 디바이스의 IP 주소와 포트 번호를 입력한다.
  4. _Refresh_를 클릭하고 연결할 적절한 Electron 프로세스를 선택한다.
  5. 앱 내 네이티브 모듈에 대한 심볼이 올바르게 로드되었는지 확인해야 할 수도 있다. 이를 설정하려면 Visual Studio 2017에서 _Debug > Options..._로 이동한 후 _Debugging > Symbols_에서 .pdb 심볼이 포함된 폴더를 추가한다.
  6. 연결이 완료되면 적절한 중단점을 설정하고 Chrome의 Node용 원격 도구를 사용해 JavaScript 실행을 재개한다.

추가 도움 받기​

이 문서와 관련해 문제가 발생하거나, x86으로 컴파일할 때는 앱이 정상 작동하지만 arm64에서는 작동하지 않는 경우, 이슈를 작성해 주세요. 이때 제목에 "Windows on Arm"을 포함시켜 주세요.