Object Storage Service：使用React及靜態網站託管功能部署單頁應用

什麼是單頁應用

單頁應用是一種只有一個Web頁面的網路應用程式。通過動態重寫當前頁面與使用者互動，避免頁面切換中斷使用者體驗，使其更像傳統型應用程式。單頁應用的所有必要代碼（HTML、JavaScript和CSS）在初次載入時檢索，或根據使用者操作動態載入資源。

前提條件

• 已安裝Node.js SDK。

• 已建立Bucket。本教程以建立名為examplebucket的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. 在靜態頁面，單擊設定，按如下說明配置各項參數。

   參數	說明
   預設首頁	預設首頁是您通過瀏覽器訪問靜態網站網域名稱時，OSS返回的網站首頁。此處設定為index.html。
   子目錄首頁	根據實際業務需求選擇開通或不開通。 開通後，訪問根網域名稱下以正斜線（/）結尾的URL時會返回對應目錄的預設首頁。 不開通時，訪問根網域名稱或任何以正斜線（/）結尾的URL都會返回根目錄預設首頁。
   檔案404規則	選擇Redirect。
   預設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檔案時是預覽行為。