VorwortDer übliche Prozess zum Bereitstellen von Front-End-Projekten ist: Zuerst in der Testumgebung bereitstellen und dann in der Produktionsumgebung freigeben. Beim Bereitstellen in der Testumgebung verwenden Sie xshell, um eine Verbindung zum Server herzustellen, verwenden dann xftp, um eine Verbindung zum Server herzustellen, erstellen dann das Projekt lokal und laden die erstellte Datei dann per xftp auf den Server hoch. Der gesamte Prozess fühlt sich etwas umständlich und repetitiv an. Dieses Tutorial erklärt das mit Vue-CLI 3.x-Scaffolding erstellte Vue-Projekt und verwendet scp2 zur automatischen Bereitstellung auf dem statischen Dateiserver Nginx 1. Installieren Sie scp2 scp2 ist eine erweiterte Implementierung basierend auf ssh2, die rein in JavaScript geschrieben ist. Installieren Sie scp2: npm installiere scp2 --save-dev 2. Konfigurieren Sie die SSH-Remote-Anmeldekontoinformationen des Test-/Produktionsumgebungsservers 1. Erstellen Sie im Stammverzeichnis des Projekts eine .env.dev-Datei (Testumgebungsvariablen). Die Variable VUE_APP_SERVER_ID gibt an, dass die ID des aktuell einzusetzenden Testservers 0 ist. // VUE_APP_SERVER_ID=0 in der Datei .env.dev 2. Erstellen Sie im Stammverzeichnis des Projekts eine .env.prod-Datei (Produktionsumgebungsvariablen). Die Variable VUE_APP_SERVER_ID gibt an, dass die aktuelle Produktionsserver-ID, die bereitgestellt werden soll, 1 ist. // VUE_APP_SERVER_ID=1 in der Datei .env.prod 3. Erstellen Sie im Stammverzeichnis des Projekts die Datei deploy/products.js /* *Umgebungsvariablen lesen*/ const fs = erfordern('fs'); const path = require('Pfad'); // Die env-Datei bestimmt die Server-ID, die der Verpackungsumgebung entspricht const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev'; // Umgebungsvariable Pfad const envPath = path.resolve(__dirname, envfile); // Umgebungsobjekt const envObj = parse(fs.readFileSync(envPath, 'utf8')); const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']); Funktion parse(src) { // Datei mit KEY=VAL analysieren const res = {}; src.split('\n').fürEach(Zeile => { // Übereinstimmung zwischen „KEY“ und „VAL“ in „KEY=VAL“ // eslint-disable-next-line kein nutzloses Escape const keyValueArr = Zeile.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/); // abgestimmt? wenn (SchlüsselwertArr != null) { const Schlüssel = SchlüsselwertArr[1]; lass Wert = SchlüsselWertArr[2] || ''; // Zeilenumbrüche in Anführungszeichen erweitern const len = Wert? Wert.Länge: 0; wenn (Länge > 0 && Wert.charAt(0) === '"' && Wert.charAt(Länge - 1) === '"') { Wert = Wert.ersetzen(/\\n/gm, '\n'); } // Entfernen Sie alle umgebenden Anführungszeichen und zusätzlichen Leerzeichen Wert = Wert.ersetzen(/(^['"]|['"]$)/g, '').trim(); res[Schlüssel] = Wert; } }); Rückgabewert; } /* *Definieren Sie mehrere Serverkonten und exportieren Sie das aktuelle Umgebungsserverkonto basierend auf der SERVER_ID*/ const SERVER_LIST = [ { ID: 0, Name: 'A-Produktionsumgebung', Domäne: „www.prod.com“, // Domänenname-Host: „46.106.38.24“, // IP Port: 22, // Port-Benutzername: „root“, // Konto für die Anmeldung beim Server-Passwort: „root“, // Konto für die Anmeldung beim Server-Pfad: „/mdm/nginx/dist“ // Auf dem statischen Server veröffentlichter Projektpfad}, { ID: 1, Name: 'B-Testumgebung', Domäne: 'test.xxx.com', Gastgeber: 'XX.XX.XX.XX', Hafen: 22, Benutzername: „root“, Passwort: 'xxxxxxx', Pfad: '/usr/local/www/xxx_program_test/' } ]; module.exports = SERVER_LIST[SERVER_ID]; 3. Verwenden Sie die scp2-Bibliothek, um automatisierte Bereitstellungsskripte zu erstellenErstellen Sie im Stammverzeichnis des Projekts die Datei deploy/index.js const scpClient = erfordern('scp2'); const ora = erfordern('ora'); const Kreide = erforderlich('Kreide'); const server = erfordern('./produkte'); const spinner = ora('Veröffentlichen in' + (process.env.NODE_ENV === 'prod' ? 'Produktion' : 'Test') + 'Server...'); spinner.start(); scpClient.scp( 'dist/', { Host: Server.Host, Port: Server.Port, Benutzername: Server.Benutzername, Passwort: Server.Passwort, Pfad: Server.Pfad }, Funktion (Fehler) { spinner.stop(); wenn (Fehler) { console.log(chalk.red('Veröffentlichen fehlgeschlagen.\n')); Fehler machen; } anders { console.log(chalk.green('Erfolg! Erfolgreich veröffentlicht auf' + (process.env.NODE_ENV === 'prod' ? 'Produktion' : 'Test') + 'Server! \n')); } } ); 4. Fügen Sie den Skriptbefehl in package.json hinzu und passen Sie den Namen in „deploy“ an.Der Befehl zum Veröffentlichen in der Testumgebung lautet npm run deploy:dev, und der Befehl zum Veröffentlichen in der Produktionsumgebung lautet npm run deploy:prod "Skripte": { "servieren": "vue-cli-service serve --mode dev", "Build": "vue-cli-service build --mode prod", "Bereitstellung:dev": "npm führt Build && Cross-Env NODE_ENV=dev-Knoten aus ./Bereitstellung", "deploy:prod": "npm führt Build && Cross-Env NODE_ENV=prod-Knoten aus ./deploy", }, ps cross_env wird hier verwendet, Sie müssen npm i --save-dev cross-env installieren. cross-env kann Umgebungsvariablen plattformübergreifend festlegen und verwenden. Hier wird es verwendet, um festzulegen, ob es sich um eine Produktionsumgebung oder eine Testumgebung handelt. Abschluss Auffüllen Ein begeisterter Freund sagte, dass der Hash-Wert bei jedem Packen des Pakets unterschiedlich ist, sodass sich immer mehr Dateien in dist befinden. Sie können zuerst die dist-Datei mit ssh2 löschen, nginx nach dem Löschen neu starten und sie dann auf den Server hochladen. // bereitstellen/index.js const scpClient = require('scp2'); const ora = erfordern('ora'); const Kreide = erforderlich('Kreide'); const server = erfordern('./produkte'); const spinner = ora( 'Veröffentlichen in' + (Prozess.env.NODE_ENV === 'prod' ? 'Produktion' : 'Test') + 'Server...' ); var Client = erfordern('ssh2').Client; var conn = neuer Client(); Verbindung .on('bereit', Funktion() { //rm löscht die Dist-Datei, \n ist ein Zeilenumbruch, um den Befehl „nginx neu starten“ auszuführen. Ich verwende hier Docker, um nginx neu zu starten. conn.exec('rm -rf /mdm/nginx/dist\ndocker nginx neu starten', Funktion( ähm, Strom ) { wenn (err) throw err; Strom .on('schließen', Funktion(Code, Signal) { // Geben Sie nach der Ausführung des Shell-Befehls den Code zum Starten des Hochladens und Bereitstellens des Projekts hier ein spinner.start(); scpClient.scp( './dist', { Host: Server.Host, Port: Server.Port, Benutzername: Server.Benutzername, Passwort: Server.Passwort, Pfad: Server.Pfad }, Funktion(Fehler) { spinner.stop(); wenn (Fehler) { console.log(chalk.red('Veröffentlichen fehlgeschlagen.\n')); Fehler machen; } anders { konsole.log( Kreidegrün( 'Erfolg! Erfolgreich veröffentlicht in' + (Prozess.Umgebung.NODE_ENV === 'prod' ? „Produktion“ : 'Prüfung') + 'Server! \n' ) ); } } ); conn.end(); }) .on('Daten', Funktion(Daten) { console.log('STDOUT: ' + Daten); }) .stderr.on('Daten', Funktion(Daten) { console.log('STDERR: ' + Daten); }); }); }) .verbinden({ Host: Server.Host, Port: Server.Port, Benutzername: Server.Benutzername, Passwort: server.password //privater Schlüssel: require('fs').readFileSync('/home/admin/.ssh/id_dsa') }); Referenzartikel https://www.cnblogs.com/sufaith/p/vue-cli.html Dies ist das Ende dieses Artikels über die Schritte der automatischen Bereitstellung von Projekten mit Vue-CLI3.x auf dem Server. Weitere verwandte Artikel zur automatischen Bereitstellung von Projekten mit Vue-CLI3.x finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Die häufigsten Fehler beim Schreiben von HTML-Tags
>>: So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)
Die Situation ist wie folgt: (PS: Das rote Kästche...
1. Überprüfen Sie die Zeitzone der Datenbank Vari...
1. Einleitung Durch Aktivieren des Slow Query Log...
Inhaltsverzeichnis 1. Vorbereitung 2. Definieren ...
Überblick Heute werden wir hauptsächlich erläuter...
Inhaltsverzeichnis Implementierung der Statusfrei...
Derzeit nutzen die meisten Linux-Benutzer entwede...
Beheben Sie das Problem, dass unter Windows 10 ke...
Das 10-tägige Tutorial verwendet eine äußerst ver...
1. Einführung in Compose Compose ist ein Tool zum...
Installieren Sie CentOS 7 nach der Installation v...
Zeit(); Funktion Funktionsprototyp: time_t time(t...
Indextypen in MySQL Im Allgemeinen können sie in ...
Jeder muss die Zusammensetzung des Boxmodells von...
<br />Original: Progressive Enhancement vers...