AI 英語交流伙伴 / 2 持續部署

持續部署到 Vercel

今天,我們繼續為我們的 web app 準備脚手架。我們還沒有寫任何代碼,所以現在是設置持續部署的最好的時機,因為我們還沒有任何錯誤。我們今天的目標是建立一個快速的反饋循環,如果有任何東西破壞了我們的網站,使其無法構建和部署,它將通知我們。

設置 Vercel

我們將把我們的網站部署到 Vercel。我喜歡使用 Vercel,因為它對非商業項目是免費的,而且非常容易設置。關於 SvelteKit,另一個好處是 Svelte 和 SvelteKit 的創建者 Rich Harris 在 Vercel 工作。這意味著 Vercel 將提供一流的支持來修復錯誤,並且測試版功能將首先在 Vercel 上支持。如果 Next.js 是你的首選框架,那麼 Vercel 也是一個很好的選擇。如果你的選擇是其他框架,比如 Nuxt,那麼你應該四處看看,決定哪個選項是你的用例的最佳選擇。無論你選擇哪一個,都要尋找一個可以輕鬆連接到你的 GitHub 代碼庫並在每次 push 到每個 branch 時自動部署你的網站的選項。

如何開始:

如果你還沒有,請將你的代碼 commit 到 GitHub 上的一個新的 repository。 創建一個 Vercel 帳戶 - 我建議你使用你的 GitHub 帳戶登入,以便輕鬆地將你的 GitHub repositories 連接到 Vercel。 通過 "Add New Project" 將你的 repo 連接到 Vercel,然後選擇你的 repo。他們的網站非常用戶友好,但也會變化,所以我不會試圖獲得完美的截圖,但你會很快進入配置他們的 GitHub App: configure app 然後你將選擇你想要連接到 Vercel 的 repository: select repo

這就是你需要做的全部。之後,你將在你的 repository 主頁上看到 Vercel 部署: deployments

如果你創建pull request,你會注意到每個 push 是如何部署的,並且將是對 repository 的狀態檢查 (status checks) 帶有 push 特定測試鏈接: pull request

Vercel GitHub app 還將留下評論,提供特定於 branch 的測試鏈接,例如,“polylingual.dev” repo上的 “day-2” branch 將具有如下測試鏈接:https://polylingual-dev-git - day-2-polylingual-development.vercel.app/。 successful deployment

如果你的構建失敗,你可以點擊 "Details" 鏈接來查看構建日誌並調試問題: failed deployment

默認情況下,如果失敗,你應該會收到 GitHub 通知,如果需要,你還可以設置其他通知,比如 Slack 或電子郵件。你可以從他們的文檔中了解更多關於這個和其他功能的信息。

今天的課程就到這裡。實際上,選擇 Vercel 不是我在這裡的主要目的。我的主要觀點是,我們應該選擇一種 hosting 策略,它會在每次代碼更改時構建我們的 web app。這樣我們就可以在我們破壞某些東西的那一刻得到通知。當我們看到紅色的 "x" 時,這是一個信號,要停止一切,修復構建,然後繼續進行。使用 Vercel 只是一種簡單的方法,開始非常幫助的習慣。