Website - Go live
Früher war der Go live im Prinzip immer gleich. Website Files per FTP oder SSH auf den Serverspielen und Datenbank per SSH, phpMyAdmin oder anderen Tools hochspielen.
Durch neue Arbeitsweisen und Tools wie Webpack, Docker etc. hat sich auch das Deployment verändert.
Webpack build[Bearbeiten]
Wenn mit einem Bundler wie Webpack gearbeitet wird, muss man den Bundler anweisen zunächst eine Distribution zu erstellen. Dabei kann der Bundler einige Aufgaben übernehmen: TypeScript in JavaScript umwandeln, Sass/Less Dateien kompilieren und vieles mehr.
Terminal:
npm run build
This command will run the script located in the /package.json file in the scripts > build property.
Wait a few seconds and the files should be available in the /dist/ folder which will be created when build is executed. You can then put those files online using your favorite FTP client.
Whenever you want to upload a new version, run npm run build again even if the /dist/ folder already exists.
Vercel / Netlify / Github Pages[Bearbeiten]
Vercel as an Example for modern deployment and testing
Vercel[Bearbeiten]
Vercel is one of those "modern" hosting solutions and features continuous integration (automatisation of testing, deployment and others development steps like this). It is very developer friendly and easy to setup.
You can use it for complex projects, but also for very simple "single page" websites like the ones we create within this course.
Vercel mit Webpack nutzen[Bearbeiten]
Quickstart[Bearbeiten]
Im Terminal einmalig
npm install vercel
oder auch mit -g global
package.json einmalig anpassen
"deploy": "vercel --prod"
im scripts Teil hinzufügen
Ab sofort im Terminal über
npm run deploy
Veröffentlichen
Wie funktioniert Vercel[Bearbeiten]
Vercel kann im Prinzip den build Process Online erledigen und bietet einige Zusatzfunktionen. Auch Domains kann man verbinden etc. Vercel Modul als Dependency einbinden (lokal oder mit -g Global). Das Modul ist ein CLI (CommandLineInterface) um mit Vercel zu kommunizieren
npm install vercel
Im package.json Skript legen wir unter script eine neue Zeile - z.B, mit Namen deploy an:
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js",
"deploy": "vercel --prod"
},
Jetzt steht für npm run die Option deploy zur Verfügung
npm run deploy
Vercel fragt beim ersten mal nach wie wir uns verbinden möchten (per E-Mail Login, Github...). Dann kann sich die cli einloggen.
Which scope do you want to deploy to? kholja
Man kann in Vercel mehrere Scopes anlegen, wir haben nur den Standardscope (Benutzername)
? Link to existing project? [y/N] n
Man kann Projekte anlegen wenn man möchte und den deploy einem zuordnen. Ansonsten wird ein neues angelegt.
? What’s your project’s name? donuts-3d-text
Achtung muss lowercase und ohne Leerzeichen sein.
? In which directory is your code located? ./
In unserem Fall sind wir schon im Hauptverzeichnis der Anwendung
No framework detected. Default Project Settings:
Wenn Vercel ein Framework wie React erkennt gibt er gleich passende Einstellungen vor. Hier zeigt er uns Standardwerte an.
- Build Command: `npm run vercel-build` or `npm run build` - Output Directory: `public` if it exists, or `.` - Development Command: None ? Want to override the settings? [y/N] y
Der Zweite Wert passt nicht unser Projekt liegt nach einem npm build im Ordner dist. Das kann man nun anpassen. Wenn mal ein Fehler passiert,geht das auch noch online bei Vercel.
Am Ende werden alle Daten hochgeladen. Der Build Prozess findet direkt bei Vercel statt. Vercel fügt zum eigenen Projekt eigentlich nur eine Projekt ID hinzu.
