ホームページ > 記事 > ウェブフロントエンド > nginxにデプロイされたlinux vue
はじめに
現代の Web 開発では、通常、Web アプリケーションの作成と管理に、いくつかの人気のある使いやすいツールが使用されています。これらには、Linux、Vue、Nginx が含まれます。
Linux は、サーバー側の展開に一般的に使用されるオープン ソース オペレーティング システムです。 Vue は、クライアント側 Web アプリケーションを開発するための一般的なフロントエンド JavaScript フレームワークです。 Nginx は、静的アセットをホストし、リバース プロキシ経由で適切なアプリケーションにリクエストをルーティングするために使用できる高性能 Web サーバーです。
この記事では、Vue アプリケーションを Nginx にデプロイし、最適なパフォーマンスを得るために必要な構成と最適化を行う方法について説明します。実際の Vue アプリケーションを例として使用し、Linux と Nginx がすでにインストールされていることを前提とします。
パート 1: 準備
アプリケーションを Nginx にデプロイする前に、いくつかの準備を行う必要があります。開始する前に実行する必要があるいくつかの手順を次に示します。
次のコマンドを実行して、Vue アプリケーションの静的リソースを生成します:
npm run build
これにより、dist# が作成されます。 # # サーバーにデプロイするための静的ファイルを含むディレクトリ。
/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 ディレクティブは、リクエスト ルーティング ルールを構成するために使用されます。
/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 on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
location ~* .(js|css|png|jpeg|jpg|gif)$ { expires 1y; add_header Cache-Control "public, no-transform"; }このディレクティブはブラウザのキャッシュを有効にし、同じキャッシュ ファイルを 1 年間使用するようにブラウザを設定します。
listen 443 ssl http2;
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 サイトの他の関連記事を参照してください。