티스토리 뷰
Inno Setup으로 NW.js로 감싼 프로그램 Package 만들기
NW.js로 감싼 프로그램을 설치 파일로 만들어 사람들에게 나눠야 합니다.
Inno Setup 말고도 NSIS, WiX 등 유사한 기능을 가진 프로그램들이 있지만 제가 생각하기에 Inno Setup을 선택한 이유는 간편한 사용성, 작은 설치 프로그램 크기로 인한 다운로드 및 배포 용이와 오랜 기간 사용되어 온 프로그램인 만큼 신뢰성이 있어 선택을 한 것 같습니다. (+ 상업적으로 무료 ㅎㅎ)
Inno Setup
: 윈도우 운영 체제에서 사용되는 설치 프로그램 작성 도구입니다.
동작 과정
저의 생각에는 알집과 같이 프로그램을 감싸서 실행 파일로 만들어 주는 것이라고 생각이 들지만 좀 더 자세한 과정을 알아보도록 하겠습니다.
1. 스크립트 작성
Inno Setup은 Pascal 스크립팅 언어를 사용하여 설치 스크립트를 작성합니다. (스크립트에는 설치 프로그램의 구성요소, 파일 및 폴더 위치, 레지스트리 변경 등의 정보가 포함)
2. 컴파일
작성한 스크립트 파일을 Inno Setup 컴파일러에 전달하여 설치 프로그램 실행 파일을 생성 (이 설치 프로그램은 설치 프로세스를 시작하는데 사용)
3. 설치 프로그램 실행
4. 사용자 인터페이스
Inno Setup은 사용자에게 설치 프로세스에 대한 대화식 사용자 인터페이스를 제공합니다. 사용자는 라이센스 동의, 설치 경로 선택 등과 같은 단계를 거칩니다.
5. 파일 복사
설치 프로그램은 지정된 폴더로 파일을 복사합니다.
(실행 파일, 라이브러리, 리소스 파일 등이 대상 시스템에 복사됩니다.)
6. 레지스트리 수정
Inno Setup은 설치 중에 레지스트리 항목을 추가, 수정 또는 제거할 수 있습니다. 이를 통해 설치 프로그램에 필요한 레지스트리 설정이 수행됩니다.
7. 바탕화면 바로 가기 및 시작 메뉴 항목
Inno Setup은 사용자가 선택한 경우 바탕화면에 바로 가기를 생성하고 시작 메뉴에 항목을 추가할 수 있습니다.
8. 설치 완료
저는 전에 NW.js로 감싼 Number BaseBall Game을 가지고 Inno Setup을 통해 package로 만들어 보는 과정입니다.
간단 실행
- Inno Setup 설치
- Inno Setup 실행
script 파일로 직접 입력을 하는 방법과 script wizard를 이용한 방법이 있습니다.
다음은 제가 script wizard를 이용해서 자동 완성된 script 파일 예제입니다. 해당 내용들을 잘 익히고 계시면 script를 직접 작성하는 것이 좋을 수 있으나 처음 하시는 분들은 script wizard를 이용하고 script를 익혀보는 것이 좋아 보입니다.
script가 작성되고 실행이 되면 NumberBaseBallGameSetup.exe 파일이 만들어집니다.
(추가적인 내용 확인 하고 싶으면 공식 문서를 확인하면 됩니다.)
; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
#define MyAppName "My Program"
#define MyAppVersion "1.5"
#define MyAppPublisher "Paeng"
#define MyAppURL "https://www.example.com/"
#define MyAppExeName "src.exe" # NW.js로 만든 .exe 파일
[Setup]
; 설치 프로그램 및 제거 프로그램에서 사용하는 전역 설정 (생성하는 모든 설치에는 특정 지시문이 필요)
; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{8944FBD1-7274-4DBF-8D66-37A96EC087E8}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={userappdata}\NumberBaseballGame ; 기본 저장 장소 (/Users/{유저 이름}/Roaming/NumberBaseballGame)
DisableDirPage=no ; 경로 사용자에게 물어보기
UsePreviousAppDir=no ; 이전 경로 저장하지 않기
DefaultGroupName=NumberBaseballGame
OutputDir=C:\Users\gwpaeng\Desktop ; inno setup 마무리한 실행 파일 위치
OutputBaseFilename=NumberBaseballGame Setup ; inno setup 마무리한 실행 파일 이름
Compression=lzma
SolidCompression=yes
WizardStyle=modern
[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl" ; 실행과정 언어
[Tasks]
; 설치중에 설치 프로그램이 수행할 사용자 지정 가능한 모든 작업을 정의 (추가 작업 선택 마법사 페이지에서 확인란 및 라디오 버튼)
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
[Files]
; 설치 프로그램이 사용자 시스템에 설치할 모든 파일 정의
Source: "C:\work\NumberBaseballGame\dist\src\win64\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversion # NW.js로 만든 .exe 파일
Source: "C:\work\NumberBaseballGame\dist\src\win64\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs # NW.js로 만든 폴더 전체
; NOTE: Don't use "Flags: ignoreversion" on any shared system files
[Icons]
; 설치 프로그램이 시작 메뉴 및 바탕 화면과 같은 다른 위치에 바로가기 만들기
Name: "{group}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{group}\{cm:ProgramOnTheWeb,{#MyAppName}}"; Filename: "{#MyAppURL}"
Name: "{group}\{cm:UninstallProgram,{#MyAppName}}"; Filename: "{uninstallexe}"
Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
[Run]
; 프로그램이 성공적으로 설치된 후 설치 프로그램이 최종 대화 상자를 표시하기 전에 실행할 프로그램 수를 지정
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
- Inno Setup에서 만든 실행파일 실행
원하는 아이콘이 나오고 실행이 가능합니다.
더 자세한 과정을 보고 싶으면 해당 유튜브를 추천합니다.
마치며
회사 프로그램에 NW.js의 0.74.0 버전과 Inno Setup을 설정하게 되었는데 Inno Setup에서 추가로 AppData 경로에 저장하며 사용자가 특정 경로 설정하는 페이지가 나오게 해야 했습니다. 그래서 [Setup]
에서 option을 추가하여 문제를 해결하였습니다.
[Setup]
...
DefaultDirName={userappdata}\땡땡땡 // AppData/Roaming으로 저장
DisableDirPage=no // 사용자가 특정 경로 설정
UsePreviousAppDir=no //이전에 위치 정해둔 것 제거
이 것은 크게 문제가 되지 않았는데 내부 프로그램에 있는 소프트웨어(자동 업데이트), 하드웨어 연결(POS, 콜, 바코드 프린트)등 경로를 잘 설정되지 않아 문제가 되었었습니다. 그래서 모든 프로그램을 볼 때 상대 경로, 절대 경로를 잘 설정하고 정리해야겠다는 생각을 하게 되었습니다.
또한 다른 이의 코드를 볼 때 좀 더 많은 힘을 써야 한 다는 것을 깨달았지만 점점 더 문제 해결능력이 성장하고 있는 것 같습니다.
Ref
https://jrsoftware.org/ishelp/
https://www.youtube.com/watch?v=l1p2GQxcP54
https://github.com/jrsoftware/issrc
https://jrsoftware.org/ishelp/index.php?topic=setup_defaultdirname
'Tip and Error' 카테고리의 다른 글
ESLint, Prettier 적용 (IntelliJ, WebStorm) (0) | 2023.09.08 |
---|---|
[Error] Failed to load resource: the server responded with a status of 403 () (3) | 2023.07.26 |
[문제] useNavigate()의 state값이 null인 경우 (0) | 2023.07.03 |
Program Upgrade (w. NW.js And Electron) (0) | 2023.07.01 |
[Error] Error: package.json not found in srcDir file glob patterns (0) | 2023.06.30 |