Object Storage Service：教程樣本：通過靜態網站受管理的部署單頁應用

什麼是單頁應用

單頁應用是只有一個Web頁面的應用，是一種網路應用程式或網站的模型。通過動態重寫當前頁面與使用者進行互動，而不是從伺服器重新載入整個新頁面。單頁應用可以避免因頁面之間的切換中斷使用者體驗，使應用程式更像一個傳統型應用程式。在單頁應用中，所有必要的代碼（HTML、JavaScript和CSS）都通過單個頁面的載入而檢索，或者通常為了響應使用者操作等需要，動態載入適當的資源並添加到頁面。

前提條件

• 已安裝Node.js SDK。具體操作，請參見安裝。

• 已建立Bucket。本教程以建立名為examplebucket的Bucket為例，具體操作，請參見建立Bucket。

• 已為名為examplebucket綁定自訂網域名example.com。具體操作，請參見綁定自訂網域名。

步驟一：使用React快速建立單頁應用

1. 開啟命令列終端cmd或者PowerShell，本教程以cmd為例。

2. 執行以下命令建立專案。

   npx create-react-app spa-demo

   返回樣本以下：

   Need to install the following packages:
   create-react-app
   Ok to proceed? (y)

3. 在Ok to proceed? (y)後輸入y，然後斷行符號。

   等待幾分鐘後專案將自動建立完成，同時會自動安裝依賴。

4. 執行以下命令進入已建立的專案。

   cd spa-demo

5. 執行以下命令預覽已建立的專案。

   npm run start

   App.js檔案如下圖所示：

6. 調試並預覽檢查無誤後，執行以下命令打包生產環境代碼。

   npm run build

   專案根目錄下產生build目錄。

步驟二：為examplebucket配置靜態網站託管

1. 登入OSS管理主控台。

2. 單擊Bucket列表，然後單擊examplebucket。

3. 在左側導覽列，選擇資料管理 > 靜態頁面。

4. 在靜態頁面，單擊設定，按如下說明配置各項參數。

   子目錄首頁僅影響訪問根網域名稱下任何一個以正斜線（/）結尾的URL的行為，您可以結合實際業務需求，選擇是否開通子目錄首頁。

   • 開通子目錄

     參數	說明
     預設首頁	預設首頁是您通過瀏覽器訪問靜態網站網域名稱時，OSS返回的網站首頁。此處設定為index.html。
     子目錄首頁	選擇開通。開通子目錄首頁後，訪問靜態網站根網域名稱時，返回根目錄預設首頁。訪問根網域名稱下以正斜線（/）結尾的URL時會返回對應目錄的預設首頁。
     檔案404規則	選擇Redirect。
     預設404頁	訪問Bucket內檔案出現404錯誤時，OSS返回的錯誤頁面。當前配置用於前端單頁應用，請將預設404頁也配置為應用入口，即與預設首頁相同的index.html。
     錯誤文檔響應碼	配置返回錯誤文檔時的HTTP響應碼為200。

   • 不開通子目錄

     參數	說明
     預設首頁	預設首頁是您通過瀏覽器訪問靜態網站網域名稱時，OSS返回的網站首頁。此處設定為index.html。
     子目錄首頁	選擇不開通，此時訪問靜態網站根網域名稱或者根網域名稱下任何一個以正斜線（/）結尾的URL都會返回根目錄預設首頁。
     預設404頁	訪問Bucket內檔案出現404錯誤時，OSS返回的錯誤頁面。當前配置用於前端單頁應用，請將預設404頁也配置為應用入口，即與預設首頁相同的index.html。
     錯誤文檔響應碼	配置返回錯誤文檔時的HTTP響應碼為200。

5. 單擊儲存。

步驟三：上傳build目錄下的所有檔案

1. 單擊Bucket列表，然後單擊examplebucket。

2. 在左側導覽列，選擇文件管理>檔案清單。

3. 在檔案清單頁面，單擊上傳檔案。

4. 在上傳檔案面板，按以下說明配置各項參數，其他參數保留預設配置。

   參數	說明
   上傳到	選中目前的目錄。
   檔案ACL	設定檔案讀寫權限ACL為公用讀取。
   待上傳檔案	單擊掃描檔案夾，選中React產生的spa-demo專案中build目錄下的所有檔案。 重要 僅上傳build目錄下的所有檔案到Bucket根目錄，不需要上傳build目錄。否則，通過自訂網域名訪問單頁應用時無法正常跳轉。

5. 單擊上傳。

   此時，您可以在上傳列表頁簽查看各個檔案的上傳進度。上傳完成後，您可以在examplebucket的檔案清單下找到名為index.html檔案。

步驟四：通過自訂網域名訪問已部署的單頁應用

1. 開啟瀏覽器。

2. 本教程以自訂網域名example.com為例，輸入https://example.com/index.html，訪問單頁應用。

   效果如下圖所示：

常見問題

• 部署好應用之後，切換路由能成功渲染，但頁面重新整理會出現404報錯，怎麼解決？

  原因可能是配置靜態網站託管時，預設首頁和預設404頁配置有誤。請確保預設首頁和預設404頁均配置為index.html。

• 切換路由之後，頁面能正常顯示。但HTTP狀態代碼依然為404，怎樣才能正常返回200？

  原因可能是配置靜態網站託管時，錯誤文檔響應碼未配置或配置錯誤。請確保錯誤文檔響應碼配置為200。

• 靜態網站設定之後檔案直接下載怎麼辦？

  您可以設定訪問OSS檔案時是預覽行為。更多資訊，請參見如何配置訪問OSS檔案時是預覽行為？。