部署 Web 靜態檔案

注意

Azure Spring Apps 是 Azure Spring Cloud 服務的新名稱。 雖然服務有新的名稱,但在我們努力更新資產,例如螢幕快照、影片和圖表時,您會在某些地方看到舊名稱一段時間。

本文適用於:❌ 基本/標準✔️企業

本文說明如何使用 Tanzu Web Server buildpack,將靜態檔案部署至 Azure Spring Apps 企業版方案實例。 如果您有純粹用來存放以您選擇的 JavaScript 架構建置的靜態檔案,例如 HTML、CSS 或前端應用程式的應用程式,這個方法就很有用。 您可以使用自動設定的 Web 伺服器 (HTTPD 和 NGINX) 直接部署這些應用程式,以提供這些資產。

必要條件

  • 已布建的 Azure Spring Apps 企業版方案實例。 如需詳細資訊,請參閱 快速入門:使用企業方案建置和部署應用程式至 Azure Spring Apps。
  • 在 Azure Spring Apps 中執行的一或多個應用程式。
  • Azure CLI 2.45.0 版或更高版本。
  • 靜態檔案或動態前端應用程式 - 例如 React 應用程式。

部署靜態檔案

注意

本文著重於描述部署組態,以及針對 Web 靜態檔案部署進行疑難解答。 若要瞭解 Azure Spring Apps 企業版方案的一般建置和部署案例,請參閱使用 Tanzu Build Service 和 How to deploy polyglot 應用程式的依需求建置服務一節

您可以使用 NGINX 或 HTTPD Web 伺服器,以下列方式將靜態檔案部署至 Azure Spring Apps:

  • 您可以直接部署靜態檔案。 Azure Spring Apps 會自動設定指定的網頁伺服器來提供靜態檔案。
  • 您可以在您選擇的 JavaScript 架構中建立前端應用程式,然後從原始程式碼部署您的動態前端應用程式。 Azure Spring Apps 會將您的應用程式建置為靜態內容,並使用您設定的 Web 伺服器來提供靜態檔案。

您也可以建立伺服器組態檔來自定義網頁伺服器。

部署範例

本節中的 Azure CLI 範例顯示針對兩個容器登錄案例建置和部署靜態檔案:

  • Azure Spring Apps 受控容器登錄。
  • 使用者管理的容器登錄。

直接建置和部署靜態檔案

此範例會使用自動產生的預設伺服器組態檔,直接部署靜態檔案。

下列命令會部署靜態檔案:

az spring app deploy
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code> \
    --build-env BP_WEB_SERVER=nginx

如需使用環境變數的相關信息,請參閱 設定自動產生的伺服器組態檔 一節。

建置前端應用程式並將其部署為靜態內容

此範例會從原始程式碼部署動態前端應用程式。

下列命令會部署應用程式:

az spring app deploy \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code> \
    --build-env BP_WEB_SERVER=nginx BP_NODE_RUN_SCRIPTS=build BP_WEB_SERVER_ROOT=build

使用自定義組態檔建置和部署靜態檔案

此範例會使用自定義的伺服器組態檔來部署靜態檔案。

下列命令會部署應用程式:

az spring app deploy \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --source-path <path-to-source-code>

如需詳細資訊,請參閱本文的 <使用自定義伺服器組態檔 >一節。

範例指令碼

注意

範例程式代碼是由派克托 開放原始碼 社群維護。

Paketo buildpacks 範例示範數種不同應用程式類型的常見使用案例,包括下列使用案例:

  • 使用 來選取 HTTPD 或 NGINX 的預設伺服器組態檔來提供靜態檔案。BP_WEB_SERVER
  • 使用 Node 封裝管理員,將 React 應用程式建置至 Web 伺服器可以提供的靜態檔案中。 使用下列步驟:
    1. 在package.json檔案的 屬性下scripts定義腳本,以建置生產就緒的靜態資產。 對於 React,它是 build
    2. 瞭解在建置腳本執行之後儲存靜態資產的位置。 針對 React,靜態資產預設會儲存在 中 ./build
    3. 設定 BP_NODE_RUN_SCRIPTS 為組建腳本的名稱。
    4. 設定 BP_WEB_SERVER_ROOT 為組建輸出目錄。
  • 使用 HTTPDNGINX,以您自己的伺服器組態檔提供靜態檔案。

