In diesem Artikel möchte ich euch in aller Kürze ein kleines Script an die Hand geben, welches es euch ermöglicht per npm Kommando eure Applikation auf den Raspberry Pi oder ein sonstiges Linux System zu deployen.
Für die Datenkopie nutzen wir den Befehl scp. Die komplette Syntax und Referenz findet ihr hier.
Damit das Script für euer Projekt per npm ausgeführt werden kann, muss die package.json Datei editiert werden. Unser Script wird in die scripts Sektion eingefügt.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "npm run build && scp -rp build/* pi@weather.home.loc:/var/www/html/weather.home.loc"
}
Die letzte Zeile in der scripts Sektion beinhaltet unser Script. Dieses wird über
npm run deploy
ausgeführt.
Da wir explizit das Script für eine React Applikation verwenden möchten besteht das Script aus zwei Befehlen.
npm run build
Das erste Script baut zunächst die React Applikation und legt diese wie gewohnt in dem build Ordner ab.
scp -rp build/* pi@weather.home.loc:/var/www/html/weather.home.loc
Der zweite Teil des Scriptes kopiert die gebauten Dateien aus dem build Ordner auf das Remotesystem.
Erläuterung des Scriptes zum Kopieren
scp -rp source_folder/* user@remote_system:/remote_path
Die Syntax für scp ist nicht kompliziert. Wir leiten den Befehl mit scp selbst ein und ergänzen diesen mit den Flags r (rekursives kopieren aller Ordner und Dateien) und p (kopiert die Zeitstempel von Dateien mit, optional!).
Der erste Parameter ist das Verzeichnis aus welchem ihr die Dateien kopieren wollt. Der zweite Parameter ist die Angabe des Servers sowie des Verzeichnisses in das ihr kopieren möchtet.
Zusätzlich gebe ich noch den Benutzer auf dem Remotesystem an, den ihr zum Kopieren benutzen möchtet. Das Passwort wird beim Ausführen des Scriptes abgefragt.
Beispiel der Ausführung
user@rechner:~/Projekte/react/weather-station$ npm run deploy
> weather-station@0.1.0 deploy
> npm run build && scp -rp build/* pi@weather.home.loc:/var/www/html/weather.home.loc
> weather-station@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
199.68 kB (-14 B) build/static/js/main.6b97d790.js
1.79 kB build/static/js/787.bd717ee6.chunk.js
1.22 kB build/static/css/main.8d8b4fe8.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
pi@weather.home.loc's password:
asset-manifest.json 100% 589 1.2MB/s 00:00
favicon.ico 100% 222KB 73.9MB/s 00:00
index.html 100% 644 2.0MB/s 00:00
logo192.png 100% 5347 11.2MB/s 00:00
logo512.png 100% 9664 17.3MB/s 00:00
manifest.json 100% 492 1.6MB/s 00:00
robots.txt 100% 67 253.0KB/s 00:00
bg.be06e782a500855d7197.jpg 100% 318KB 64.0MB/s 00:00
main.8d8b4fe8.css 100% 2944 7.4MB/s 00:00
main.8d8b4fe8.css.map 100% 5343 9.9MB/s 00:00
main.6b97d790.js.LICENSE.txt 100% 5728 10.2MB/s 00:00
main.6b97d790.js 100% 688KB 88.8MB/s 00:00
787.bd717ee6.chunk.js.map 100% 10KB 17.8MB/s 00:00
main.6b97d790.js.map 100% 3979KB 96.7MB/s 00:00
787.bd717ee6.chunk.js 100% 4611 9.1MB/s 00:00
