Linux Vue wird auf Nginx bereitgestellt

Vorwort

In der modernen Webentwicklung werden in der Regel einige beliebte und benutzerfreundliche Tools zum Erstellen und Verwalten von Webanwendungen verwendet. Dazu gehören Linux, Vue und Nginx.

Linux ist ein Open-Source-Betriebssystem, das häufig für die serverseitige Bereitstellung verwendet wird. Vue ist ein beliebtes Front-End-JavaScript-Framework für die Entwicklung clientseitiger Webanwendungen. Nginx ist ein Hochleistungs-Webserver, der zum Hosten statischer Assets und zum Weiterleiten von Anforderungen über einen Reverse-Proxy an die entsprechende Anwendung verwendet werden kann.

In diesem Artikel besprechen wir, wie man eine Vue-Anwendung auf Nginx bereitstellt und einige notwendige Konfigurationen und Optimierungen für eine optimale Leistung durchführt. Wir verwenden als Beispiel eine echte Vue-Anwendung und gehen davon aus, dass Sie bereits Linux und Nginx installiert haben.

Teil 1: Vorbereitung

Bevor wir die Anwendung auf Nginx bereitstellen, müssen wir einige Vorbereitungen durchführen. Hier sind einige notwendige Schritte, die Sie unternehmen sollten, bevor Sie beginnen.

1. Statische Ressourcen generieren

Führen Sie den folgenden Befehl aus, um statische Ressourcen für Ihre Vue-Anwendung zu generieren:

npm run build

Dadurch wird ein dist-Verzeichnis erstellt, das statische Dateien für die Bereitstellung auf dem Server enthält. dist 目录，其中包含用于部署到服务器的静态文件。

2. 创建 Nginx 配置文件

创建一个新的 Nginx 配置文件，用于托管我们的应用程序。假设您已经安装了 Nginx，可以在 /etc/nginx/sites-available/ 目录中创建一个新的文件以定义您的应用程序。

sudo nano /etc/nginx/sites-available/myapp

在文件中添加以下内容，以定义我们的应用程序：

server {
    listen 80;
    root /var/www/myapp/dist;
    index index.html;
    server_name myapp.example.com;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

在这个配置文件中，我们定义了我们的应用程序。listen 指令指定了应用程序将监听的端口。root 指令指定应用程序的根目录，即我们刚刚生成的 dist 目录。server_name 指令设置了应用程序的域名。location 指令用于配置请求路由规则。

3. 将配置文件链接到 sites-enabled

在 /etc/nginx/sites-enabled/

Nginx-Konfigurationsdatei erstellen

Erstellen Sie eine neue Nginx-Konfigurationsdatei zum Hosten unserer Anwendung. Vorausgesetzt, Sie haben Nginx installiert, können Sie im Verzeichnis /etc/nginx/sites-available/ eine neue Datei erstellen, um Ihre Anwendung zu definieren.

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/myapp

Fügen Sie den folgenden Inhalt in die Datei ein, um unsere Anwendung zu definieren:

sudo nginx -t

In dieser Konfigurationsdatei definieren wir unsere Anwendung. Die listen-Direktive gibt den Port an, den die Anwendung abhört. Die root-Direktive gibt das Stammverzeichnis der Anwendung an, bei dem es sich um das gerade generierte dist-Verzeichnis handelt. Die server_name-Direktive legt den Domänennamen der Anwendung fest. Die location-Direktive wird zum Konfigurieren von Anforderungsrouting-Regeln verwendet.

Verknüpfen Sie die Konfigurationsdatei mit „sites-enabled“

1. Erstellen Sie einen symbolischen Link im Verzeichnis /etc/nginx/sites-enabled/, um eine Verknüpfung mit der soeben erstellten Konfigurationsdatei herzustellen.

sudo systemctl restart nginx

Dann testen Sie Ihre Nginx-Konfiguration:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Wenn keine Fehler vorliegen, starten Sie Nginx neu:

location ~* .(js|css|png|jpeg|jpg|gif)$ {
  expires 1y;
  add_header Cache-Control "public, no-transform";
}

2. Sie können jetzt auf Ihre Anwendung zugreifen und sie unter einer öffentlichen IP-Adresse oder einem Domänennamen bereitstellen.

Teil 2: Nginx-Konfiguration optimieren

Nachdem wir die Anwendung nun erfolgreich auf Nginx bereitgestellt haben, müssen wir einige notwendige Optimierungen und Konfigurationen vornehmen, um die beste Leistung zu erzielen.

Hier sind einige Schritte, die Sie unternehmen können, um Ihre Nginx-Konfiguration zu optimieren:

Gzip-Komprimierung aktivieren

Gzip-Komprimierung kann Bandbreite sparen und das Laden von Seiten beschleunigen. Um die Gzip-Komprimierung zu aktivieren, fügen Sie den folgenden Code in Ihre Nginx-Konfigurationsdatei ein:

listen 443 ssl http2;

Caching aktivieren

In einer Vue-Anwendung ändern sich die meisten statischen Ressourcen, wie JavaScript- und CSS-Dateien, nach der Bereitstellung selten. Daher kann Browser-Caching aktiviert werden, um die Leistung zu verbessern und die Bandbreitennutzung zu reduzieren.

Um das Caching zu aktivieren, verwenden Sie die folgende Konfigurationsanweisung:

listen 443 ssl http2;
ssl_certificate /path/to/cert.crt;
ssl_certificate_key /path/to/key.key;

Diese Anweisung aktiviert das Browser-Caching und stellt den Browser so ein, dass er ein Jahr lang dieselben Cache-Dateien verwendet.

Verwenden Sie HTTP/2

HTTP/2 ist ein fortschrittliches Protokoll, das die Geschwindigkeit und Leistung Ihrer Website verbessert. Um HTTP/2 zu aktivieren, fügen Sie die folgende Zeile zu Ihrer Nginx-Konfigurationsdatei hinzu:

rrreee

SSL aktivieren

Die Aktivierung von SSL verschlüsselt übertragene Daten sicher und verbessert die Sicherheit Ihrer Anwendung. Um SSL zu aktivieren, führen Sie die folgenden Schritte aus: 🎜🎜a. Installieren Sie ein SSL-Zertifikat. 🎜🎜 Sie können ein SSL-Zertifikat erwerben oder selbst signieren oder eine kostenlose Zertifizierungsstelle wie Let’s Encrypt verwenden. Laden Sie dann das SSL-Zertifikat und den Schlüssel auf den Server hoch. 🎜🎜b. Konfigurieren Sie SSL🎜🎜Fügen Sie in der Nginx-Konfigurationsdatei die folgende Zeile hinzu, um SSL zu aktivieren: 🎜rrreee🎜Dadurch wird der Nginx-lauschende HTTPS-Port definiert und Ihr SSL-Zertifikat und -Schlüssel verwendet. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir besprochen, wie eine Vue-Anwendung auf Nginx bereitgestellt wird, und einige notwendige Optimierungen und Konfigurationen vorgenommen, um die beste Leistung zu erzielen. Wir haben gelernt, wie man statische Ressourcen generiert, Nginx-Konfigurationsdateien erstellt und SSL, Gzip und Caching optimiert. Sie können diese Techniken nun auf die Anwendung anwenden, die Sie unterwegs erstellt haben, um sie in einer Produktionsumgebung bereitzustellen. 🎜

Das obige ist der detaillierte Inhalt vonLinux Vue wird auf Nginx bereitgestellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!