部署 Web 靜態檔案

發行項
10/01/2024

注意

基本、標準和企業方案將從 2025 年 3 月中旬開始淘汰，並停用 3 年。建議您轉換至 Azure Container Apps。如需詳細資訊，請參閱 Azure Spring Apps 淘汰公告。

標準 耗用量和專用 方案將從 2024 年 9 月 30 日起淘汰，並在六個月後完成關閉。建議您轉換至 Azure Container Apps。如需詳細資訊，請參閱將 Azure Spring Apps 標準取用和專用方案遷移至 Azure Container Apps。

本文適用於： ❎基本/標準 ✅ 企業

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

必要條件

已佈建的 Azure Spring 應用程式企業版方案執行個體。如需詳細資訊，請參閱快速入門：使用 Enterprise 方案建置應用程式並將其部署至 Azure Spring 應用程式。
在 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 應用程式受控容器登錄。
使用者管理的容器登錄。

直接建置和部署靜態檔案

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

Azure Spring 應用程式受控容器登錄
使用者管理的容器登錄

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

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 build-service build create \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <build-name> \
    --source-path <path-to-source-code> \
    --build-env BP_WEB_SERVER=nginx

下列命令會更新現有的組建：

az spring build-service build update \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <build-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> \
    --container-image <your-container-image> \
    --container-registry <your-container-registry> \
    --registry-password <your-password> \
    --registry-username <your-username>

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

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

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

Azure Spring 應用程式受控容器登錄
使用者管理的容器登錄

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

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 build-service build create  \
    --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 build-service build update  \
    --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> \
    --container-image <your-container-image> \
    --container-registry <your-container-registry> \
    --registry-password <your-password> \
    --registry-username <your-username>

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

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

Azure Spring 應用程式受控容器登錄
使用者管理的容器登錄

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

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

下列命令會建立新的組建：

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

下列命令會更新現有的組建：

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

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

az spring app deploy \
    --resource-group <resource-group-name> \
    --service <Azure-Spring-Apps-instance-name> \
    --name <app-name> \
    --container-image <your-container-image> \
    --container-registry <your-container-registry> \
    --registry-password <your-password> \
    --registry-username <your-username>

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

範例指令碼

注意

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

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 為組建輸出目錄。
使用 HTTPD 或 NGINX，以您自己的伺服器組態檔提供靜態檔案。

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

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

環境變數	支援的值	描述
`BP_WEB_SERVER`	nginx 或 HTTPd	指定 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 設定為 nginx 或 HTTPd。

下表說明將靜態檔案部署至 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。

下一步

使用 Tanzu 建置服務

共用方式為

部署 Web 靜態檔案

必要條件

部署靜態檔案

部署範例

直接建置和部署靜態檔案

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

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

範例指令碼

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

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

Buildpack 系結

常見的建置和部署錯誤

下一步

意見反應

其他資源