Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit

Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit

Vorwort

Der ü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.
Und ssh2 ist eine Simulationsimplementierung von SSH2 unter Verwendung von nodejs. scp ist die Abkürzung für „Secure Copy“. scp ist ein Befehl zum sicheren Remote-Kopieren von Dateien basierend auf der SSH-Anmeldung im Linux-System. Wir werden diese Funktion hier verwenden. Nachdem Vue erfolgreich kompiliert und erstellt wurde, wird das Projekt in die Test-/Produktionsumgebung übertragen, um das Testen zu erleichtern und die Effizienz zu verbessern.

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 erstellen

Erstellen 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:
  • So stellen Sie ein Vue-CLI3-Projekt nach dem Verpacken automatisch auf dem Server bereit
  • Vue-CLI 3 scp2 Automatische Bereitstellung von Projekten auf dem Server-Verfahren

<<:  Die häufigsten Fehler beim Schreiben von HTML-Tags

>>:  So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)

Artikel empfehlen

Detaillierte Erklärung der MySQL-Berechtigungen und -Indizes

MySQL-Berechtigungen und Indizes Der höchste Benu...

Analyse der Prinzipien von MySQL Dirty Page Flush und Shrinking Table Space

MySQL-Dirty-Pages Aufgrund des WAL-Mechanismus er...

PNG-Alpha-Transparenz in IE6 (vollständige Sammlung)

Viele Leute sagen, dass IE6 PNG-Transparenz nicht...

Detaillierte Erläuterung gängiger Methoden von JavaScript String

Inhaltsverzeichnis 1. charAt Grammatik Parameter ...

So verbergen Sie die Grenze/Trennlinie zwischen Zellen in einer Tabelle

Nur den oberen Rand anzeigen <table frame=above...

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...

Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern

Inhaltsverzeichnis Axios-Anfrage Qs-Verarbeitungs...

Über die praktische Anwendung von HTML-Mailto (E-Mail) sprechen

Wie wir alle wissen, ist „mailto“ ein sehr praktis...

Ausführliche Erläuterung der Mysql-Deadlock-Anzeige und Deadlock-Entfernung

Vorwort Vor einiger Zeit ist bei mir ein MySQL-De...

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Dieser Artikel verwendet die Lizenzvereinbarung „...

JavaScript-Dom-Objektoperationen

Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Wie fügt man CSS in HTML ein? Es gibt drei Möglic...