今天這篇文章想來和大家分享關於我把我的部落格(就是你現在在看的這個網站)從 Vercel 搬到另一個我自己開發的服務部署平台 Zeabur 的故事。
這個部落格的文章
和常見的部落格不同,我沒有使用 Wordpress、Hexo、Hugo 或 Gatsby 之類的 Static Site Generator 來製作,也沒有使用其他現成的部落格框架,原因是我想要這個部落格有 100% 的完全客製化能力,讓我可以加入任何想要的功能。
然而,畢竟是一個部落格,最關鍵的功能 —— 「寫文章」是不可避免的,除了一些基於 HTML 的 WYSIWYG 編輯器外,最常見的方案應該就是 Markdown 了,能夠用純文字的格式來編寫和儲存豐富格式的文章。
為了讓我的文章裡面可以放一些除了文字、圖片、列表、超連結 ... 之類 Markdown 原生以外的元素,我選擇了使用 MDX 作為部落格裡面儲存和渲染文章內容的技術。剛好我的上一篇文章 「一起來做筆記!什麼是 Markdown,什麼是 MDX ? 」就是在介紹這個內容,還沒看過的讀者一定要去看看哦!
文章之外的附加功能
有了一個能夠撰寫及儲存文章的方案以後,我還想給部落格加一些能夠和讀者互動的功能 —— 按讚和留言。畢竟只要做過內容創作就知道,能夠從受眾身上獲得回饋,才有不斷創作的動力。
為了實現這些功能,我幫部落格接入了 MongoDB 資料庫,搭配 Next.js 的 API 路由 功能作為簡單的後端 API。這樣一來大家就可以幫我的文章按讚或留言了(歡迎在本文底下試用這些功能 XD)
如果讀者也是正在學習 React 或 Next.js 框架的前端工程師,我的這個部落格是開源的,你可以在 https://github.com/yuaanlin/yuanlin.dev 找到這些功能的程式碼。也歡迎大家幫忙進來按 Star 或是開 Issue 提出優化建議,或是要 fork 過去改成自己的部落格也都可以~
一開始的部署方式
既然這個部落格是用 Next.js 開發的,一開始我理所當然會選擇 Vercel 來部署,畢竟身為 Vercel 的愛好者,我還幫忙寫了一篇部落格文章來推廣 XD
但問題來了,Vercel 他只是一個部署網站的平台,但正如我前面提到的,我的部落格還需要一個 MongoDB 資料庫,怎麼辦呢? 所以我就又去 MongoDB Atlas 開一個雲端 MongoDB 資料庫,然後從 Vercel 的設定頁面把 MongoDB Atlas 的連線資訊設定為環境變數,讓 Vercel 可以連線到資料庫。
呼,終於搞定了。接下來這個部落格就這樣營運了一陣子。
如果功能越來越多?
如果今天我們想部署的不只是 Next.js + MongoDB 呢?比如說我們用 Express 開發了一個 Websocket 後端服務,然後用 Vite 開發了聊天室的網頁前端,然後用 MySQL 來儲存聊天對話紀錄,再搭配 Redis 來實現分布式的狀態管理,再搭配一個 Object Storage 儲存使用者上傳的圖片,最後用 Kafka 和 ... (天馬行空,以下省略)
當我們的服務越來越完整,功能越來越強大,原本的部署方式就行不通了。 Vercel 雖然能夠部署 Serverless function 來做出簡單的後端功能,但我們簡單用 Express 做一個 Websocket 聊天室就沒辦法部署了。
或是如果我們想要 MySQL,就又要去 PlanetScale 開一個新的資料庫,或是去 Upstash 開一個 Redis 或 Kafka ... 在各種平台註冊好以後,還要再想盡辦法把他們全部連接在一起,然後每個月會有來自不同平台的帳單要扣款。
Zeabur 誕生了
作為一個全端外包開發者,上面的這個故事其實並不是完全的天馬行空,而是日常開發經常會遇到的問題。因此我決定開發一個能夠幫助我自己以及其他有一樣煩惱的開發者的一個服務部署平台 —— Zeabur。
和 Vercel 一樣,當我在 Zeabur 上選擇了我的部落格以後,他會自動偵測到我的部落格是 Next.js 開發的,所以我什麼額外的設定都不用做,他就能夠自動部署上線。 每當我 push 新的程式碼到 GitHub,Zeabur 也會自動幫我部署新版本。
然而,如同大家在上圖看到的,在我的 Next.js 服務的左邊有一個 MongoDB 服務,不需要去別的平台註冊帳號,直接在同一個畫面上按一下,我們就部署好一個 MongoDB 資料庫了。
更方便的是,不需要任何額外設定,MongoDB 的連線資訊已經自動傳入我的 Next.js 部落格了:
不是 Next.js ,其他框架可以嗎?
Zeabur 現在已經能夠部署所有主流的 Node.js 前後端開發框架:
甚至其他程式語言如 Go、Python、Ruby、php、Java、Deno 都能夠一鍵部署,自動偵測框架,不需要任何額外的設定。
結語
這篇文章主要是想以我自己的部落格作為一個例子,向大家介紹我最近正在開發的雲端服務部署平台 Zeabur,希望能夠這個平台在未來能夠幫助到越來越多的開發者,讓大家可以用更輕鬆的方式來部署更強大的專案。
同時,Zeabur 目前也還在很早期的開發階段,我們需要大家的使用心得來持續改進我們的服務,也很希望如果你和我一樣是有在寫文章(甚至是拍影片、錄 Podcast)的內容創作者,可以幫助我們讓更多開發者知道 Zeabur 這個平台 👍
有興趣的同學可以參考以下連結:
Zeabur GitHub (請幫我們按星星!)