nsNiuniuSkin은 출시 이후 단순성, 단순성 및 효율성으로 인해 많은 회사에서 선호했으며 이제 점점 더 많은 회사에서 설치 패키지를 만들기 위해 솔루션을 채택했습니다!

설치 패키지 UI 플러그인에서 아름다움, 보안, 단순성 및 자동화를 통합하는 완전한 솔루션으로 점진적으로 발전하는 것은 쉽지 않습니다.믿어준 모든 친구에게 감사드립니다!

머리말

인터넷에는 Electron 설치 패키지의 미화에 대한 많은 기사가 있으며 일부는 sciter를 사용하고 일부는 QT를 사용하고 일부는 심층적이거나 간단한 통합을 위해 이전 버전을 기반으로 합니다. 전반적으로 이러한 솔루션에는 몇 가지 문제가 있습니다.

sciter와 QT를 사용하여 볼륨을 많이 높였습니다.
Electron 패키지 업그레이드와 완전한 통합이 없습니다.

일렉트론이 널리 쓰이고 있는 지금, 일렉트론 어플리케이션의 설치 패키지 제작은 당연히 우리에게 없어서는 안 될 일입니다. Electron 애플리케이션의 작동을 이해합니다. 이 메커니즘은 Electron 패키징과 완벽하게 통합된 일련의 솔루션을 실현하고 자동화를 완벽하게 지원하며 전자 프로그램 업그레이드와 호환됩니다.

예전에 친구가 Electron 설치 패키지 미화 작업을 하고 있다는 사실을 알게 되었는데 전후로 한 달씩 걸려서 정말 괴로웠어요! 우리는 우리의 솔루션으로 모든 사람이 하루 안에 설치 패키지 생산과 업그레이드 기능의 도킹을 완료할 수 있기를 바랍니다.

원칙

nsNiuniuSkin의 Electron 설치 패키지 제작 체계를 실제로 도입하기 전에 몇 가지 원칙을 명확히 해야 합니다.

electron-builder는 Windows에서 기본적으로 패키징에 NSIS를 사용합니다.

electron-builder에는 많은 내장 템플릿 nsis 스크립트가 있습니다. package.json의 nsis 설정은 매개변수 형식의 템플릿과 결합되어 최종적으로 완전한 패키징 스크립트를 형성한 다음 설치 패키지를 생성합니다. 이해가 되지 않는 패키징 및 업그레이드에 대한 질문이 있는 경우 기본적으로 Electron-Builder의 소스 코드에서 관련 답변이나 정보를 찾을 수 있습니다.

전자 업데이터의 업그레이드 아이디어

여기서는 전체 업데이트에 대해서만 설명합니다. 전자 업데이트 업그레이드 프로세스는 다음과 같습니다.

electron-builder가 패키징되면 구성을 통해 리소스 디렉토리에 app-update.yml 구성 파일이 생성되며 여기에는 현재 버전 번호와 업그레이드 감지를 위한 서버 주소가 포함되며 동시에 elevate가 포함됩니다. exe 프로그램이 생성됩니다(업그레이드 패키지를 실행하려면 관리자 권한이 필요한 경우 권한을 에스컬레이션하는 데 사용됨).
electron-builder가 패키징된 후 파일의 최신 버전 번호, 크기 및 SHA512 해시 값과 같은 정보가 포함된 latest.yml이라는 파일을 동기식으로 생성합니다. 이러한 정보는 클라이언트 업그레이드 확인의 기준으로 사용됩니다. (패키징 후 latest.yml 및 설치 패키지를 지정된 서버에 배치해야 함)
클라이언트가 실행 중일 때 electron-updater는 서버의 latest.yml을 다운로드하고 이를 로컬과 비교하여 새 버전이 있는지 확인합니다.
latest.yml에서 설치 패키지 파일명에 해당하는 파일을 다운로드하고 SHA512 및 크기가 구성 파일의 것과 일치하는지 확인합니다.
현재 메인 프로세스를 종료하고 새 설치 패키지를 호출하고 --updated --force-run /S와 같은 매개변수를 전달합니다(--force-run /S는 업데이터 구성에 따라 항목별로 증가됨).

우리의 구현

Electron 패키징 및 업그레이드의 논리를 알면 당사의 Electron 패키징 솔루션이 더 쉬워지고 많은 처리 세부 사항이 있습니다.여기서는 주로 몇 가지 기술 포인트를 소개합니다.

