[electron] gatsby + electron으로 데스크탑 앱 배포

기존의 gatsby 프로젝트에 electron을 설치하여 데스크탑 앱을 만들어 배포하려 한다.

아래의 글을 기반으로 작성되었다!

 

GitHub - soulehshaikh99/create-gatsby-electron-app: Discover the easiest way to get started with the blend of Gatsby and Electro

 

1. 관련 종속성 설치

 npm i -D electron electron-builder wait-on concurrently
 npm i electron-serve

위와 같이 devDependencies와 dependencies를 잘 구분하여 설치해야 한다. 안그러면 오류날 수 있다. (그랬던 사람)

 

electron : 풍부한 네이티브(운영 체제) API로 런타임을 제공하여 순수 자바스크립트로 데스크톱 애플리케이션을 만들 수 있다. 웹 서버 대신 데스크톱 애플리케이션에 초점을 맞춘 Node.js 런타임의 변형으로 볼 수 있다.

electron-builder : 즉시 배포할 수 있도록 package 와 build을 지원한다.  (수많은 형식을 지원)

wait-on : 소켓과 http(s) 리소스가 사용 가능해질 때까지 기다릴 경우 사용한다.

concurrently : 여러 명령을 동시에 실행하는데 사용한다.

electron-serve : 일레트론 앱을 위한 정적 파일 서비스를 제공한다.

 

2. 루트에 main.js 파일 생성

const { app, BrowserWindow } = require("electron");
const path = require("path");
const serve = require("electron-serve");
const loadURL = serve({ directory: "public" });

let mainWindow;

function isDev() {
  return !app.isPackaged;
}

function createWindow() {
  //브라우저 창을 만듦
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
    icon: isDev()
      ? path.join(process.cwd(), "src/images/favicon.webp")
      : path.join(__dirname, "/public/icons/icon-512x512.png"),
    show: false,
    autoHideMenuBar: true,
  });

  // 개발 목적으로만 사용 
  // 앱이 패키지화 될 준비가 되면 loadURL(mainWindow); 만 남김
  if (isDev()) {
    mainWindow.loadURL("http://localhost:8000/");
  } else {
    loadURL(mainWindow);
  }

 // 창이 닫힐 때
  mainWindow.on("closed", function () {
    mainWindow = null;
  });

  // 창이 보여줄 준비가 되었을 때
  mainWindow.once("ready-to-show", () => {
    mainWindow.show();
  });
}

// Electron이 완료되면 호출.
app.on("ready", createWindow);

// 모든 창이 닫히면 종료
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

// MacOS에서는 앱에서 창을 다시 만드는 것이 일반적
app.on("activate", function () {
  if (mainWindow === null) createWindow();
});

 

 

3. package.json

build는 electron-builder에서 사용되며 OS 플랫폼마다 각 옵션을 추가할 수 있다.

이전에 윈도우에서 패키지 했더니 아이콘이 제대로 설정되지 않아서 win 옵션에 ico 형식으로 아이콘을 설정했더니 원하는대로 나왔다.

"main": "main.js",
"build": {
  "icon": "아이콘 경로",
  "productName": "앱 이름",
  "files": [
    "public/**/*",
    "main.js"
  ],
   "win": {
      "icon": "아이콘 경로.ico"
    },
    // 윈도우 인스톨러 설정
    "nsis": {
      // 원클릭 설치 프로그램을 생성할지 defualt: true
      "oneClick": false,
      // 설치 관리자 페이지(시스템별 또는 사용자별 선택)를 표시할지 여부 default: false
      "perMachine": true,
      // 사용자가 설치 디렉터리를 변경할 수 있도록 허용할지 여부 default: false
      "allowToChangeInstallationDirectory": true,
      // 언어 지정 한국어-1042
      "language": 1042
    }
}

"scripts": {
  "build": "gatsby build",
  "develop": "gatsby develop",
  "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
  "serve": "gatsby serve",
  "clean": "gatsby clean",
  "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
  "prebuild": "yarn run clean",
  "electron": "wait-on http://localhost:8000 && electron .",
  "electron-dev": "concurrently \"yarn run develop\" \"yarn run electron\"",
  "preelectron-pack": "yarn run build",
  "electron-pack": "electron-builder"
}

 

 

npm run electron-pack

아래의 스크립트를 실행하게 되면 앱이 배포가 시작된다.

루트경로에 dist가 생성되면서 setup.exe가 생성되어 데스크탑 애플리케이션이 설치된다.