設定自動產生的伺服器組態檔

您可以使用環境變數來修改自動產生的伺服器組態檔。 下表顯示支持的環境變數。

環境變數 支援的值 描述
BP_WEB_SERVER nginxHTTPd 指定 Nginx 的 Web 伺服器類型,針對 Apache HTTP 伺服器指定 nginx。 使用自動產生的伺服器組態檔時需要 。
BP_WEB_SERVER_ROOT 相對於 /workspace 的絕對檔案路徑或檔案路徑 設定靜態檔案的根目錄。 預設值為 public
BP_WEB_SERVER_ENABLE_PUSH_STATE [True][False] 啟用應用程式的推送狀態路由。 不論要求的路由為何, index.html 一律會提供服務。 適用於單頁 Web 應用程式。
BP_WEB_SERVER_FORCE_HTTPS [True][False] 將所有要求重新導向至使用 HTTPS 通訊協定,以強制執行伺服器連線的 HTTPS。

不支援下列環境變數。

  • BP_LIVE_RELOAD_ENABLED
  • BP_NGINX_VERSION
  • BP_HTTPD_VERSION

使用自定義的伺服器組態檔

您可以使用自訂的伺服器組態檔來設定網頁伺服器。 下表顯示群組態檔路徑:

網頁伺服器 默認組態檔路徑 如何自定義伺服器組態檔路徑
nginx 原始程式碼根路徑底下的 nginx.conf 使用環境變數 BP_NGINX_CONF_LOCATION 來指定組態檔名稱。 將檔案放在原始程式碼的根路徑之下。
httpd 原始程式碼根路徑底下的 HTTPd.conf 不支援。

您的組態檔必須符合下表所述的限制。

組態 描述 Nginx 組態 Httpd 組態
接聽埠 網頁伺服器必須在埠 8080 上接聽。 服務會檢查 TCP 上的埠是否就緒,以及其是否為實時狀態。 您必須在組態檔中使用樣板化變數 PORT 。 啟動網頁伺服器時會插入適當的埠號碼。 listen {{PORT}} Listen "${PORT}"
記錄路徑 設定主控台的記錄路徑。 access_log /dev/stdout, error_log stderr ErrorLog /proc/self/fd/2
具有寫入許可權的檔案路徑 Web 伺服器已獲授與 /tmp 目錄的寫入許可權。 設定完整路徑需要 /tmp 目錄下的寫入許可權。 例如: client_body_temp_path /tmp/client_body_temp
用戶端要求可接受的主體大小上限 網頁伺服器位於閘道後方。 用戶端要求的接受本文大小上限在閘道中設定為 500 m,而 Web 伺服器的值必須小於 500 m。 client_max_body_size 應該小於 500 米。 LimitRequestBody 應該小於 500 米。

Buildpack 系結

將靜態檔案部署至 Azure Spring Apps 企業版方案支援 Dynatrace buildpack 系結。 不支援 buildpack 系 htpasswd 結。

如需詳細資訊,請參閱 如何設定 APM 整合和 CA 憑證

常見的建置和部署錯誤

將靜態檔案部署到 Azure Spring Apps Enterprise 實例可能會產生下列常見的建置錯誤:

  • ERROR: No buildpack groups passed detection.
  • ERROR: Please check that you're running against the correct path.
  • ERROR: failed to detect: no buildpacks participating

這些錯誤的根本原因是未指定網頁伺服器類型。 若要解決這些錯誤,請將環境變數 BP_WEB_SERVER 設定為 nginxHTTPd

下表說明將靜態檔案部署至 Azure Spring Apps Enterprise 時常見的部署錯誤。

錯誤訊息 根本原因 解決方案
112404: Exit code 0: purposely stopped, please refer to https://aka.ms/exitcode 網頁伺服器無法啟動。 驗證您的伺服器組態檔,以查看是否有設定錯誤。 然後,檢查您的組態檔是否符合使用自定義伺服器組態檔一節中所述的限制。
mkdir() "/var/client_body_temp" failed (13: Permission denied) 網頁伺服器沒有指定路徑的寫入許可權。 設定目錄 /tmp 底下的路徑;例如:/tmp/client_body_temp

下一步