Table of contents

4. Packaging Your Application - Using Electron Forge

Electron은 핡심 λͺ¨λ“ˆμ— νŒ¨ν‚€μ§• 및 배포 도ꡬ가 λ‚΄μž₯λ˜μ–΄ μžˆμ§€ μ•Šλ‹€. λ”°λΌμ„œ 개발 λͺ¨λ“œμ—μ„œ μž‘λ™ν•˜λŠ” Electron 앱을 배포할 수 μžˆλŠ” νŒ¨ν‚€μ§€λ‘œ λ§Œλ“€λ €λ©΄ μΆ”κ°€ 도ꡬλ₯Ό μ‚¬μš©ν•΄μ•Όν•œλ‹€. μ΄λŸ¬ν•œ νŒ¨ν‚€μ§€λ₯Ό 배포 κ°€λŠ₯ν•œ 앱이라고도 ν•œλ‹€. 배포 κ°€λŠ₯ν•œ 앱은 μ„€μΉ˜ ν”„λ‘œκ·Έλž¨(예: Windows의 MSI) λ˜λŠ” νœ΄λŒ€μš© μ‹€ν–‰ 파일(예: macOS의 .app)일 수 μžˆλ‹€.

Electron ForgeλŠ” Electron μ•±μ˜ νŒ¨ν‚€μ§• 및 배포λ₯Ό μ²˜λ¦¬ν•˜λŠ” μ˜¬μΈμ› 도ꡬ이닀. 이 λ„κ΅¬λŠ” ν•΅μ‹¬μ μœΌλ‘œ λ§Žμ€ κΈ°μ‘΄ Electron 도ꡬ듀 (예: electron-packager, @electron/osx-sign, electron-winstaller λ“±)을 단일 μΈν„°νŽ˜μ΄μŠ€λ‘œ ν†΅ν•©ν•˜μ—¬ 이듀을 λͺ¨λ‘ ν•¨κ»˜ μ‚¬μš©ν•  ν•„μš”κ°€ 없도둝 λ§Œλ“€μ–΄ μ€€λ‹€.

Importing your project into Forge

npm install --save-dev @electron-forge/cli
npx electron-forge import
μ‹€ν–‰ν™”λ©΄

web_application51.png

web_application52.png

package.json에 forge κ΄€λ ¨ μ½”λ“œκ°€ μΆ”κ°€λœλ‹€.

web_application53.png


Creating a distributable

npm run make
make command μ„€λͺ…
  1. electron-forge package μ‹€ν–‰:
    • λ¨Όμ €, λ‚΄λΆ€μ—μ„œ electron-forge package λͺ…령을 μ‹€ν–‰.
    • 이 λͺ…령은 Electron 이진 파일과 ν•¨κ»˜ μ•± μ½”λ“œλ₯Ό λ²ˆλ“€λ§. λ²ˆλ“€λ§λœ μ½”λ“œλŠ” νŠΉμ • 폴더에 생성됨.
    • 즉, Electron μ•± μ½”λ“œμ™€ Electron λ°”μ΄λ„ˆλ¦¬κ°€ ν•¨κ»˜ νŒ¨ν‚€μ§•λ˜μ–΄ μ‹€ν–‰ κ°€λŠ₯ν•œ ν˜•νƒœλ‘œ λ§Œλ“€μ–΄μ§„λ‹€
  2. Distributable 생성:
    • 그런 λ‹€μŒ, 이 νŒ¨ν‚€μ§€λœ μ•± 폴더λ₯Ό μ‚¬μš©ν•˜μ—¬ 각 μ„€μ •λœ 메이컀(Maker)에 λŒ€ν•΄ λ³„λ„μ˜ 배포용 νŒŒμΌμ„ 생성.
    • 각 λ©”μ΄μ»€λŠ” νŠΉμ •ν•œ 배포 ν˜•μ‹ λ˜λŠ” ν”Œλž«νΌμ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, @electron-forge/maker-deb은 Debian 운영 체제용 νŒ¨ν‚€μ§€λ₯Ό μƒμ„±ν•˜κ³ , @electron-forge/maker-squirrel은 Windows용 μ„€μΉ˜ ν”„λ‘œκ·Έλž¨μ„ 생성.
    • μ΄λ ‡κ²Œ μƒμ„±λœ 배포용 νŒŒμΌμ€ μ‚¬μš©μžμ—κ²Œ μ œκ³΅λ˜μ–΄ μ„€μΉ˜ν•˜κ±°λ‚˜ μ‹€ν–‰ν•  수 μžˆλŠ” ν˜•νƒœλ‘œ 제곡.
μ‹€ν–‰ν™”λ©΄

web_application54.png

out folder μ•ˆμ— 파일이 생성됨.

web_application55.png


μ½”λ“œνŠΈλ¦¬

web_application56.png