nginxにデプロイされたlinux vue

はじめに

現代の Web 開発では、通常、Web アプリケーションの作成と管理に、いくつかの人気のある使いやすいツールが使用されています。これらには、Linux、Vue、Nginx が含まれます。

Linux は、サーバー側の展開に一般的に使用されるオープン ソース オペレーティング システムです。 Vue は、クライアント側 Web アプリケーションを開発するための一般的なフロントエンド JavaScript フレームワークです。 Nginx は、静的アセットをホストし、リバース プロキシ経由で適切なアプリケーションにリクエストをルーティングするために使用できる高性能 Web サーバーです。

この記事では、Vue アプリケーションを Nginx にデプロイし、最適なパフォーマンスを得るために必要な構成と最適化を行う方法について説明します。実際の Vue アプリケーションを例として使用し、Linux と Nginx がすでにインストールされていることを前提とします。

パート 1: 準備

アプリケーションを Nginx にデプロイする前に、いくつかの準備を行う必要があります。開始する前に実行する必要があるいくつかの手順を次に示します。

1. 静的リソースの生成

次のコマンドを実行して、Vue アプリケーションの静的リソースを生成します:

npm run build

これにより、dist# が作成されます。 # # サーバーにデプロイするための静的ファイルを含むディレクトリ。

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 ディレクティブは、リクエスト ルーティング ルールを構成するために使用されます。

設定ファイルを sites-enabled にリンクします。

/etc/nginx/sites-enabled/ ディレクトリにリンクするシンボリック リンクを作成します。作成したばかりの構成ファイルに追加します。

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

次に、Nginx 構成をテストします:

sudo nginx -t

エラーがなければ、Nginx を再起動します:

sudo systemctl restart nginx

これで、アプリケーションにアクセスし、アプリケーションをパブリック IP アドレスにデプロイできるようになります。またはドメイン名。

パート 2: Nginx 構成の最適化

アプリケーションを Nginx に正常にデプロイできたので、最高のパフォーマンスを得るために必要な最適化と構成を行う必要があります。

Nginx 構成を最適化するために実行できる手順をいくつか示します:

Gzip 圧縮をオンにする

Gzip 圧縮により帯域幅が節約され、ページが高速化されます。ロード中。 Gzip 圧縮を有効にするには、次のコードを Nginx 構成ファイルに追加します。

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

Enable Cache

Vue アプリケーションでは、JavaScript や CSS ファイルなどのほとんどの静的リソース）展開後に変更されることはほとんどありません。したがって、ブラウザーのキャッシュを有効にして、パフォーマンスを向上させ、帯域幅の使用量を削減できます。

キャッシュを有効にするには、次の構成ディレクティブを使用します。

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

このディレクティブはブラウザのキャッシュを有効にし、同じキャッシュ ファイルを 1 年間使用するようにブラウザを設定します。

HTTP/2 の使用

HTTP/2 は、Web サイトの速度とパフォーマンスを向上させる高度なプロトコルです。 HTTP/2 を有効にするには、Nginx 構成ファイルに次の行を追加します。

listen 443 ssl http2;

Enable SSL

SSL を有効にすると、送信されるデータが安全に暗号化され、アプリケーションのパフォーマンスのセキュリティが向上します。 SSL を有効にするには、次の手順を実行します:

a. SSL 証明書をインストールします

SSL 証明書を購入または自己署名するか、Let's Encrypt などの無料の認証局を使用できます。次に、SSL 証明書とキーをサーバーにアップロードします。

b. SSL の設定

Nginx 設定ファイルに次の行を追加して SSL を有効にします:

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

これにより、Nginx のリッスン HTTPS ポートが定義され、SSL 証明書が使用されます。そして鍵。

概要

この記事では、Vue アプリケーションを Nginx にデプロイする方法について説明し、最高のパフォーマンスを得るために必要な最適化と構成をいくつか行いました。静的リソースの生成、Nginx 構成ファイルの作成、SSL、Gzip、キャッシュの最適化の方法を学習しました。これで、構築したアプリケーションを実稼働環境にデプロイする過程で、これらのテクニックを適用できるようになります。

以上がnginxにデプロイされたlinux vueの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。