Electron 디렉토리의 package.json에서 버전 번호와 GUID를 자동으로 읽습니다. 이 두 정보는 패키지 설치에 매우 중요합니다.
설치 패키지 이름, 설치 권한, 현재 사용자 또는 모든 사용자에 대한 설치 등을 외부에서 지정하도록 지원합니다.
Electron 패키징 명령을 호출하여 압축 해제된 파일을 생성하고 패키징 디렉토리에 복사합니다.
설치 패키지가 패키징된 후 자동으로 서명되고 latest.yml 구성 파일이 동시에 생성되어 electron-updater 업그레이드와 완벽하게 호환되는 효과를 얻습니다.
electron-updater가 전달한 명령줄 매개변수를 자동으로 처리하고 원래 electron-packaged 설치 패키지와 일치하도록 업그레이드 동작을 처리합니다.

우리의 이점

어떤 사람들은 Electron의 자체 포장이 이렇다고 말할 것입니다. 당신이 하는 일의 요점은 무엇입니까?

그것은 많은 것을 의미하며 내 말을 들어라:

우리의 설치 패키지 UI는 매우 아름답고 마음대로 확장할 수 있습니다.
당사의 설치 패키지에는 포장 풀림 방지 기능이 포함되어 있어 Electron 자체 유형보다 더 안전합니다.
당사의 설치 패키지 솔루션에서는 클릭 한 번으로 온라인 설치 패키지를 생성할 수 있으며 아주 작은 사전 설치 프로그램만 웹 사이트에 게시할 수 있습니다.
electron-updater와 정확히 일치하는 업그레이드 패키지를 생성하는 것 외에도 보다 유연한 업그레이드 솔루션도 지원합니다.
원 클릭 패키징, 언인스톨러 및 서명 동기 생성, 오탐 방지

패키징 예시 및 효과 표시

너무 많이 말했지만 모두 이론적인 내용이므로 스크립트와 효과만 살펴보겠습니다. 복잡한 구성이 필요하지 않고 패키징 스크립트를 직접 실행하기만 하면 됩니다.

package.json 각본

패키징 스크립트 디렉토리에는 NiuNiuCaptureElectronDemo라는 전자 소스 코드가 제공되며 기본 패키징 스크립트 package.json 및 기본 업그레이드 관련 코드의 구성이 이미 포함되어 있습니다.

package.json 구성의 일부는 다음과 같습니다.

{
  "name": "TestCapture",
  "version": "1.0.0",
  "main": "main.js",
  "description": "",
  "author": "[email protected]",
  "build": {
    "appId": "appid",
    "nsis": {
      "guid": "Test_Capture"  
    },
    "extraFiles": [
      "capture"
    ],
    "win": {
      "target": "dir",
      "icon": "app.ico"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080/upload/"
      }
    ]
  }
}

위의 패키징 스크립트 구성은 일부 핵심 구성이 다음과 같음을 나타냅니다.

버전 번호는 1.0.0입니다.
레지스트리에 있는 설치 패키지의 식별 키는 Test_Capture입니다.
업그레이드 패키지 다운로드 경로 등을 지정합니다.
우리가 의존하는 전자 및 전자 빌더의 버전은 위와 같습니다. 컴퓨터의 버전이 다른 경우 그에 따라 조정하십시오.

build-for-electron.bat 각본

동시에 기본적으로 NiuNiuCaptureElectronDemo에서 애플리케이션을 패키징하도록 구성된 build-for-electron.bat 스크립트를 제공합니다. 스크립트 부분의 코드는 다음과 같습니다(실제 애플리케이션에서는 약 4-5개 필드만 수정해야 함, output_setup_prefix, electron_build_path, shell_all_user_mode, install_execution_level):

@rem 打包脚本项目名称
@set project_name=leeqia_general
@rem 安装包名前缀 
@set output_setup_prefix=LeeqiaCapture_PC_Setup_

@rem 主程序名称 (可根据你的项目自行调整)
@set main_exe_name=TestCapture.exe

@rem electron程序中打包的guid，用于安装在注册表中的key（卸载与软件信息）
@set electron_guid=
@rem 软件版本号
@set electron_app_version=
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=all
@rem 安装包的启动权限，user/admin
@set install_execution_level=admin
@rem electron项目所在目录
@set electron_build_path=.\NiuNiuCaptureElectronDemo
@set electron_unpacked_dir=%electron_build_path%\dist\win-unpacked
@rem 读取yml文件，提取版本号和guid信息
.\Helper\NSISHelper.exe --mode="get_electron_app_info" --src="%electron_build_path%\package.json" --dst=".\get_electron_app_version.bat"
Call get_electron_app_version.bat
@echo %electron_app_version%
@echo %electron_guid%
@rem 完整的安装包名称
@set output_setup_file_name=%output_setup_prefix%%electron_app_version%.exe
@rem 打包，生成unpacked files （如果你的打包脚本是其他的，则修改此处，在具体环境中打包可能报错，需要调整package.json中的electron和electron-builder的版本号）
cd %electron_build_path%
call npm run build

