跟我學 “Linux” 小程式 Web 版開發（五）：遇到的一些坑

在第一篇文章中，我提到，專案的自動部署是放在 now.sh 上，以方便預覽。但出於使用者體驗和速度的考慮，我們選擇了國內的七牛雲作為頁面的承載。不過，七牛畢竟是一個物件儲存，而不是一個專業的靜態託管業務，在使用上遇到了一些坑，還好經過努力都得到了解決。

七牛的 Bucket 名規則

和絕大多數的雲端計算廠商一樣，七牛也使用了 Bucket 來作為儲存的單元。

由於這個專案要掛 Linux.cn 的二級域名，於是我便讓老王建立了一個 Bucket，繫結域名，並透過七牛自帶的許可權控制機制，將其分發給我，讓我來使用。

在我的個人控制檯看到了這個 Bucket：

發現問題

我透過控制檯，手動上傳了生成的檔案後，確認沒有問題，就將相應的功能寫入到 Github Action 的 配置檔案（配置檔案點這裡）中，實現自動的部署。但在部署過程中，屢次報錯，不知道為什麼。在開啟了 DEBUG 資訊後發現，竟然是 Bucket 不存在（點我檢視 CI 的構建資訊）。

解決問題

和老王溝通以後才發現，是七牛的 Bucket 名機制的問題。

在七牛中進行許可權分配的時候，會要求你為 Bucket 設定一個別名，而且名字和已有的名字必須是不同的，這導致我看到的 Bucket 的名和老王建立的 Bucket 名是不相同的。

而我使用的 AK 和 SK 又是讓老王設定在 Github 後臺的 Secrets，Bucket 則是我自己設定的，所以就出現了問題。具體來說，是下面這張圖。

由於我填寫的 Bucket 是我自己看到的，而不是老王那邊真正的 Bucket 名稱，導致在上傳的時候，無法找到 Bucket。在將 Bucket 名稱替換為老王那邊看到的 Bucket 名稱後，問題得到解決。

七牛不支援 Vue Router 的 History 模式

在第二篇文章中，我提到了引入了 Vue 的 History 模式來最佳化體驗。但是，七牛本身作為一個儲存系統，沒有轉發的功能，也就導致其沒有辦法很好的支援 Vue History 模式。

在經過一番研究後，找到了解決方案，就是將 index 頁面，同時作為 404 頁面，這樣就可以實現從某種意義上的將所有請求都轉發給 Index 頁面。

你需要做的，就是將 index.html 複製一份，並重新命名為 errno-404，並和其他檔案一同上傳，這樣使用者請求一些不存在的檔案時，會自動將請求轉發給 errno-404， 又因為這個檔案的內容是索引檔案的內容，所以就可以實現了請求的轉發。

相關程式碼的實現，你可以在 https://github.com/LCTT/tldr.linux.cn/blob/master/.github/workflows/nodejs.yml 這裡找到。

總結

在這篇文章中，介紹了七牛的 Bucket 問題，以及 Vue Router History 模式在七牛下的解決方案。