React Academy · Lekcja

Pakowanie i dystrybucja na platformy desktopowe

Proszę zbudować instalatory dla macOS, Windows i Linux za pomocą electron-builder, dodając podpisywanie kodu i automatyczne aktualizacje.

Lekcja 4 z 413 kroki

Pakowanie i dystrybucja na platformy desktopowe to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Konfiguracja electron-builder

electron-builder to standardowe narzędzie do pakowania aplikacji Electron w instalatory przeznaczone do dystrybucji. Jego konfiguracja znajduje się w package.json pod kluczem "build" i określa metadane aplikacji (appId, productName), ścieżki ikon oraz formaty docelowe dla poszczególnych platform.

Cele kompilacji według platformy

electron-builder obsługuje macOS (dmg i zip), Windows (instalator NSIS) oraz Linux (AppImage i deb). Można wskazać wiele platform w jednym poleceniu kompilacji albo skonfigurować CI tak, aby kompilował każdą platformę na właściwym dla niej runnerze, co zapewnia najlepszą zgodność.

Podpisywanie kodu w systemie macOS

macOS wymaga podpisywania kodu certyfikatem Apple Developer, aby Gatekeeper pozwolił użytkownikom otworzyć aplikację bez ostrzeżenia dotyczącego bezpieczeństwa. electron-builder odczytuje certyfikat z macOS Keychain podczas procesu kompilacji i automatycznie podpisuje wszystkie pliki binarne.

Notaryzacja w systemie macOS

Oprócz podpisywania kodu współczesny macOS wymaga również notaryzacji — przesłania aplikacji do usługi notaryzacji Apple, która skanuje ją pod kątem złośliwego oprogramowania i wystawia bilet. electron-builder może zautomatyzować notaryzację za pośrednictwem electron-notarize, a użytkownicy macOS 10.15+ nie będą mogli bez niej uruchomić aplikacji.

Podpisywanie kodu w systemie Windows

Windows wymaga certyfikatu Authenticode od zaufanego urzędu certyfikacji (CA), aby SmartScreen ufał instalatorowi. Bez podpisu użytkownicy zobaczą ostrzeżenie „System Windows ochronił komputer”. Certyfikaty Extended Validation (EV) usuwają to ostrzeżenie natychmiast, natomiast standardowe certyfikaty OV budują zaufanie stopniowo.

Struktura wyników kompilacji

Po pomyślnej kompilacji electron-builder zapisuje instalatory właściwe dla poszczególnych platform w katalogu dist/. Znajdują się tam plik DMG lub zip dla macOS, plik .exe instalatora NSIS dla Windows oraz AppImage lub .deb dla Linuxa, a także manifest automatycznych aktualizacji latest.yml (lub latest-mac.yml).

Ikony aplikacji

Aplikacje Electron wymagają ikon w formatach właściwych dla poszczególnych platform: PNG o rozmiarze 512x512 dla Linuxa, pliku ICNS (wielorozdzielczego) dla macOS oraz pliku ICO (wielorozdzielczego) dla Windows. electron-builder może wygenerować wszystkie formaty z pojedynczego pliku PNG o rozmiarze 1024x1024 przy użyciu flagi --icon.

Automatyczne aktualizacje z electron-updater

Pakiet electron-updater integruje się z electron-builderem, zapewniając automatyczne aktualizacje. Należy opublikować kompilacje w GitHub Releases lub S3, a electron-updater będzie mógł sprawdzać aktualizacje przy uruchomieniu, pobierać aktualizację różnicową w tle i prosić użytkownika o ponowne uruchomienie.

Sprawdzanie aktualizacji przy uruchomieniu

Należy wywołać autoUpdater.checkForUpdatesAndNotify() w main.js po przygotowaniu aplikacji. electron-updater pobiera manifest latest.yml z docelowej lokalizacji publikacji, porównuje wersje, a jeśli aktualizacja jest dostępna, pobiera ją i wyświetla natywne powiadomienie, gdy będzie gotowa do zainstalowania.

Archiwum ASAR

electron-builder pakuje pliki JavaScript aplikacji w pojedyncze archiwum ASAR (podobne do pliku tar) przeznaczone do dystrybucji. Poprawia to wydajność uruchamiania, ograniczając liczbę operacji wyszukiwania plików, i utrudnia bezpośrednie przeglądanie kodu źródłowego, choć go nie uniemożliwia.

Wypakowywanie modułów natywnych z ASAR

Natywnych modułów Node.js (plików .node) nie można ładować z wnętrza archiwum ASAR — muszą zostać wypakowane do systemu plików. W konfiguracji electron-builder należy ustawić asarUnpack i podać wzorce natywnych modułów. Zostaną one umieszczone w katalogu app.asar.unpacked obok archiwum.

Wymóg notaryzacji w systemie macOS

Dlaczego notaryzacja jest wymagana przy dystrybucji aplikacji na macOS, oprócz samego podpisywania kodu?

Podsumowanie lekcji

Dystrybucja aplikacji Electron obejmuje konfigurację celów electron-builder, podpisanie kodu dla macOS (wraz z notaryzacją) i Windows (za pomocą Authenticode), a także opcjonalne skonfigurowanie automatycznych aktualizacji z electron-updater. Archiwum ASAR pakuje aplikację na potrzeby dystrybucji, a moduły natywne są wypakowywane osobno. Solidny potok CI/CD automatycznie obsługuje te kroki dla każdej platformy.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
88
Lekcje
324

Często zadawane pytania

Czy lekcja „Pakowanie i dystrybucja na platformy desktopowe” jest bezpłatna?

Tak — pełny tekst „Pakowanie i dystrybucja na platformy desktopowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pakowanie i dystrybucja na platformy desktopowe”?

Proszę zbudować instalatory dla macOS, Windows i Linux za pomocą electron-builder, dodając podpisywanie kodu i automatyczne aktualizacje. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Pakowanie i dystrybucja na platformy desktopowe”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Architektura Electron: proces główny i proces renderera
  2. Konfiguracja Reacta z Electron
  3. Komunikacja IPC między procesami
  4. Pakowanie i dystrybucja na platformy desktopowe
← Powrót do React Academy