build-for-electron.bat를 실행하면 패키징을 시작할 수 있습니다. 그가 몇 가지 작업을 수행합니다.

package.json에서 guid 및 version 필드를 추출하고 후속 패키징 프로세스에 전달합니다.
전자 응용 프로그램이 있는 디렉토리를 입력하고 패키징 스크립트 npm run build를 실행합니다.
dis\win-unpacked 아래의 파일 복사
설치 패키지 패키징 실행(설치 프로그램 제거, 패키징 및 서명 포함)
최종 설치 패키지의 latest.yml 생성

다음은 패키징 스크립트 실행 프로세스입니다.

패키징이 완료된 후 최종 패키지 설치 패키지 프로그램은 다음과 같습니다.

설치 효과는 다음과 같습니다.

설치 시작:

설치:

업그레이드 효과 표시

이전 섹션에서는 설치 패키지 LeeqiaCapture_PC_Setup_1.0.0.exe의 1.0.0 버전을 제작하여 사용하기 위해 컴퓨터에 설치했으며 다음으로 새 버전의 제작을 시연하고 업그레이드 디렉토리에 넣습니다. , 이전 버전에서 업그레이드를 트리거합니다.

먼저 간단한 정적 http 서버를 구축해야 합니다. http-server 모듈을 설치하기만 하면 됩니다.

설치 후 새 디렉터리 e:\testweb\update를 만든 다음 e:\testweb 디렉터리 아래에서 실행합니다. http-server 이때 업그레이드 서버가 준비됩니다.

package.json의 version 필드를 1.0.1로 변경하고 build-for-electron.bat를 패키지로 다시 실행하면 두 개의 파일이 생성됩니다.

LeeqiaCapture_PC_Setup_1.0.1.exe
최신.yml

설치된 설치 패키지와 업그레이드 파일을 e:\testweb\update 디렉토리에 복사한 다음 이전에 설치된 버전 1.0.0 테스트 프로그램을 실행합니다.

이때 새 버전의 설치 패키지가 감지되고 업그레이드 여부를 묻는 메시지가 팝업되고 확인을 클릭하면 업그레이드가 시작되며 업그레이드가 완료되면 메인 프로그램이 자동으로 다시 시작됩니다.

이전 Electron 앱과의 호환성

electron에서 패키징하여 출시한 프로그램을 nsNiuniuSkin에서 패키징한 설치 패키지로 대체하면 어떻게 이전 버전과 완벽하게 호환될 수 있습니까?

이것은 매우 중요한 점이며 설치 패키지 패키징 도구를 전환할 때 많은 Electron 개발자가 혼동하는 부분이기도 합니다.

package.json에서 guid를 읽는 이유는 이전 버전과의 호환성을 확보하기 위함입니다. 알고 있는 한 스크립트에서 이전 Electron 설치 패키지의 설치 위치를 찾을 수 있으며 추가로 설치를 덮어쓸 수 있습니다.

물론 다음과 같이 다루어야 할 세부 사항이 여전히 많이 있습니다.

설치 위치에 대한 설치 경로를 읽고 쓰기 위해 우리가 사용하는 키 값은 InstPath이고 Electron에서 사용하는 키 값은 InstallLocation입니다. 또한 이 스크립트를 호출함), 이 값을 설정할 수 있는 매개 변수는 예약되어 있으며 InstallLocation으로 지정되므로 Electron 프로그램 패키징은 기본적으로 이전 버전과 일치하는 이 값을 지정합니다.
바로 가기의 교체는 이전과 이후의 바로 가기 이름이 일치하고 이전 버전의 설치 패키지 설치 구성(모든 사용자에게 설치되었는지 현재 사용자에게 설치되었는지 여부)이 일관될 수 있는 한 비교적 간단합니다. .
시작 메뉴는 바로 가기와 동일한 방식으로 처리됩니다.

뿐만 아니라 다른 유사한 솔루션에서 만든 설치 패키지를 당사의 설치 패키지 솔루션으로 원활하게 전환하는 것도 매우 간단합니다.

