Yuanlin Lin

Blog

我把部落格從 Vercel 搬到自己開發的平台 Zeabur 了

Yuanlin Lin 林沅霖

2023-02-13

今天這篇文章想來和大家分享關於我把我的部落格(就是你現在在看的這個網站)從 Vercel 搬到另一個我自己開發的服務部署平台 Zeabur 的故事。

我開發的雲端服務部署平台 Zeabur

這個部落格的文章

和常見的部落格不同,我沒有使用 WordpressHexoHugoGatsby 之類的 Static Site Generator 來製作,也沒有使用其他現成的部落格框架,原因是我想要這個部落格有 100% 的完全客製化能力,讓我可以加入任何想要的功能。

然而,畢竟是一個部落格,最關鍵的功能 —— 「寫文章」是不可避免的,除了一些基於 HTML 的 WYSIWYG 編輯器外,最常見的方案應該就是 Markdown 了,能夠用純文字的格式來編寫和儲存豐富格式的文章。

為了讓我的文章裡面可以放一些除了文字、圖片、列表、超連結 ... 之類 Markdown 原生以外的元素,我選擇了使用 MDX 作為部落格裡面儲存和渲染文章內容的技術。剛好我的上一篇文章 「一起來做筆記!什麼是 Markdown,什麼是 MDX ? 」就是在介紹這個內容,還沒看過的讀者一定要去看看哦!

文章之外的附加功能

有了一個能夠撰寫及儲存文章的方案以後,我還想給部落格加一些能夠和讀者互動的功能 —— 按讚和留言。畢竟只要做過內容創作就知道,能夠從受眾身上獲得回饋,才有不斷創作的動力。

為了實現這些功能,我幫部落格接入了 MongoDB 資料庫,搭配 Next.jsAPI 路由 功能作為簡單的後端 API。這樣一來大家就可以幫我的文章按讚或留言了(歡迎在本文底下試用這些功能 XD)

如果讀者也是正在學習 React 或 Next.js 框架的前端工程師,我的這個部落格是開源的,你可以在 https://github.com/yuaanlin/yuanlin.dev 找到這些功能的程式碼。也歡迎大家幫忙進來按 Star 或是開 Issue 提出優化建議,或是要 fork 過去改成自己的部落格也都可以~

一開始的部署方式

既然這個部落格是用 Next.js 開發的,一開始我理所當然會選擇 Vercel 來部署,畢竟身為 Vercel 的愛好者,我還幫忙寫了一篇部落格文章來推廣 XD

把你的網站上線吧!超詳細 Vercel 網站部署教學

題外話:突然覺得應該幫部落格寫一個用來引用其他文章的 MDX 元件 XD

但問題來了,Vercel 他只是一個部署網站的平台,但正如我前面提到的,我的部落格還需要一個 MongoDB 資料庫,怎麼辦呢? 所以我就又去 MongoDB Atlas 開一個雲端 MongoDB 資料庫,然後從 Vercel 的設定頁面把 MongoDB Atlas 的連線資訊設定為環境變數,讓 Vercel 可以連線到資料庫。

MongoDB Atlas 是 MongoDB 官方的雲端資料庫服務

呼,終於搞定了。接下來這個部落格就這樣營運了一陣子。

如果功能越來越多?

如果今天我們想部署的不只是 Next.js + MongoDB 呢?比如說我們用 Express 開發了一個 Websocket 後端服務,然後用 Vite 開發了聊天室的網頁前端,然後用 MySQL 來儲存聊天對話紀錄,再搭配 Redis 來實現分布式的狀態管理,再搭配一個 Object Storage 儲存使用者上傳的圖片,最後用 Kafka 和 ... (天馬行空,以下省略)

當我們的服務越來越完整,功能越來越強大,原本的部署方式就行不通了。 Vercel 雖然能夠部署 Serverless function 來做出簡單的後端功能,但我們簡單用 Express 做一個 Websocket 聊天室就沒辦法部署了。

或是如果我們想要 MySQL,就又要去 PlanetScale 開一個新的資料庫,或是去 Upstash 開一個 Redis 或 Kafka ... 在各種平台註冊好以後,還要再想盡辦法把他們全部連接在一起,然後每個月會有來自不同平台的帳單要扣款。

