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

Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

Die Situation ist wie folgt: (PS: Das rote Kästche...

So zeigen Sie die MySQL-Zeitzone an und legen sie fest

1. Überprüfen Sie die Zeitzone der Datenbank Vari...

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle

1. Einleitung Durch Aktivieren des Slow Query Log...

Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V

Derzeit nutzen die meisten Linux-Benutzer entwede...

Zusammenfassung der Situationen, in denen MySQL-Indizes nicht verwendet werden

Indextypen in MySQL Im Allgemeinen können sie in ...

Zukunftsweisendes Allround-Webdesign: Progressive Enhancement

<br />Original: Progressive Enhancement vers...