linux vue部署到nginx

前言

在現代 web 開發中，通常使用一些流行且易於使用的工具來建立和管理 web 應用程式。其中包括 Linux、Vue 和 Nginx。

Linux 是一個開源的作業系統，通常用於伺服器端部署。 Vue 是一個流行的前端 JavaScript 框架，用於開發客戶端 web 應用程式。 Nginx 是一個高效能的 web 伺服器，可用於託管靜態資產，並透過反向代理將請求路由到適當的應用程式。

在本文中，我們將討論如何將 Vue 應用程式部署到 Nginx 上，並進行一些必要的設定和最佳化以獲得最佳效能。我們將使用一個實際的 Vue 應用程式作為例子，並假設您已經安裝了 Linux 和 Nginx。

部分一：準備工作

在將應用程式部署到 Nginx 之前，我們需要執行一些準備工作。以下是一些必要的步驟，您應該在開始之前執行。

1. 產生靜態資源

執行下列命令，產生Vue 應用程式的靜態資源：

npm run build

這將建立一個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/ 目錄中建立符號鏈接，以連結到我們剛剛建立的設定檔。

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

然後測試您的Nginx 配置：

sudo nginx -t

如果沒有錯誤，重新啟動Nginx：

sudo systemctl restart nginx

現在可以存取您的應用程序，並將應用程式部署到公共IP 位址或網域名稱。

部分二：最佳化 Nginx 設定

現在我們已經成功將應用程式部署到 Nginx 上，我們需要進行一些必要的最佳化和配置，以獲得最佳效能。

以下是一些可以最佳化 Nginx 設定的步驟：

1. 開啟 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;

2. 啟用快取

在Vue 應用程式中，大多數靜態資源（如JavaScript 和CSS 檔案）在部署後很少更改。因此，可以啟用瀏覽器快取以提高效能並減少頻寬使用。

要啟用緩存，請使用以下設定指令：

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

此指令啟用瀏覽器快取，並設定瀏覽器在一年內使用相同的快取檔案。

3. 使用 HTTP/2

HTTP/2 是一種先進的協議，可提高網站的速度和效能。若要啟用HTTP/2，請在Nginx 設定檔中新增以下行：

listen 443 ssl http2;

4. #啟用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 和快取的最佳化。現在，您可以將這些技術應用於您跟著教程所製作的應用程序，以將其部署到生產環境中。

以上是linux vue部署到nginx的詳細內容。更多資訊請關注PHP中文網其他相關文章！