일렉트론 package.json 설정 및 외부에서 접근 가능하도록 빌드하기

이번 포스팅에서는 일렉트론 애플리케이션의 package.json을 설정하는 방법과, 외부에서 접근 가능한 파일을 빌드하는 방법을 다뤄보겠습니다. 

 

 

 

우선 제가 자주 사용하는 electron.js 의 package.json파일 구성은 대체로 아래와 같습니다. 

{
	"name": "myappphone",
	"productName": "My Appphone",
	"version": "1.0.0",
	"description": "My Appphone Application",
	"main": "main.js",
	"scripts": {
		"start": "electron .",
		"build": "electron-builder build --win --ia32"
	},
	"build": {
		"productName": "My Appphone",
		"appId": "com.mycompany.appphone",
		"extraFiles": [
			"settings.ini",
			"websocketServer.js"
		],
		"win": {
			"icon": "public/logo2.png",
			"target": [
				{
					"target": "nsis",
					"arch": [
						"ia32"
					]
				}
			]
		},
		"asar": true,
		"asarUnpack": [
			"settings.ini"
		],
		"nsis": {
			"artifactName": "${productName}_Setup_${version}.${ext}",
			"createDesktopShortcut": true,
			"createStartMenuShortcut": true,
			"oneClick": false,
			"allowToChangeInstallationDirectory": false,
			"include": "build/installer.nsh"
		}
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
		"electron-builder": "^24.9.1",
		"electron-devtools-installer": "^3.2.0",
		"electron-packager": "^17.1.2",
		"electron": "^22.3.27"
	},
	"dependencies": {
		"@electron/remote": "^2.0.11",
		"@emoji-mart/data": "^1.1.2",
		"@emoji-mart/react": "^1.1.1",
		"axios": "^1.7.2",
		"crypto-js": "^4.1.1",
		"electron-is-dev": "^2.0.0",
		"electron-log": "^5.1.1",
		"electron-prompt": "^1.7.0",
		"emoji-mart": "^5.5.2",
		"ini": "^4.1.1",
		"keytar": "^7.9.0",
		"open-graph-scraper": "^6.3.2",
		"path-browserify": "^1.0.1",
		"ws": "^8.17.0"
	}
}

 

 

1. 기본 설정: appId와 scripts 정의하기

appId: 애플리케이션의 고유 식별자

appId는 애플리케이션의 고유 식별자로, 운영 체제에서 애플리케이션을 식별하는 데 사용됩니다. 주로 자동 업데이트, 푸시 알림 등 다양한 기능에서 활용됩니다. 이 값은 보통 com.companyname.appname 형식으로 지정합니다.

 

 

scripts: 개발 및 빌드를 위한 명령어

scripts 섹션은 개발과 배포 과정에서 자주 사용하는 명령어를 정의하는 곳입니다. 예를 들어, "start": "electron ."는 개발 중 애플리케이션을 실행할 때 사용하고, "build": "electron-builder build --win --ia32"는 Windows용으로 애플리케이션을 빌드할 때 사용합니다. 

 

--win: 이 옵션은 Electron 애플리케이션을 윈도우용으로 빌드하겠다는 것을 의미합니다. Electron은 여러 플랫폼(Windows, macOS, Linux)을 지원하므로, 특정 플랫폼에 맞춰 빌드를 지정해야 합니다. 이 옵션을 사용하면 Windows 운영 체제에서 실행할 수 있는 설치 파일을 생성합니다.

 

--ia32: 이 옵션은 32비트를 대상으로 애플리케이션을 빌드하겠다는 의미입니다. Windows에는 32비트와 64비트 아키텍처가 있으므로, 32비트 시스템에서도 애플리케이션이 실행되도록 하려면 이 옵션을 사용합니다. 

 

 

 

참고로 터미널에서 애플리케이션을 빌드하려면 아래 명령어를 입력하면 됩니다.

 

npm run build

 

 

 

 

 

 

2. 외부에서 접근 가능한 파일 설정하기

settings.ini 파일을 외부 파일로 남기려면 두 가지 방법을 사용할 수 있습니다.

 

(1) asarUnpack 옵션 사용

(2) extraFiles 옵션 사용

 

저는 그냥 두 방법 다 사용했습니다. 두개 같이 사용한다고 더 좋아지는 건 아니지만요.

 

 

extraFiles 설정하기

"extraFiles": [
    "settings.ini",
    "websocketServer.js"
],

 

extraFiles는 빌드 과정에서 특정 파일을 .asar 아카이브 외부에 남겨두기 위해 사용합니다. 이를 통해 settings.ini와 같은 설정 파일을 애플리케이션이 배포된 후에도 수정할 수 있도록 할 수 있습니다. 이는 관리자가 애플리케이션을 실행하지 않고도 설정을 변경할 수 있도록 해줍니다.

 

제가 settings.ini 파일을 extraFiles에 남겨둔 이유는 애플리케이션의 설정값을 서버에서 관리할 수 있도록 하기 위함이었습니다. 애플리케이션에서 외부에서 작성되거나 수정되어야 하는 파일들은 각자의 개발 환경에 맞게 extraFiles 옵션을 통해 아카이브에서 제외하고, 빌드 후에도 접근 가능하도록 설정할 수 있습니다. 

 

 

asar와 asarUnpack 설정하기

"asar": true,
"asarUnpack": [
    "settings.ini"
],

 

Electron에서 .asar(Atom Shell Archive) 파일은 애플리케이션의 소스 코드와 리소스를 하나의 아카이브 파일로 묶어 배포하는 방식입니다. 이를 통해 파일 관리가 간편해지고, 긴 파일 경로로 인한 문제를 줄이며, 애플리케이션의 소스 코드를 간단히 숨길 수 있습니다. 그러나 .asar 파일은 읽기 전용이기 때문에 내부 파일을 수정할 수 없으며, 일부 Node.js API는 추가적인 작업 없이 이 아카이브를 읽을 수 있습니다.

 

 

추가로 일부 파일은 --unpack 옵션을 사용해 아카이브 외부에 남겨두어 성능을 최적화하거나, 바이러스 검사 소프트웨어의 오탐지를 피할 수 있습니다. 이러한 이유로, settings.ini와 같은 설정 파일을 extraFiles로 지정해 아카이브 외부에 남겨두면 서버나 외부에서 쉽게 접근하고 수정할 수 있습니다.

 

 

자세한 내용은 아래 공식문서를 참고합시다.

ASAR Integrity | Electron

 

 

 

 

3. NSIS 설정: Windows 설치 프로그램 구성

"nsis": 
{
    "artifactName": "${productName}_Setup_${version}.${ext}",
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "oneClick": false,
    "allowToChangeInstallationDirectory": false,
    "include": "build/installer.nsh"
}

 

nsis 섹션은 Windows 설치 프로그램을 만들 때 필요한 설정을 정의합니다.

예를 들어, artifactName은 생성될 설치 파일의 이름을 지정하며, createDesktopShortcut와 createStartMenuShortcut 설정은 설치 시 바탕화면과 시작 메뉴에 바로가기를 생성할지 여부를 결정합니다.

 

oneClick을 false로 설정하면 사용자가 설치 경로를 선택할 수 있게 되며, allowToChangeInstallationDirectory를 false로 설정하여 설치 경로 변경을 제한할 수 있습니다.