우리는 스크립트에 레지스트리 키의 기본값을 내장했으며 읽기 및 쓰기에 동일한 키 값이 사용되도록 이전 프로그램에서 작성한 키로 수정하기만 하면 됩니다.

다양한 패키징 방법 및 시나리오를 고려한 유연한 통합 솔루션

패키징 솔루션에서는 다양한 시나리오의 패키징 요구 사항을 고려하여 두 가지 형태의 패키징 스크립트를 제공합니다.

액티브 패키징

활성 패키징이라고 하는 이유는 패키징을 위한 트리거 항목이 당사의 패키징 항목 스크립트에 있기 때문입니다.우리는 build-for-electron.bat라는 스크립트를 제공하며 다음 사항이 구성되는 한 패키징을 시작할 수 있습니다. (이미 위의 예에서 다뤘습니다):

전자 애플리케이션이 있는 디렉토리
전자응용 프로그램의 메인 프로그램 파일명
전자 응용 프로그램의 설치 패키지 이름 접두사 등

패시브 패키징

패시브 패키징은 패키징의 트리거 포인트가 우리 편이 아니라 압축을 푼 파일이 다른 프로세스에 의해 입력되었으며 우리가 패키징하려는 디렉토리에 복사되었음을 의미합니다.최종 설치에 패키징하려면 스크립트를 호출해야 합니다. 패키지와 동시에 latest.yml 파일이 생성됩니다. 이미 비교적 완전한 패키징 자동화 프로세스가 있고 nsNiuniuSkin의 패키징 솔루션으로 전환하려는 경우 프로세스에서 build-by-external.bat 스크립트를 호출하고 지정된 매개변수를 전달할 수 있습니다.스크립트 매개변수는 다음과 같습니다. :

Call build-by-external.bat project_name electron_guid electron_app_version output_setup_file_name shell_all_user_mode install_execution_level file_pack_path main_exe_name gen_latest

스크립트 부분의 코드는 다음과 같습니다(명령줄 매개변수의 각 매개변수에 대한 설명은 스크립트 코드에 있음).

@rem 此脚本表示外部已经打好electron的unpacked files，并且已经复制到我们的FilesToInstall下，我们只需要相应的打包成最终的安装包即可 
@rem 打包脚本名称，如leeqia_simple，对于于SetupScripts目录下的具体文件夹名称
@set project_name=%1
@rem electron中配置的guid，用于指定注册表中的key
@set electron_guid=%2
@rem 软件版本号
@set electron_app_version=%3
@rem 完整的安装包名
@set output_setup_file_name=%4
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=%5
@rem 安装包的启动权限，user/admin
@set install_execution_level=%6
@rem 等待打包文件所在目录名，默认为FilesToInstall
@set file_pack_path=%7
@rem 主程序EXE名称
@set main_exe_name=%8
@rem 是否生成latest.yml，用于electron相关程序的打包 
@set gen_latest=%9
@rem 注册表中安装包位置存储的key值
@set install_location_key=InstallLocation

요약하다

위의 소개와 데모를 읽은 후 매우 간단하다고 생각하십니까? electron-updater와 상호 작용해야 하는 모든 복잡한 로직과 장소는 당사의 설치 패키지 제작 체계에 의해 자동으로 완성되어 통합된 인터페이스를 제공합니다.

전체 프로세스는 매우 간단합니다. build-for-electron.bat에서 매개변수를 구성한 다음(electron-builder 구성 파일이 구성되지 않은 경우 구성해야 함) 이 스크립트를 실행하면 설치 패키지가 실행됩니다. 포장.

Electron 애플리케이션 설치 패키지의 미화 및 업그레이드에 대해 의심이 있으십니까? 함께 토론할 기회를 가지십시오.

발문

설치 패키지 설치 과정에서 정교한 UI는 종종 고객이 설치된 제품에 더 깊은 인상을 남길 수 있으며 소프트웨어 서비스 제공 업체의 초점과 의도를 사용자 경험에 더 잘 반영할 수 있습니다! 우리의 노력이 설치 패키지 제작을 더 쉽고 행복하게 만들 수 있기를 바랍니다! 앞으로 Electron 프로그램의 패키징은 우리에게 맡겨질 것입니다! ^_^

세상에 어려운 설치 패키지가 없기를!

설치 패키지의 UI를 아름답게 하는 길 - nsNiuniuSkin을 사용하여 Electron 프로그램을 패키징, 릴리스 및 업그레이드

머리말

원칙