Zeabur 誕生了

作為一個全端外包開發者,上面的這個故事其實並不是完全的天馬行空,而是日常開發經常會遇到的問題。因此我決定開發一個能夠幫助我自己以及其他有一樣煩惱的開發者的一個服務部署平台 —— Zeabur

Zeabur 可以把一個專案所有需要的服務部署在一起

和 Vercel 一樣,當我在 Zeabur 上選擇了我的部落格以後,他會自動偵測到我的部落格是 Next.js 開發的,所以我什麼額外的設定都不用做,他就能夠自動部署上線。 每當我 push 新的程式碼到 GitHub,Zeabur 也會自動幫我部署新版本。

然而,如同大家在上圖看到的,在我的 Next.js 服務的左邊有一個 MongoDB 服務,不需要去別的平台註冊帳號,直接在同一個畫面上按一下,我們就部署好一個 MongoDB 資料庫了。

更方便的是,不需要任何額外設定,MongoDB 的連線資訊已經自動傳入我的 Next.js 部落格了:

Zeabur 自動注入了 MONGODB_URI 環境變數,讓我的 Next.js 可以連線到資料庫

不是 Next.js ,其他框架可以嗎?

Zeabur 現在已經能夠部署所有主流的 Node.js 前後端開發框架:

甚至其他程式語言如 Go、Python、Ruby、php、Java、Deno 都能夠一鍵部署,自動偵測框架,不需要任何額外的設定。

結語

這篇文章主要是想以我自己的部落格作為一個例子,向大家介紹我最近正在開發的雲端服務部署平台 Zeabur,希望能夠這個平台在未來能夠幫助到越來越多的開發者,讓大家可以用更輕鬆的方式來部署更強大的專案。

同時,Zeabur 目前也還在很早期的開發階段,我們需要大家的使用心得來持續改進我們的服務,也很希望如果你和我一樣是有在寫文章(甚至是拍影片、錄 Podcast)的內容創作者,可以幫助我們讓更多開發者知道 Zeabur 這個平台 👍

有興趣的同學可以參考以下連結:

Zeabur 官方網站

Zeabur 官方教學文件(繁體中文)

Zeabur GitHub (請幫我們按星星!)

Zeabur 使用者 Discord 交流社群

分享你的看法

author-avatar

林沅霖

2023-02-13

歡迎大家幫我測試部落格的按讚和留言功能 😂

author-avatar

綠武舞 fez7yoe

2023-02-17

感謝大大,用 Zeabur 成功部署了 Twikoo 評論系統

author-avatar

綠武舞 fez7yoe

2023-02-17

話說留言上方的愛心,是可以一直按的嗎 (°▽°*)

author-avatar

林沅霖

2023-02-19

@綠武舞 fez7yoe 一個人可以按 10 次哈哈哈

author-avatar

Nomango L

2023-03-24

太酷了!看好你

author-avatar

連思涵

2023-04-15

太帥了🈹️

author-avatar

Johnny Fang

2023-04-16

一鍵佈署,酷,希望 Zeabur 可以造福新手。話說上面愛心功能,原以為按右邊一堆頭像的地方可以看有誰按愛心,結果按了後看不到,愛心數卻 +1 了XD,於是一路幫你按到 10 個。另外,留言功能似乎無法換行,所以比較長的留言就無法排版,提供你參考 😃

author-avatar

Tim Qian

2023-05-10

酷,希望博客可以添加 RSS 方便订阅

author-avatar

Holden Hu

2023-05-18

nice

author-avatar

孙悟元

2023-07-27

要七天一续了...呜呜呜

author-avatar

Alex Liao

2023-07-29

我在 Zeabur 上成功部屬了課表的後端,UI 流暢,整體操作直覺,是個很好的平台 (當然 free plan 有大加分🤣)。順便幫我的課表打個小廣告: https://github.com/NewMD-org

author-avatar

Ade Yan

2023-08-28

也來留言幫忙測試

author-avatar

關於作者

Yuanlin Lin 林沅霖

台灣桃園人,目前就讀浙江大學,主修計算機科學與技術,同時兼職外包全端開發工程師,熱愛產品設計與軟體開發。