一開始會分享與 AI 釐清需求，討論出產品規格的技巧；並說明請 AI 撰寫程式前，我會如何設計專案的規則，讓 AI Agent 撰寫程式時，有參考的依據。

在準備好專案的規格與規則後，我才會讓 AI Agent 開始動手寫程式、完成專案。

但程式完成，不代表結果符合預期；你可能會遇到錯誤訊息、外觀破版，或是想要新增更多功能。這邊也會跟大家示範，可以如何引導 AI，讓專案更加完整。

在最後會分析整個專案架構，帶大家了解 AI Agent 到底幫我們做了哪些事；並透過 GitHub Pages 發布專案，讓你完成的網頁可以直接分享給朋友。

建議搭配影片觀看實際的操作步驟。

【Cursor 教學】Vibe Coding 實戰！從釐清需求到部署上線，一次搞懂完整開發流程 #spec #git #nodejs #deploy #ai #sdd

第一次接觸 Cursor 與 Vibe Coding 的朋友，可以先參考下面的文章：

➤ Cursor 教學：入門到實戰，用 AI Agent 自動化你的工作流！

➤ Cursor 教學：安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練

① 釐清需求，生成專案規格

我覺得 Vibe Coding 的目的，是要在短時間實踐你腦中的靈感，或解決現實生活遇到的痛點。

最小可行性方案

儘管每個人想完成的專案大小不同，但建議大家先釐清目標的「最小可行性方案」

把想要一口氣搞定大型專案的想法，從腦中拿掉；否則最終產生的結果，要馬不會動，要馬問題一堆。

後續反而要花更多的時間，一一排除這些問題。

製作純前端網頁

同時建議沒有程式背景的朋友，可以把「純前端網頁」，也就是這篇文章的範例，當成第一個 Vibe Coding 專案。

因為不涉及後端、資料庫，所以比較沒有資訊安全、隱私外洩的問題。

而且完成後可以直接把網頁分享給朋友，非常有成就感。

真的會用到的工具

另外專案的目標，最好設定為自己「真的會用到」的工具。

像大家現在看我上面的 YT 影片，可能覺得我侃侃而談，講得流暢不卡詞。

這不是因為我有多厲害，而是因為面前有一個提詞器；準備好逐字稿後，我只要錄影時照著念就好了。

一開始我是使用網路上，其他人分享的線上提詞器；但免費的廣告一堆，付費的又塞了一堆用不到的功能。

既然如此，我乾脆直接用 Vibe Coding 寫一款完全符合自己使用需求的提詞器，同時也讓大家免費使用。

新增空資料夾，來開始專案

我們要先透過討論釐清這個網站需要有的功能；因此這邊不使用 AI Agent，而是先切換到 Ask 的模式來討論。

我想要設計一個「純前端」的「提詞器」網頁
想要以「最小可行性方案 MVP」來進行設計
請從實際使用者的角度，將功能依據「必要、次要」的方式來分類
並告訴我使用者體驗最佳的操作流程

此時你會得到 AI 初步的規劃建議，如果你對結果不滿意，可以繼續討論。

假使覺得這個規劃可以接受，就可以把它轉換成方便網頁工程師理解的需求規格。

請扮演專業的 UI/UX 設計師，根據上面的討論
用下面的格式，回傳「具體、可執行」的網頁設計規格。
目標是幫助前端工程師能依據描述直接開始開發，內容需具備視覺與互動細節。

輸出格式：
# [頁面名稱]
- 功能簡述：（一句話概述頁面目的）
- 色系搭配：（主色、輔色、背景色、按鈕色）

## [由上而下列出使用元素]
請依畫面垂直順序列出元件，格式如下：
- 元件名稱（如：頂部導覽列 / 按鈕 / Banner 區塊）
  - 顏色：
  - 寬度：
  - 高度：
  - 字型大小與樣式（如有文字）：
  - 功能說明（該元件的目的）：
  - 若為[按鈕] → 說明觸發任務（例：「送出表單」「切換主題」）
  - 若為[功能按鍵] → 說明使用方式（例：「滑過顯示選單」「長按複製」）

⚠️ 請只輸出上述格式內容，不要附加分析、理由或額外說明。

透過這個提示詞，你就會得到一份非常詳盡的規格：

接下來切換成 Agent 模式，請他將前面對話的內容彙整成一個 Markdown 格式的 Prompt，儲存到專案「idea」的資料夾中。

將上面對話的結論彙整成 Markdown 格式的 Spec
請儲存到專案根目錄的「idea」資料夾中（若無自動建立），以好辨識的英文命名檔案
還不需要實作

之所以這麼做，就是產生一個可以讓我們手動編輯細節的規格文件，而且後續開發時可以回顧專案的設計。

儘管相關訊息可以從過去的對話找到，但相信我，你幾乎不會翻過去的對話內容。

儘管我們可以使用 AI Agent 模式，讓 AI 直接寫程式；但我更建議大家先討論出具體、明確的專案框架後，再請 AI 做事。

近幾年流行一個名詞，叫做 SDD（Specification-Driven Development），也就是規格驅動開發

比如今天的範例，就是用規格驅動 AI 開發，當目標足夠明確、解決的問題足夠具體時，你對生成的結果才有較高的掌握度，Vibe Coding 的成功率才會上升。

如果你在想這些步驟會不會花太多時間。

我可以用十多年的開發經驗跟你保證，如果初期沒寫好文件，日後要花好幾倍的時間去反覆修改。

② 設計規則，讓 AI 知道做事邏輯

今天的範例為「前端網頁」，可以只用簡單的 HTML、CSS、JavaScript 來完成。

但為了讓大家對「專案」有更具體的概念，所以我以三大前端框架 Vue、React、Angular 做示範。

在每個框架下，其實都還有各自的元件庫可以使用

• Vue：Element Plus、Vuetify、Naive UI
• React：Ant Design、Material UI、Chakra UI
• Angular：Angular Material、NG-ZORRO、PrimeNG

如果你對這些框架不熟悉，建議你可以先挑一個（ex: React + Material UI），未來 Vibe Coding 就直接指定他。

之所以這麼做，是因為每個框架與元件庫會遇到的坑都不一樣，假使每次都用不同的框架來製作專案。

那可能每個坑都得走一遍，這是一件非常沒有效率的事情。

建立專案的 Rules

接下我們要去建立專案的 Rules，讓他製作網站時知道要依循什麼規則。

點擊右上角的設定，選擇「Rules & Memories」，在 Project Rules 點擊新增。

檔名我就直接打「spec」，然後選擇 Always Apply 讓他每次對話都會觸發。

然後貼上設計的規則，在規則的部分，使用 Markdown 的語法撰寫就好，大家有興趣可以自行客製化，我只是提供一個基礎的範本。

## 使用的框架與元件庫
- 框架: React + Vite
- Node 版本: 加 .nvmrc
- 元件庫: Material UI

## 注意事項
- 請先搜尋網路上類似工具使用的套件
- 需考量 RWD 響應頁面
- 建立 .gitignore 來排除指定檔案上傳（ex: node_modules）

## README
- 專案介紹、功能列表、需求（Node 版本）、安裝與啟動、部署步驟、授權

## GitHub Pages 部署
- 使用 GitHub Actions
- 僅 master branch 觸發

③ 讓 AI Agent 參考規格、規則開發專案

在專案的需求規格以及規則都設計好後，接下來就可以用 AI Agent 設計初版網頁了。

建議開一個新對話，選擇 Agent 模式，你直接跟他說：

請參考「idea」的 SPEC，在專案根目錄新增「teleprompter-app」來實作專案

稍等一段時間，AI Agent 就會根據 SPEC 把這個網站製作出來。

如果他有自動幫你運行專案，你可以先請他關閉：

幫我關閉專案

這是因為在專案完成後，建議大家用新的 Cursor 視窗來來開啟這個專案，因為前面專案的規格與規則是為了產生這個專案而寫的，專案產生完畢後，繼續使用原有的規格、規則，可能會導致 AI 混亂。

另外在安裝專案套件與啟動專案這塊，你可以直接跟 AI 說：

幫我安裝套件並啟動專案

不過我是更建議大家打開 package.json 這個檔案，裡面有專案的各種資訊，像 scripts 這塊就是你可以透過 npm 執行的各種指令。

像是基礎的開發啟動是 npm run dev、想要建立靜態檔用 npm run build 。

如果想安裝套件，就用 npm install，他會安裝 dependencies 與 devDependencies 所列出的套件。

這邊我們打開終端機，在下面貼上指令「npm run dev」來啟動專案（具體指令請參考 scripts）

但提醒大家，不管我們前期的規格對功能、外型描述得多仔細；他完成的結果還是有可能會不如預期（比如影片範例就是一片空白）。

別忘記，生成式 AI 的結果本來就是充滿隨機性的。

這些是我為何建議先完成最小可行性產品，因為範圍小，所以釐清錯誤、調整內容相對方便。

一但範圍大了，你連怎麼調整都會沒有頭緒。

所以千萬別想著靠一個指令就生成一套系統，因為光生成一個簡單的網頁都會遇到很多問題了。

④ 解決問題、優化專案、新增功能

以前端網頁來說，問題通常分成兩大塊：

• 外型：你可能覺得頁面的版型、顏色、按鈕大小不符合你的預期
• 功能：有些操作起來不符合你的預期

解決問題

比如我想要讓提詞器播放順利，可以這麼說：

提詞器進入全螢幕後遇到以下問題：
1. 第二次點擊播放時，進度條會直接到底
2. 觸控板滑動時，頁面滑動與滑鼠感受不同
3. 滑到中間位置時按播放，感覺是更從前面的位置開始

優化專案

另外這個網頁有一些快捷鍵，我希望具體的使用方式可以放在首頁輸入框下方，這邊我就貼上一個比較模糊的指令，跟他說：

在首頁「輸入框」下方，新增「快捷鍵」提示的區塊，說明快捷鍵功能，請使用明顯的色系搭配

這個 Prompt 我就沒有指定具體色系、寬度、高度，由 AI 自動判斷。

等 AI 完成實作後，如果你不滿意，可以透過後續引導來微調細節。

新增功能

這邊我再新增一個功能來做示範，比如我希望貼上文字後，能有中文、英文、符號的字數統計，以及總共行數：

在首頁「輸入框」下方，增加「即時字數統計」的功能，在 1 列分 3 塊顯示
- 中文字數、中文標點符號數
- 英文單詞數、英文標點符號數
- 總共行數
希望文字有對應顏色搭配方便辨識

等 AI 搞定後，我們回到網頁，然後貼上文字，初步確認計算是否符合需求。

其實這個提詞器還有很多細節可以優化，這邊給大家看我最後調整了哪些細節：

• 在首頁的地方，我增加了自己社群的資訊
• 把「字數統計、快捷鍵說明」這兩個區塊都改成一行顯示，減少空間上的浪費
• 進入全螢幕畫面後，我把原本置中的內容改成靠左以符合我的習慣
• 因為錄製影片時前面會有腳架，所以我設計了間隔，讓文字不要被腳架擋住
• 設計了分段的功能，讓我可以調整講話節奏
• 右上角多了一個「倒數計時器」，讓我知道現在的稿子會講多久

我覺得 Vibe Coding 的魅力不是一鍵搞定，而是你可以根據實際需求快速迭代產品，但前提是你知道自己要的是什麼。

⑤ 了解 AI 生成的專案架構

接下來讓我們來瀏覽一下專案資料夾，了解 AI 幫我們做了哪些事情：

package.json

• scripts 這裡，有專案啟動、建立靜態資源的指令
• dependencies、devDependencies 則是專案使用套件的版本資訊

未來隨著專案規模擴大，你可能會遇到框架與套件、套件與套件之間相容性的問題，到時可能就會有鎖定版本、升降版本的需求，原則上就是在這邊調整的。

node_modules

「dependencies、devDependencies」列出的套件，都會被安裝到 node_moodules 的資料夾當中。

以 Node.js 的專案來說，通常體積最大的就是 node_moodules 這個資料夾。

因為套件版本已經有 package.json 控管，所以我們並不會把 node_moodules 上傳到 Git。

至於如何把他從 Git 版控中移除，就要談到 .gitignore 這個檔案了

.gitignore

這個檔案是用來告訴 Git 哪些檔案或資料夾不該被版本控制追蹤：

• MacOS 與 Windows 的系統暫存檔（.DS_Store/Thumbs.db）
• 儲存專案套件的 node_modules 資料夾
• 自動生成的結果，如 build 這類資料夾
• 像 .env 這種會儲存個人設定與密鑰的設定檔

README

這份文件會包含專案簡介、功能列表、安裝環境需求等資訊，可以幫助你快速掌握這個專案的重點資訊。

⑥ 用 GitHub Pages 免費發布網頁

確認專案都符合需求後，我們可以透過 GitHub Pages 發布專案，具體的執行流程可以參考專案中 「.github/workflow」 底下的 「deploy.yml」 設定檔。

在 GitHub 建立 Repository 後，會根據這邊設計的流程來發布專案。

建立 Repository

Repository 名稱輸入「teleprompter-app」，因為我們這個專案預計要發佈到 GitHub Pages，所以選擇 Public。

把電腦專案與 GitHub Repository 連接

在終端機輸入 git init 來初始化專案 git。

然後回到網頁，複製第一行 git add… 貼到專案的終端機，這樣我們就可以把電腦的專案與 GitHub 上面的專案連結。

確認有更新到 GitHub Repository

點擊提交，就會在自己的電腦記錄這個變更，但如果想更新到雲端，你需要點擊 Push 才會成功喔！

Push 後我們回到 GitHub 網頁，刷新一下頁面，如果能看到專案的內容，就代表你成功上傳專案了！

到 Actions 分頁查看部署的狀況

成功的話會有綠色勾勾，失敗則是紅色叉叉，會需要點進去釐清具體的錯誤原因。

錯誤通常都是因為：

• 靜態資源沒找到（static resource）
• 語法格式錯誤（line error）
• 套件相依問題（npm dependency）

把它複製起來貼到 AI 對話框，通常都能快速釐清問題並解決。

如果一切順利，點擊進去就會看到這個專案的網址嚕：

之後這個專案都是使用這個網址，把它點開來，順利的話，就可以看到成品嚕～

如果影片看到了這裡，可以幫我點個讚鼓勵一下，我會持續分享更多實用教學。

結語：Vibe Coding 的底層邏輯

過去學程式、寫程式，是一個痛苦，且漫長的週期。

沒學到一定的程度，你連小程式都開發不了。

但現在有了 AI，即使你不會寫程式，也能透過對話的方式，一步步完成專案的建立。

像今天這隻影片就分享了用 Vibe Coding 從 0 到 1 的完整過程，雖然專案的規模較小，不過日後面對更大型的專案時，底層邏輯與流程也是一樣的。

建議大家先從小專案開始練習、熟悉開發的流程；這樣日後想設計大專案時，會更有完整的概念。

另外隨著專案規模擴大，功能增加，你還需要搭配一些自動化測試的工具來輔助。

單靠人工的方式手動測試，不但沒效率，還很容易有遺漏的測試項目。

而且新功能的增加，有可能會導致舊功能壞掉，如果這隻 YT 影片的按讚破 200，我會再出一隻影片。

跟大家分享用 AI 撰寫測試程式的概念與技巧～

之所以製作一系列 Vibe Coding 影片，是為了避免大家踩到我遇過的「坑」。

如果你對 AI 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡

在課程中還會透過實際範例，分享哪些工具安裝後，可以提升 Vibe Coding 的效率。

因為其實有很多的需求，根本不需要寫程式，直接使用別人完成的套件就好。

你也不用煩惱該使用哪個套件，以及套件該如何使用；因為安裝好這些工具後，AI Agent 會根據你提出的需求，自行判斷這些工具使用的時機點。

建議搭配影片觀看實際的操作步驟。

【Cursor 教學】安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練 #python #nodejs #nvm #git #ai #vibecoding

文章大綱

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲
② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁
③ 加入 Git 版控，Vibe Coding 放心爆改

在這篇文章中，我會帶你一步步操作，讓你看完後也能打造出屬於自己的個人形象網站！

如果你是第一次接觸 Cursor，可以先看這隻影片。

文章開始前，先提醒一下大家：

AI Agent 的功能非常強大，給他權限後，不僅能自動安裝所需套件、執行指令，還能新增、修改甚至刪除檔案，因此使用時務必小心。

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲

第一個建議大家安裝的工具是 Python。

我們安裝 Python 不是為了寫程式，而是為了讓 AI Agent 在面對問題時，有更多的解決方案。

安裝 Python

安裝 Python 這塊，大家可以直接到官網，根據自己的作業系統下載安裝檔即可。

安裝步驟我就不再贅述，安裝完成後，我們可以在 Cursor 打開一個新的終端機，然後輸入

python --version

如果有出現版號，就代表有順利安裝，接下來讓我們進入到實戰階段。

若輸入 python –version 沒有反應，請改用 python3 –version

提取文件資訊

像有些人會把 Cursor 當成 RAG 的工具使用，透過他快速檢索、分析、統整資訊。

但他有一個痛點，就是 Cursor 只能檢索「文字檔」，比如 Markdown/txt 這類型的文件，或是 JavaScript/Python 這類的程式。

假如你的檔案類型是 Word/PPT/PDF，Cursor 預設是沒辦法幫你檢索的。

但如果有安裝 Python，這一切就變成了有可能，像這邊我在資料夾放了自己的講師履歷。

如果今天想把裡面的文件、圖片提取出來，執行下面的指令，AI Agent 就會安裝對應的套件來解析文件，並根據需求將文件儲存成對應的 Markdown 檔案。

資料夾有 pdf/ppt/doc 等多種格式的文件，我想請你把所有文件內的「文字」取出來，並確定可以用繁體中文顯示。
並建立一個「doc」的資料夾，用 Markdown 的格式儲存，並整理文字結構，設計合適的大標、中標、小標，方便閱讀。
如果 ppt/doc 裡面有圖片，請建立一個「img」的資料夾，圖片檔的命名，前綴請使用文件檔名。

在執行這段指令後，AI Agent 就會設計執行步驟，一開始會先安裝需要的 Python 套件，設計程式來提取文件裡面的文字、圖片。

稍等一下，我們就可以在「doc」與「img」資料夾中，看到文字與圖片有順利的提取出來；節省過去需要手動複製貼上的步驟。

把文字提取出來後，就可以把 Cursor 當成 RAG 工具來協助統整資料了；首先把「doc」資料夾拖到 AI 的對話框，這樣 AI 才知道他要處理的內容範圍

接著貼上下面的 Prompt:

我是個講師，正在準備個人形象網站的素材，內容要呈現如下資訊：
- 擅長領域: 搭配可以佐證的資訊
- 個人成就: 找出可數據化的成就，展現實力的強大
- 課程資訊: 課程主題、說明、價格、受眾、預期成果
請先建立「integrate」資料夾，並將上面提到的面向用 Markdown 格式建立，並像個善於推銷自己的 KOL 般，用自信的語氣撰寫文案

這段 Prompt 我先表明自己的身份是「講師」，要求他幫我整理出「擅長領域、個人成就、課程資訊」的資訊，以此做為「個人形象網站」的素材。

稍等一段時間，在「integrate」資料夾，就能看到 AI 按照需求，幫我們完成了資料的彙整。

用網頁爬蟲蒐集資訊

另外有些人會使用 AI 來蒐集網路資料，但許多網站是禁止爬蟲的。

這邊我打開 NotebookLM 示範給大家看，如果來源貼上用 ChatGPT 分享的對話，NotebookLM 的解析是錯誤的，甚至像是 Medium 這類部落格文章也無法辨識

但如果你請 AI Agent 幫你用 Selenium 這個網路爬蟲工具，模擬真實使用者就能夠完成這項爬蟲任務了。

大家可以嘗試下面的指令：

先建立「crawler」資料夾，然使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
取得下面 ChatGPT 分享連結的對話內容，這個網頁有反爬蟲設計，所以網頁開啟後，先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話
https://chatgpt.com/s/t_68d21677946081918576092e1c2d37c1
抓到對話後建立「output」，將資料寫入 Markdown 檔案，檔名使用網頁標題，並優化 Markdown 格式為好閱讀的結構

這段提示詞有 2 個重點：

• 要求 AI 使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
• 提醒他網頁有反爬蟲設計，所以網頁開啟後，要先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話

稍等一段時間，在 output 的資料夾中，就能看到 Cursor 突破原有的爬蟲限制，取得與 ChatGPT 的對話內容。

剛好透過這個範例提醒大家，雖然我們用 Vibe Coding 完成了這個爬蟲程式。

但他的成功是建立在指令非常明確之上，如果沒有網路爬蟲的基礎概念，AI 的失敗率是非常高的。

專業知識，是你在 AI 時代的護城河。

② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁

大多數人 Vibe Coding 的第一個作品，通常是網頁。

但如果你只是請 Cursor 幫你設計一個公司或是個人的形象網頁，那 AI 通常是使用簡單的 HTML 與 CSS 做基礎設計。

但如果安裝了 Node.js，你就可以直接使用知名的前端三大框架 Vue/React/Angular 來做設計。

這些框架生成出來的結果會更符合現代審美，未來想擴充功能時，也有豐富的套件可以直接使用。

安裝 Node.js

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝

• Mac 執行指令就可以安裝了

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

• 但如果你是 Windows，就需要下載 exe 檔來安裝

因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

nvm 安裝完成後，開啟終端機輸入 nvm -v，確認有成功安裝：

接下來輸入 nvm install –lts 來安裝最新版本的 Node.js

安裝完畢後，輸入 node -v 便可檢視剛剛安裝與現在使用的對應版本

完成上述步驟後，接下來就可以開始製作網頁了。

生成個人形象網頁

在前面，已經透過 AI 從 Word/PDF/PPT 裡面取出了個人資訊與相關照片，接下來我就直接示範如何用 Cursor 生成個人形象網頁的初版。

提醒大家，照片取出來後，建議給予分類、命名，這樣 AI 生成的結果會更好。

下面我們把生成網頁，要參考的文字、圖片資料夾拖到與 AI 的對話，然後貼上下面指令：

建立一個「personal-website」資料夾，我想要用 React 框架，設計一個個人形象網頁。
網頁一定要呈現的頁面如下：
- 頂部: 有個人形象照與基礎資訊
- 擅長領域: 切換不同領域時更換對應顏色
- 個人成就: 加上互動效果與圖片
- 課程資訊: 以卡片顯示，含說明與價格
- 聯絡洽詢: 頁面最下方
設計重點:
- RWD 響應式設計
- 有一致的色系規範
- 搭配對應圖片（請複製到專案並用相對路徑）
- 互動效果與視覺化呈現（例如 hover、切換）
整體水準:
- 高度專業感
- 資訊重點清晰
- 圖片長寬比例需考量版面配置

這段指令除了一開始有指定使用的前端框架為 React 外，下面有分成 3 塊指引：

1. 首先我跟他說明頁面要呈現的資訊
2. 接著提醒設計要注意的重點
3. 最後則是放上一些額外的需求

然後稍等一段時間，個人形象網頁的初版就完成了：

但還是要提醒大家，AI 只是加速製作網頁的過程，你要自己去確認細節是否符合自己的需求。

像是基本的文字描述、圖片擺放是否恰當，以及 RWD 的設計是否完善等等。

如果不知道在哪新增圖片、或是文字大小不知道怎麼調整，可以直接向 AI 詢問。

如果生成網頁的過程遇到 Bug，出現一堆紅字，那也非常正常。

你可以把錯誤訊息複製下來，貼到 AI 的對話窗，請他協助解決。

這方法能解決大多數的基礎問題，但如果遇到的錯誤太多，或是邏輯上的問題，就需要根據實際情境來處理，這邊會再找時間寫一篇文章分享。

③ 加入 Git 版控，Vibe Coding 放心爆改

Vibe Coding 時，你的每個指令都可能大幅調整專案的程式。

但 AI 修改的結果未必是你要的，甚至有時會把正常的功能給改壞了。

為了把改壞的內容救回來，我會建議大家安裝 Git，這個程式碼版本控制工具，並註冊 GitHub 帳號來管理專案。

安裝 Git

首先，我們可以到 Git 官網下載安裝檔

安裝好 Git 後，開啟 Cursor 終端機輸入指令 `git -v` 確認有正確安裝

接著用下面的指令來完成初始化設定，請自行調整成自己的英文名字與 email

git config --global user.name "baobao"
git config --global user.email "baobao@gmail.com"

然後產生 SSH Key，這是為了確保這台電腦有更新專案的權限，這邊也請自行調整成自己的 mail

ssh-keygen -t ed25519 -C "baobao@gmail.com"

SSH Key 生成出來後，可以透過下面的指令顯示公鑰，這會在下一個步驟用到

cat ~/.ssh/id_ed25519.pub

註冊 GitHub

這邊我們來到 GitHub 的官網，你可以直接使用 Gmail 來註冊。

註冊完成後，我們到帳號右上角的 Settings

選擇側邊欄的「SSH and GPG Keys」，點擊「New SSH Key」來新增剛剛生成的公鑰

接著建立一個新的 repository，用來儲存剛剛 AI 生成的網頁專案。

Repository name 可以自由輸入，這邊我打「personal-website」，Description 可保留空

如果你不想把這個 Repository 公開，可以在「Configuration」把 visibility 改成「Private」

把專案更新到 GitHub

接著回到剛剛 Cursor 幫我們生成的專案，在終端機輸入 git init 來初始化專案 git。

然後回到網頁，複製第一行 git add… 貼到專案的終端機，這樣我們就可以把電腦的專案與 GitHub 上面的專案連結。

然後點擊左上方的 Source Control，你可以手動在框框內輸入這次的更新內容，又或是點擊旁邊的星星按鈕，讓 AI 自動產生：

確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更；但如果想更新到雲端，你需要點擊 Push 才會成功喔！

Push 後我們回到 GitHub 網頁，刷新一下頁面，如果能看到專案的內容，就代表你成功了！

接著回到專案，嘗試與 AI 提出一個修改的需求

我希望可以有 Dark Mode 與 Light Mode 的設計

等 AI 執行完畢後，你可以在 Source Control 這個地方看到 Vibe Coding 更新的內容。

如果發現他改壞了，後續對話也無法解決，你可以全部放棄變更！

這邊我再給他一個要調整的內容

1. 形象照的圖片顯示上半部就好
2. 最上方個人簡介區塊下面要有留白
3. 我的成就裡面的圖片，可以根據不同比例完整顯示，要上下左右置中，多個地方用透明顯示
4. 職涯發展顧問、職涯發展的顏色太淡，不好辨識

如果對這次的調整滿意，就提交並發布一版保存；提交我們的 commit，點擊同步變更後他就會提交到 GitHub 雲端上面，以上是最基礎的 Git 操作。

他是一個很棒的版本控制工具，功能非常多，這邊放上常用指令，有興趣深入研究的朋友可以保存一下。

git init：在目前資料夾初始化 git
git clone <repo-url>：將遠端的專案下載到電腦
git checkout <branch>：切換到指定分支
git checkout -b <branch>：建立並切換到新分支
git merge <branch>：將指定分支合併到當前分支
git stash：暫存目前變更
git stash pop：取回並套用暫存變更
git push origin <branch>：將本地分支推送到遠端
git pull origin <branch>：拉取遠端分支並合併
git fetch：抓取遠端最新狀態

如果不知道指令怎麼下，別忘記有 AI 這個好夥伴可以詢問～

Vibe Coding 的工具很重要，但電腦品質也不能太差

在舉辦幾場 Vibe Coding 的工作坊後；我發現一件特別的事，明明指令相同，有些學員可以很快取得期待的結果，而有些學員則是很容易卡住。

一開始我以為是運氣問題，但深入討論後，發現瓶頸其實是出在電腦的硬體規格上面。

因為 Vibe Coding 會需要索引專案、執行指令、編譯程式，假如電腦的記憶體、CPU，以及硬碟的配置較差。

那你執行的每一步都要會花更多的時間，有時不是 AI 做不出來，只是速度慢到你以為他卡住了。

其實電腦也不需要買多好的，我前陣子買了一台一萬八的 Windows 電腦，CPU 是 Intel i7、記憶體 16 GB、硬碟用 SSD，跑起來就很夠用了。

結語：掌握讓 Vibe Coding 效率翻倍的工具

最後來回顧一下今天分享的 3 個工具：

1. 我們可以透過 Python 幫我們讀取不同格式的文件內容，甚至用網路爬蟲取得詳細資訊。
2. 安裝 Node.js 後，我們可以使用最流行前端框架，打造更專業、漂亮的網站。
3. 有了 Git 協助版本控管後，我們就可以用 Vibe Coding 大膽嘗試創意的想法

安裝這些工具不是為了讓你變成程式設計師，而是讓 AI 有更多武器來幫你解決問題。

看到這裡，大家應該可以感受到 Vibe Coding 的可能性與便利。

但還是要提醒大家，Vibe Coding 並不是完全零門檻的事情。

在實務上，當問題變得更複雜，或需要跨領域整合時，專業知識仍然是必要的。

像今天分享的這些工具，對沒有資訊背景的人來說，可能都是知識盲區。

AI 能做到哪些事情，其實是取決於你對這個世界的認知。

希望今天的分享，能讓你使用 Cursor 做 Vibe Coding 時，獲得更好的體驗。

如果你對 AI 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡

大綱

▋ 詢問 ChatGPT 實作的步驟
▋ 前置作業 1：申請 OpenAI API key
▋ 前置作業 2：取得 Line 的 Channel access token 和 Channel secret
▋ 建立 OpenAI-Linebot 的 Node.js 專案
▋ 小結：他還還努力學習中

詢問 ChatGPT 實作的步驟

目前看起來，ChatGPT 回應給我的實作步驟可行性很高，而且每個重點都提示到了。

前置作業 1：申請 OpenAI API key

SETP 1：進入 OpenAI 官網：https://beta.openai.com/

SETP 2：註冊 & 登入 OpenAI 帳號，進入首頁。

SETP 3：點擊右上角圖像，選擇「View API keys」。

SETP 4：點擊「Create new secret key」。

SETP 5：產生出來的 API Key 請保存好，之後你都不會再看到他了。

前置作業 2：取得 Line 的 Channel access token 和 Channel secret

因為步驟比較複雜，所以我有詢問一下 ChatGPT ：

SETP 1：登入開發者平台，網址：https://developers.line.biz/zh-hant/ 。

SETP 2：建立一個 provider，名字自取。

SETP 3：選擇「Create a Message API channel」，我們要做一個聊天機器人。

接下來填寫一些必填資訊：

• Company or owner’s country or region：Taiwan
• Channel name：ChatGPT bot（自由填寫）
• Channel description：ChatGPT bot（自由填寫）
• Category：公眾人物、專業人士（自由填寫）
• Subcategory：IT、電腦（自由填寫）

SETP 4：最下面兩個同意事項要打勾才能按下「Create」按鈕。

最後會讓你確認一下填寫的細節，還有一些規則提醒。

SETP 5：在 Basic settings 取得 Channel secret（這邊 ChatGPT 說錯成 General settings，不過大體意思能理解）。

SETP 6：在 Messaging API 取得 Channel access token。

注意：
Channel access token 是用來驗證和保護機器人與 LINE Platform 之間的通訊，因此請勿將它公開給任何人。
Channel secret 則是用來驗證 Webhook 事件的簽章。

建立 OpenAI-Linebot 的 Node.js 專案

下面的步驟，我是透過詢問 ChatGPT 所得到的：「接下來要如何建立一個 Node.js 專案，並安裝"openai" 和 “@line/bot-sdk” 等套件呢？有相關指令與程式範例嗎？」

SETP 1：建立一個新的專案目錄，並在終端機中進入該目錄。

mkdir myproject
cd myproject

SETP 2：建立一個 package.json 檔案，並設定專案的相關資訊。

npm init

SETP 3：安裝 “openai”、"@line/bot-sdk"、“express"套件（這邊原本是建議裝 line-bot-sdk 這個套件，但因為無法使用，所以請 ChatGPT 重選了一次）。

npm install openai @line/bot-sdk express

注意！在使用上面的指令前，需要先安裝 Node.js 和 npm。

SETP 4：建立一個新的檔案放程式碼。

touch index.js

SETP 5：在 index.js 中引用所需的套件，並設定 OpenAI 的 API key、Linebot 的 channelAccessToken、channelSecret。

const openai = require('openai');
const line = require('@line/bot-sdk');

openai.apiKey = "YOUR_OPENAI_API_KEY";

const config = {
  channelAccessToken: 'YOUR_CHANNEL_ACCESS_TOKEN',
  channelSecret: 'YOUR_CHANNEL_SECRET'
};

const client = new line.Client(config);

SETP 6：在 index.js 中建立一個 HTTP server 並設定 line 的 webhook。

const express = require('express');
const app = express();
const port = 3000;

app.post('/webhook', line.middleware(config), (req, res) => {
  Promise
    .all(req.body.events.map(handleEvent))
    .then((result) => res.json(result))
    .catch((err) => {
      console.error(err);
      res.status(500).end();
    });
});

app.listen(port, () => {
  console.log(`app is running on port ${port}`);
})

SETP 7：在 index.js 中建立一個事件處理函式，當使用者發送訊息時，使用 OpenAI API 將訊息傳到指定的語言模型處理，並將回應的結果傳回給使用者。

function handleEvent (event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  return openai.Completion.create({
    engine: "text-davinci-002",
    prompt: event.message.text,
  }).then(response => {
    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: response.choices[0].text
    });
  });
}

SETP 8：最後啟動伺服器 node index.js

喔喔喔！居然沒有報錯！！！
之後可以請 ChatGPT 幫我完成 Side Project 了嗎？

小提醒：程式能啟動跟能順利執行是兩件事。

小結：他還在努力學習中

其實過程並沒有想像中順利，上面放的步驟已經是多次優化後得到的答案，下面筆者放幾個請 ChatGPT 優化的片段。

錯誤 1： 我按造步驟執行後，會噴錯誤：「TypeError: line.Client is not a constructor」

錯誤 2：我調整後，會噴錯誤：「TypeError: Cannot read properties of undefined (reading ‘validateSignature’)」

其實還有其他錯誤，只是這兩個最嚴重，所以筆者單獨拿出來說一下。

對初學者而言而言，他們可能會覺得是程式哪裡寫錯了，只要修改一下就好；但實際上，真正的問題是 ChatGPT 一開始推薦安裝的套件「line-bot-sdk」就是有問題的。

這邊放個截圖給大家看一下，這款套件已經有 7 年多沒有更新，而且幾乎沒有下載量！如果是缺乏經驗的開發者，應該會在這裡卡很久。

後來我請他重新推薦，ChatGPT 才給了比較合理的套件，最後我請他改用「@line/bot-sdk」重寫一遍才得到上面的結果。

不知道這篇文章會不會勸退一些使用者？

其實 ChatGPT 的問題並不只這些，下一篇文章我會帶大家把後面「啟動 server 並在 Line 開發者平台設定 webhook 的網址、測試機器人是否能正確回應使用者的訊息」等步驟走完，希望筆者踩過的坑能讓讀者日後使用時少走點彎路。

本次 ChatGPT 回應的完整程式請參考筆者的 Github

未來筆者會出一系列使用 ChatGPT、openAI 的文章，如果你對這個議題感興趣，可以持續關注我的文章！

想將 AI 導入自己的職場與生活嗎？歡迎購買筆者出版的新書，幫助您在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！

而且會用到 Kafka 的系統，大多以微服務（Microservices）為主；若沒有搭配合適的追蹤系統，我們很難排查 Consumer 收到消息後發生的錯誤。

這篇文章以實作和邏輯講解為主，如果想了解 Jaeger 這個分布式追蹤系統，請參考連結；想了解 Kafka 這個分布式消息串流平台，請參考連結1、連結2

建議讀者直接到筆者的 Github Clone 一份下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。

大綱

一、自定義追蹤的 Parent & Child 關聯（Manually propagating span context）
二、使用 Kafka 作為傳遞資料的轉運站
三、在 Local 建立 Node.js 專案來達成目標
四、啟動專案，透過 Jaeger UI 確認 Trace 路徑是否符合預期

ㄧ、自定義追蹤的 Parent & Child 關聯（Manually propagating span context）

其實 OpenTelemetry 有提供許多 Instrumentation 的方案，如：

• @opentelemetry/instrumentation-http
• @opentelemetry/instrumentation-grpc
• opentelemetry-instrumentation-kafkajs

透過上面的套件可以自動產生追蹤紀錄，但有時我們只需要追蹤特定路徑，而使用上面的套件會產生許多不需要的資訊，還容易產生效能瓶頸。

比如使用「instrumentation-http」這款套件時，它會把所有 http 相關的操作都記錄下來，但我們實際上只關心其中的幾個路徑。

因此在某些情況下，自定義追蹤的 Parent & Child 關聯是有必要的；下面筆者擷取關鍵的程式碼來做說明：

透過 W3CTraceContextPropagator 把 span 資訊 inject 到 carrier

let span = tracer.startSpan('example');
const carrier = {};
const propagator = new W3CTraceContextPropagator();
propagator.inject(
    api.trace.setSpanContext(api.context.active(), span.spanContext()),
    carrier,
    api.defaultTextMapSetter,
);
span.end()

透過 W3CTraceContextPropagator extract carrier 資訊，使其成為能使用的 Context

const propagator = new W3CTraceContextPropagator();
// 解析 carrier
const parentCtx = propagator.extract(api.context.active(), carrier, api.defaultTextMapGetter);
// 設定 parent 關聯
const span = tracer.startSpan(`report_consumer`, undefined, parentCtx);
span.end()

二、使用 Kafka 作為傳遞資料的轉運站

假使今天有個功能是「產出報表」，但它的執行時間長達「3 分鐘」；我想正常的使用者是不會等一隻 API 回傳等這麼久，針對這個議題，我們不妨改個思路：

SETP 1：在報表的 Table 新增一個「status」欄位，用來表達報表建立的狀況（init、processing、done、fail）。

SETP 2：前端呼叫產出報表的 API 時

• 在報表的 Table 新增初始資訊，並將 Status 設定為「init」。
• 將相關資訊透過 Producer 塞入 Kafka。

SETP 3：前端收到 API 回傳的報表 id 後

• 透過 Consumer 監聽報表執行的狀況；可以用報表的 id 作為 Topic 命名邏輯，ex：reports/{id}。

SETP 4：監聽產出報表的 Consumer 從 Kafka 收到命令後

• 透過 id 從資料庫撈出對應的報表資訊，將 Status 設定為「processing」。
• 呼叫相關服務產出報表，如果其中一個服務發生錯誤，就將 Status 設定為「fail」。
• 如果報表順利產出，就將 Status 設定為「done」。

對 Status 的任何變動，都會透過 Producer 將資訊傳遞到 reports/{id} 這個 Topic，讓前端監聽的的 Consumer 可以作出對應的變動。

上面是比較完整的業務邏輯，建議讀者可以自行實做看看，下面筆者就單純示範透過 Kafka 傳遞 carrier 資訊的部分：

在 Producer 的 value 放上 carrier 的資訊（記得要轉為字串）

await producer.connect()
await producer
  .send({
    topic,
    messages: Array({
      key: `report`,
      value: JSON.stringify(carrier)
    })
  });

從 Consumer 收到的 message 中取出 carrier 的資訊

await consumer.connect()
await consumer.subscribe({ topic, fromBeginning: true })
await consumer.run({
  eachMessage: async ({ topic, partition, message }) => {
    console.log("topic:" + topic + "  message:" + message.value)
    const carrier = JSON.parse(message.value)
  },
})

三、在 Local 建立 Node.js 專案來達成目標

專案的目標就如同標題，我們要透過 Jaeger with OpenTelemetry 追蹤 Kafka 資料傳遞路徑與運行狀況。

STEP 1：建立專案、安裝必要套件。

mkdir -p kafka-jaeger-demo
cd kafka-jaeger-demo
mkdir -p deploy/kafkaCluster/kraft

npm init -f

npm install --save @opentelemetry/api
npm install --save @opentelemetry/resources
npm install --save @opentelemetry/semantic-conventions
npm install --save @opentelemetry/sdk-trace-base
npm install --save @opentelemetry/exporter-jaeger
npm install --save axios
npm install --save express
npm install --save kafkajs

SETP 2：新增「docker-compose.yml」貼上如下程式，並將 docker 啟動。

version: '2.0'
services:
  jaeger:
    image: jaegertracing/all-in-one:1.38 # 當時用 1.39 或 latest 有出現一些 bug，故選用此版本
    environment:
      - COLLECTOR_ZIPKIN_HOST_PORT=:9411
    ports:
      - "5775:5775/udp"
      - "6831:6831/udp"
      - "6832:6832/udp"
      - "5778:5778"
      - "16686:16686"
      - "14250:14250"
      - "14268:14268"
      - "14269:14269"
      - "9411:9411"
  kafka:
    image: 'bitnami/kafka:latest'
    ports:
      - '9092:9092'
    environment:
      - KAFKA_ENABLE_KRAFT=yes
      - KAFKA_CFG_PROCESS_ROLES=broker,controller
      - KAFKA_CFG_CONTROLLER_LISTENER_NAMES=CONTROLLER
      - KAFKA_CFG_LISTENERS=PLAINTEXT://:9092,CONTROLLER://:9093
      - KAFKA_CFG_LISTENER_SECURITY_PROTOCOL_MAP=CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
      - KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://127.0.0.1:9092
      - KAFKA_BROKER_ID=1
      - KAFKA_CFG_CONTROLLER_QUORUM_VOTERS=1@127.0.0.1:9093
      - ALLOW_PLAINTEXT_LISTENER=yes
    volumes:
        # 這是設定資料要存在哪路的路徑
      - ./deploy/kafkaCluster/kraft:/bitnami/kafka:rw

接著輸入指令拉下並啟動 Kafka & Jaeger 環境。

docker-compose up -d

STEP 3：新增「tracing.js」貼上如下程式，基本上就是「Opentelemetry」的基礎運用。

'use strict';

const opentelemetry = require('@opentelemetry/api');
const { Resource } = require('@opentelemetry/resources');
const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
const { BasicTracerProvider, BatchSpanProcessor } = require('@opentelemetry/sdk-trace-base');
const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');

module.exports = (serviceName) => {
    const provider = new BasicTracerProvider({
        resource: new Resource({
            [SemanticResourceAttributes.SERVICE_NAME]: serviceName,
        })
    });

    let exporter;
    exporter = new JaegerExporter({ endpoint: "http://127.0.0.1:14268/api/traces" });

    provider.addSpanProcessor(new BatchSpanProcessor(exporter));

    // Initialize the OpenTelemetry APIs to use the NodeTracerProvider bindings
    provider.register();

    return opentelemetry.trace.getTracer('my-service-tracer');
};

STEP 4：新增「service.js」貼上如下程式；我們在這裡建立供使用者呼叫的 API（/api/report），當 API 被呼叫後會開始追蹤，並透過 Producer 將資料塞入 Kafka。

const api = require('@opentelemetry/api');
const tracer = require('./tracing')('service');
const express = require("express");
const PORT = "8080";
const app = express();
const { Kafka, logLevel } = require('kafkajs')
const kafka = new Kafka({
  logLevel: logLevel.ERROR,
  brokers: [`localhost:9092`],
  clientId: 'example-producer',
})
const producer = kafka.producer()
const topic = 'report'
const { W3CTraceContextPropagator } = require('@opentelemetry/core');

async function report(parentSpan) {
  try {
    const ctx = api.trace.setSpan(
      api.context.active(),
      parentSpan
    );
    let span = tracer.startSpan('report_producer', undefined, ctx);
    const carrier = {};
    const propagator = new W3CTraceContextPropagator();
    propagator.inject(
      api.trace.setSpanContext(api.context.active(), span.spanContext()),
      carrier,
      api.defaultTextMapSetter,
    );
    await producer.connect()
    await producer
      .send({
        topic,
        messages: Array({
          key: `report`,
          value: JSON.stringify(carrier)
        })
      });
    span.end()
  } catch (e) {
    console.log(e)
    throw e
  }
}
app.get("/api/report", async (req, res) => {
  try {
    let span = tracer.startSpan('report_request');
    let result = await report(span)
    span.end()
    res.send(result);
  } catch (e) {
    res.send(e);
  }
});

app.listen(parseInt(PORT, 10), () => {
  console.log(`Service listening for requests on http://localhost:${PORT}`);
});

STEP 5：新增「consumer.js」貼上如下程式；專門監聽「report」這個 Topic，在收到 message 後會開始後續的處理（有刻意設計一個執行錯誤的結果）。

const api = require('@opentelemetry/api');
const tracer = require('./tracing')('consumer');
const { W3CTraceContextPropagator } = require('@opentelemetry/core');
const { Kafka, logLevel } = require('kafkajs')
const kafka = new Kafka({
  logLevel: logLevel.INFO,
  brokers: [`localhost:9092`],
  clientId: 'example-consumer',
})
const topic = 'report'
const consumer = kafka.consumer({ groupId: 'test-group' })

const run = async () => {
  await consumer.connect()
  await consumer.subscribe({ topic, fromBeginning: true })
  await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      console.log("topic:" + topic + "  message:" + message.value)
      const carrier = JSON.parse(message.value)
      const propagator = new W3CTraceContextPropagator();
      const parentCtx = propagator.extract(api.context.active(), carrier, api.defaultTextMapGetter);
      if (topic === "report") {
        const span = tracer.startSpan(`report_consumer`, undefined, parentCtx);
        report(span)
        span.end()
      }
    },
  })
}

function report(parentSpan) {
  const parentCtx = api.trace.setSpan(
    api.context.active(),
    parentSpan
  );
  let span = tracer.startSpan('handle_report', undefined, parentCtx);
  for (let i = 0; i < 10; i++) {
    doWork(span, i);
  }
  span.end();
}
function doWork(parentSpan, i) {
  const parentCtx = api.trace.setSpan(
    api.context.active(),
    parentSpan
  );
  let span = tracer.startSpan(`doWork:${i}`, undefined, parentCtx);
  // 讓每個執行的時間不一樣
  for (let i = 0; i <= Math.floor(Math.random() * 40000000); i++) {
    // empty
  }
  if (i === 5) { // 產生錯誤訊息
    span.recordException(new Error(`doWork:${i} error`));
    span.setStatus({ code: api.SpanStatusCode.ERROR, message: "Something wrong!" });
    span.addEvent('log', {
      'log.severity': 'error',
      'log.message': 'doWork:${i} error'
    });
  }
  span.end();
}

run().catch(e => console.error(`[example/consumer] ${e.message}`, e))

const errorTypes = ['unhandledRejection', 'uncaughtException']
const signalTraps = ['SIGTERM', 'SIGINT', 'SIGUSR2']
// 收到無法處理錯誤時的處理
errorTypes.forEach(type => {
  process.on(type, async e => {
    try {
      console.log(`process.on ${type}`)
      console.error(e)
      await consumer.disconnect()
      process.exit(0)
    } catch (_) {
      process.exit(1)
    }
  })
})
// 收到中斷訊號時的處理
signalTraps.forEach(type => {
  process.once(type, async () => {
    try {
      await consumer.disconnect()
    } finally {
      process.kill(process.pid, type)
    }
  })
})

四、啟動專案，透過 Jaeger UI 確認 Trace 路徑是否符合預期

建議使用有分頁功能的終端機（如 iTerm2），這樣比較好觀察與操作。

STEP 1：在專案根目錄下輸入 node service.js 啟動 Service。

STEP 2：在終端機貼上指令 curl http://localhost:8080/api/report 來呼叫 API。

STEP 3：在專案根目錄下輸入 node consumer.js 啟動監聽模式；這邊提醒一下，如果監聽不存在的 Topic 會報錯。

STEP 4：到 Jaeger UI 上（http://localhost:16686/search）確認 Trace 路徑是否符合預期。

下圖「report_producer」跟「report_consumer」之間的空白，就是資料在 Kafka 轉運站傳遞的時間。

範例到這裡告一段落，希望文中 Jaeger 與 Kafka 的組合應用，有幫讀者打開不一樣的思路。

而本篇文章將會帶大家一步步建立 Node.js 專案 ＆ Kafka 環境，透過具體實踐來了解 Kafka 的運行邏輯。

大綱

ㄧ、手把手帶你建立 Node.js 專案 ＆ Kafka 環境
二、啟動專案，了解 Kafka 的運行邏輯
  ➤ 1 個 Producer VS 1 個 Consumer
  ➤ Kafka 持久化驗證
  ➤ 1 個 Partition 的數據只允許 Consumer Group 中的某個 Consumer 消費
  ➤ 2 個 Partition VS 2 個 Consumer

ㄧ、手把手帶你建立 Node.js 專案 ＆ Kafka 環境

上一篇文章講了這麼多理論，下面就建立一個 Node.js 專案，來實際了解 Kafka 的運作邏輯吧！

如果懶得按照步驟執行，可以直接到筆者的 Github Clone 一份下來。
筆者 local 的 Node.js 版本為 v18.12.0。

SETP 1：建立專案、安裝 kafkajs 套件。

npm init -f
npm install --save kafkajs

SETP 2：建立儲存 Kafka 數據的資料夾（這是下一步「docker-compose.yml」裏面「volumes」的路徑）

mkdir -p deploy/kafkaCluster/kraft

SETP 3：新增「docker-compose.yml」貼上如下程式。

這裡筆者選用不依賴 zookeeper 的 Kafka 版本（KRaft），過去主流會使用 zookeeper 來保存消息，但 Kafka 官方表示在不久後就不再支援 zookeeper，故筆者做此選擇，至於 KRaft 本身有哪些優勢，感興趣的朋友可以參考連結。

version: "3"
services:
  kafka:
    image: 'bitnami/kafka:latest'
    ports:
      - '9092:9092'
    environment:
      - KAFKA_ENABLE_KRAFT=yes
      - KAFKA_CFG_PROCESS_ROLES=broker,controller
      - KAFKA_CFG_CONTROLLER_LISTENER_NAMES=CONTROLLER
      - KAFKA_CFG_LISTENERS=PLAINTEXT://:9092,CONTROLLER://:9093
      - KAFKA_CFG_LISTENER_SECURITY_PROTOCOL_MAP=CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
      - KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://127.0.0.1:9092
      - KAFKA_BROKER_ID=1
      - KAFKA_CFG_NODE_ID=1
      - KAFKA_CFG_CONTROLLER_QUORUM_VOTERS=1@127.0.0.1:9093
      - ALLOW_PLAINTEXT_LISTENER=yes
    volumes:
        # 這是設定資料要存在哪路的路徑
      - ./deploy/kafkaCluster/kraft:/bitnami/kafka:rw

SETP 4：輸入以下指令把 Kafka 的 Docker 拉下來並執行，你可以把這個 Docker 想像成 Kafka Cluster 中的 Broker。

docker-compose up -d

SETP 5：新增「producer.js」貼上如下程式，我們會透過它每隔 2 秒產生消息到指定的 topic。

const { Kafka, CompressionTypes, logLevel } = require('kafkajs')
const kafka = new Kafka({
  logLevel: logLevel.ERROR,
  brokers: [`localhost:9092`],
  clientId: 'example-producer',
})

const topic = 'topic-test'
const numPartitions = 2;
const crateTopic = async (topic) => {
  const admin = kafka.admin();
  await admin.connect();
  const topics = await admin.listTopics();
  if (!topics.includes(topic)) {
    await admin.createTopics({
      topics: [{
        topic: topic,
        numPartitions: numPartitions
      }],
    })
    const fetchTopicOffsets = await admin.fetchTopicOffsets('topic-test')
    console.log(`Crate topic:${topic} successful!`)
    console.log(fetchTopicOffsets)
  }
  await admin.disconnect();
}

const producer = kafka.producer()
const getRandomNumber = () => Math.round(Math.random(10) * 1000)
const createMessage = (num, partition = 0) => ({
  key: `key-${num}`,
  value: `value-${num}-${new Date().toISOString()}`,
  partition: partition
})

const sendMessage = () => {
  return producer
    .send({
      topic,
      compression: CompressionTypes.GZIP,
      messages: Array(createMessage(getRandomNumber()))
      // 用來測試 kafka 多個 Partition 與 Consumer 的關係
      // messages: Array(createMessage(getRandomNumber(), 0), createMessage(getRandomNumber(), 1))
    })
    .then(console.log)
    .catch(e => console.error(`[example/producer] ${e.message}`, e))
}

const run = async () => {
  await crateTopic(topic);
  await producer.connect()
  setInterval(sendMessage, 2000)
}

run().catch(e => console.error(`[example/producer] ${e.message}`, e))

const errorTypes = ['unhandledRejection', 'uncaughtException']
const signalTraps = ['SIGTERM', 'SIGINT', 'SIGUSR2']
// 收到無法處理錯誤時的處理
errorTypes.forEach(type => {
  process.on(type, async e => {
    try {
      console.log(`process.on ${type}`)
      console.error(e)
      await consumer.disconnect()
      process.exit(0)
    } catch (_) {
      process.exit(1)
    }
  })
})
// 收到中斷訊號時的處理
signalTraps.forEach(type => {
  process.once(type, async () => {
    try {
      await consumer.disconnect()
    } finally {
      process.kill(process.pid, type)
    }
  })
})

SETP 6：新增「consumer.js」貼上如下程式，我們透過它模擬消費者消費特定 topic 的消息。

const { Kafka, logLevel } = require('Kafkajs')
const Kafka = new Kafka({
  logLevel: logLevel.INFO,
  brokers: [`localhost:9092`],
  clientId: 'example-consumer',
})

const topic = 'topic-test'
const consumer = Kafka.consumer({ groupId: 'test-group' })
// 用來測試 Kafka 持久化
// const consumer = Kafka.consumer({ groupId: 'test-group2' })

const run = async () => {
  await consumer.connect()
  await consumer.subscribe({ topic, fromBeginning: true })
  await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      const prefix = `${topic}[${partition} | ${message.offset}] / ${message.timestamp}`
      console.log(`- ${prefix} ${message.key}#${message.value}`)
    },
  })
}

run().catch(e => console.error(`[example/consumer] ${e.message}`, e))

const errorTypes = ['unhandledRejection', 'uncaughtException']
const signalTraps = ['SIGTERM', 'SIGINT', 'SIGUSR2']
// 收到無法處理錯誤時的處理
errorTypes.forEach(type => {
  process.on(type, async e => {
    try {
      console.log(`process.on ${type}`)
      console.error(e)
      await consumer.disconnect()
      process.exit(0)
    } catch (_) {
      process.exit(1)
    }
  })
})
// 收到中斷訊號時的處理
signalTraps.forEach(type => {
  process.once(type, async () => {
    try {
      await consumer.disconnect()
    } finally {
      process.kill(process.pid, type)
    }
  })
})

二、啟動專案，了解 Kafka 的運行邏輯

建議使用有分頁功能的終端機（如 iTerm2），這樣比較好觀察與操作。

1 個 Producer VS 1 個 Consumer

在專案根目錄下輸入 node producer.js 模擬「生產者傳送消息」，並在另一個分頁輸入 node consumer.js 模擬「消費者消費消息」。

透過下面的 Gif 大家可以看到消息傳送＆消費的過程。

確認消息可以順利生產與消費後，記得透過「Crontrol + C」將程式關閉。

Kafka 持久化驗證

這邊我們再做一個持久化的實驗，我們把「consumer.js」裏面 groupId 的值改為「test-group2」，來確認是否可以重新消費過去的消息。

通過下圖我們可以得知 Kafka 的資料是持久化的，不會因為有消費者消費而消失；因此擴張的時候，只需要增加消費者來處理資料即可。

1 個 Partition 的數據只允許 Consumer Group 中的某個 Consumer 消費

接著我們來驗證，在 Producer 的 Partition 只有 1 個的情境下，是不是相同的 group_id 下只會有一個 consumer 進行消費；這次要開啟 3 個分頁，1 個模擬生產者，2 個模擬消費者。

透過下面的 Gif，大家可以看到在同一個 Consumer Group 中，的確只會有一個 Consumer 進行消費。

2 個 Partition VS 2 個 Consumer

先前有說到 Partition 數量最好與 Consumer 的數量相等，這樣效率才會最高（一個人一個碗）；這裡一樣是開啟 3 個分頁，1 個模擬生產者，2 個模擬消費者；同時對「producer.js」裡面的程式做微調如下：

// 將原本的註解
// messages: Array(createMessage(getRandomNumber())),
// 解開下面的註解，測試 Kafka 多個 Partition 與 Consumer 的關係
messages: Array(createMessage(getRandomNumber(),0),createMessage(getRandomNumber(),1)),

透過下面的 Gif，可以觀察到在 2 個 Partition VS 2 個 Consumer 時，消息會均勻的分配。

在文章的最後，筆者想分享一段話：「只透過文字是無法理解一門技術的，需要透過實作才有辦法拼出技術的全貌。」

今天的文章就分享到這裡，筆者之後再找時間分享更深入的組合應用，也歡迎讀者分享自己的使用心得，希望藉助彼此的經驗，讓我們一起在工程師的道路走得更遠。

在這樣複雜的架構下，如果系統的某個服務出問題，又或是遇到效能瓶頸；即便有 log 紀錄，但在上下依賴不清楚的狀態下，工程師需要花不少時間來釐清問題原因。

大綱
一、為什麼需要分布式追蹤系統？
二、如何使用分布式追蹤系統？
三、手把手帶你建立 Node.js 專案 ＆ Jaeger 環境
四、啟動專案，並在 Jaeger UI 上查看自己發出的 Traces

一、為什麼需要分布式追蹤系統？

下面舉 2 個簡單的例子：

如果系統每個月會「定時產出月報」給客戶，但這個功能突然壞了，在排查問題時可能會經歷如下痛苦：

1. 是「排程」的部分沒執行，還是「產出月報」的功能有問題？
2. 產出月報的功能會呼叫「多個服務」，每個服務分別在不同的 Server 上。
3. 服務間有不同的執行順序與依賴關係，需要按照每個節點排查。

假使系統顯示 Dashboard（儀表板）的時間過長被客戶抱怨，工程師在優化時需要以下資訊才能判斷問題：

1. Dashboard 渲染時會呼叫很多 API，而耗時長的 API 背後通常有複雜的商業邏輯（ex：串連多個服務後才得到的結果）。
2. 即便知道哪個 API 是效能瓶頸，但因為串連的服務太多，需要逐一下 log 才能判斷出是哪個環節出了問題。

相信有不少人遇過這些困擾，所以今天筆者想要跟大家分享，如何用「Jaeger + OpenTelemetry + Node.js」搭建分布式追蹤系統，來幫我們：

1. 快速找出問題來源。
2. 判斷問題的影響範圍。
3. 透過圖像梳理服務的依賴關係，以及依賴的合理性。
4. 分析效能問題。

小提醒：

每間公司的組織架構不同，第一時間接收錯誤訊息的未必是開發工程師，也可能是負責分析數據的團隊；如果系統的 log 訊息描述不清楚時，他們很難表達到底是哪裡出了問題，但如果使用分布式追蹤系統，他們就能很明確的指出問題，與工程師進行有效溝通。

二、如何使用分布式追蹤系統？

下一節會帶讀者在 local 環境建立一個微型專案，這邊先簡述使用情境。

我們的 Service A 提供下面 4 支 API：

• GET /api/reportA：A 報告故意拋出錯誤。
• GET /api/reportB：B 報告內部會呼叫多個服務。
• GET /api/reportC：C 報告跑很久，為效能瓶頸。
• GET /api/allReports：產出 A、B、C、Other 報告。 我們的 Service B 僅提供下面 1 支 API：
• GET /api/reportOther：Other 報告會呼叫另一台 Server 的 API。

如果執行「GET /api/allReports」這隻 API，它的運行架構是：

genAllReports(Service A)
    ├── reportA
    ├── reportB
    │       ├── reportB-1
    │       └── reportB-2
    ├── reportC
    └── reportOther(Service B)

因為在開頭有先說「GET /api/reportA」會拋出錯誤、「GET /api/reportC」是效能瓶頸；但如果在一無所知的狀態下直接呼叫「GET /api/allReports」這隻 API，那發生錯誤時，只能按照傳統的作法來慢慢排查 log。

初步了解專案架構後，下面我們先上幾張 Jaeger 的分析圖：

右上角的圖表中，紅色圓點是錯誤的標記，越大的圓點代表內含的 Span（邏輯運行單元）越多。

左邊則是搜尋條件：

• Service：要追蹤的服務。
• Operations：曾經觸發過的操作。
• Tags：我們可以為 Span 設計 Tag 方便過濾。
• Lookback：以時間過濾。
• Min Duration/Min Duration：用最小/最大執行時間作為過濾條件。
• Limit Results：筆數顯示。

我們可以點擊觀看執行的時間軸（Trace Timeline），上圖是「GET /api/allReports」這隻 API 的 Trace，我們可以很清楚每個 Span 之間的執行順序、依賴關係、執行時間、執行狀況。

• Duration：總運行時間耗費 2s。
• Services：關聯的服務為 2（service-a、service-b）。
• Depth：最深的 Span 有 6 層（hadle_report_other 那個）。
• Total Spans：總共有 11 個 Span。

相信圖片比起文字更有說服力，在圖表與搜尋條件的輔助下，我們能更快找到問題點。

三、手把手帶你建立 Node.js 專案＆Jaeger 環境

這邊筆者就不細說程式邏輯，主要的目的是讓讀者在 local 端建立分布式追蹤系統，如果懶得按照步驟執行，可以直接到筆者的 Github Clone 一份下來。

筆者 local 的 Node.js 版本為 v18.12.0

SETP 1：建立專案、安裝必要套件。

npm init -f

npm install --save @opentelemetry/api
npm install --save @opentelemetry/resources
npm install --save @opentelemetry/semantic-conventions
npm install --save @opentelemetry/sdk-trace-node
npm install --save @opentelemetry/sdk-trace-base
npm install --save @opentelemetry/exporter-jaeger
npm install --save @opentelemetry/instrumentation-http
npm install --save axios
npm install --save express

SETP 2：新增「docker-compose.yml」貼上如下程式。

version: '2.0'

services:
  jaeger:
    container_name: practice-jaeger
    image: jaegertracing/all-in-one:1.38 # 當時用 1.39 或 latest 有出現一些 bug，故選用此版本
    environment:
      - COLLECTOR_ZIPKIN_HOST_PORT=:9411
    ports:
      - "5775:5775/udp"
      - "6831:6831/udp"
      - "6832:6832/udp"
      - "5778:5778"
      - "16686:16686"
      - "14250:14250"
      - "14268:14268"
      - "14269:14269"
      - "9411:9411"

SETP 3：輸入以下指令把 jaeger 的 Docker 拉下來並執行。

docker-compose up -d

SETP 4：新增「tracing.js」貼上如下程式，如果你想要對「Opentelemetry」有更深入的了解，可以參考官網；筆者範例主要是增加「exporter-jaeger、instrumentation-http」這兩個設定。

有些人分不清 Opentelemetry 跟 Jaeger 的角色定位；簡單來說，Opentelemetry 幫忙產生/收集觀察用的數據，而 Jaeger 則是一種分布式追蹤工具。

'use strict';

const opentelemetry = require('@opentelemetry/api');
const { registerInstrumentations } = require('@opentelemetry/instrumentation');
const { NodeTracerProvider } = require('@opentelemetry/sdk-trace-node');
const { Resource } = require('@opentelemetry/resources');
const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
const { BatchSpanProcessor } = require('@opentelemetry/sdk-trace-base');
const { JaegerExporter } = require('@opentelemetry/exporter-jaeger');
const { HttpInstrumentation } = require('@opentelemetry/instrumentation-http');

module.exports = (serviceName) => {
    const provider = new NodeTracerProvider({
        resource: new Resource({
            [SemanticResourceAttributes.SERVICE_NAME]: serviceName,
        }),
    });

    let exporter;
    exporter = new JaegerExporter({ endpoint: "http://127.0.0.1:14268/api/traces" });

    provider.addSpanProcessor(new BatchSpanProcessor(exporter));

    // Initialize the OpenTelemetry APIs to use the NodeTracerProvider bindings
    provider.register();

    registerInstrumentations({
        // // when boostraping with lerna for testing purposes
        instrumentations: [
            new HttpInstrumentation(),
        ],
    });

    return opentelemetry.trace.getTracer('my-service-tracer');
};

SETP 5：新增「service-a.js」貼上如下程式，我們在這裡建立 Service A 的 4 支 API。

const api = require('@opentelemetry/api');
const tracer = require('./tracing')('service-a');
const express = require("express");
const PORT = "8080";
const app = express();
const axios = require('axios')
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));

async function reportA() {
  let span = tracer.startSpan('report_a')
  await waitFor(500);
  span.setAttribute('report', 'A')
  span.recordException(new Error('Report A not found'))
  span.setStatus({ code: api.SpanStatusCode.ERROR, message: "Something wrong!" })
  span.addEvent('log', {
    'log.severity': 'error',
    'log.message': 'Report A not found',
    'endReport.id': '123',
  })
  span.end()
  throw "Report A not found";
}
async function reportB() {
  return await tracer.startActiveSpan('report_b', async (span) => {
    await waitFor(100);

    let child1 = tracer.startSpan('report_b_1')
    child1.end()
    let child2 = tracer.startSpan('report_b_2')
    child2.end()

    span.setAttribute('report', 'B')
    span.end()
    return { "b": "context" }
  })
}
async function reportC() {
  let span = tracer.startSpan('report_c')
  await waitFor(2000);
  span.setAttribute('report', 'C')
  span.end()
  return { "c": "context" }
}
async function reportOther() {
  try {
    let span = tracer.startSpan('report_other_request');
    let result;
    await api.context.with(api.trace.setSpan(api.context.active(), span),async () => {
      const { data } = await axios.get(`http://localhost:8081/api/reportOther`);
      result = data;
    });
    span.end()
    return result
  } catch (e) {
    throw e
  }
}
app.get("/api/allReports", async (req, res) => {
  tracer.startActiveSpan('gen_all_reports', async (span) => {
    const promises = [
      reportA(),
      reportB(),
      reportC(),
      reportOther()
    ];
    let result = await Promise.allSettled(promises);
    span.end()
    res.send(result);
  })
});
app.get("/api/reportA", async (req, res) => {
  try {
    let result = await reportA()
    res.send(result);
  } catch (e) {
    res.send(e);
  }
});
app.get("/api/reportB", async (req, res) => {
  try {
    let result = await reportB()
    res.send(result);
  } catch (e) {
    res.send(e);
  }
});
app.get("/api/reportC", async (req, res) => {
  try {
    let result = await reportC()
    res.send(result);
  } catch (e) {
    res.send(e);
  }
});

app.listen(parseInt(PORT, 10), () => {
  console.log(`Service A listening for requests on http://localhost:${PORT}`);
});

SETP 6：新增「service-b.js」貼上如下程式，我們在這裡建立的 API 是要給 Service A 呼叫的。

const tracer = require('./tracing')('service-b');
const express = require("express");
const PORT = "8081";
const app = express();

app.get("/api/reportOther", (req, res) => {
  try {
    let span = tracer.startSpan('handle_report_other');
    span.end()
    res.send({ "other": "context" });
  } catch (e) {
    res.send(e);
  }
});

app.listen(parseInt(PORT, 10), () => {
  console.log(`Service B listening for requests on http://localhost:${PORT}`);
});

四、啟動專案，並在 Jaeger UI 上查看自己發出的 Traces

建議使用有分頁功能的終端機（如 iTerm2），這樣比較好觀察與操作。

在專案根目錄下輸入 node service-a.js 啟動 Service A 服務，並在另一個分頁輸入 node service-b.js 啟動 Service B 服務。

然後在終端機第三個分頁複製貼上以下指令，呼叫 API。

curl http://localhost:8080/api/reportA
curl http://localhost:8080/api/reportB
curl http://localhost:8080/api/reportC
curl http://localhost:8081/api/reportOther
curl http://localhost:8080/api/allReports

如果都按照步驟執行，在瀏覽器的網址輸入「 http://localhost:16686/search 」就可以開始追蹤你所設定的 Traces 嚕！

一些小建議

• 雖然分布式追蹤系統能幫我們許多忙，但如果所有的服務都靠它追蹤，那產生的 Record 數量會非常龐大，所以建議「追蹤重要的服務」為主。
• 這邊為了方便 Demo，筆者使用 http 來做 instrumentation 的舉例，但實務上 RPC(Remote Procedure Call) 的使用率可能更高。

筆者也是剛學習分布式追蹤系統的新人，如果描述有誤，或是有其他建議，再麻煩大神們不吝賜教，感謝～

筆者原本選用「avn」這個套件，但它真的已經年久失修了無法使用連結

STEP 1：建立兩個 Node.js 專案

在終端機複製貼上下方指令即可。

mkdir project-a
cd project-a
npm init -y
cd ..
mkdir project-b
cd project-b
npm init -y
cd ..

STEP 2：安裝特定的 Node.js 版本以供測試

尚未 nvm 安裝的讀者，可以先透過如下指令安裝，更新的版本請參考連結。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

安裝完後建議重開終端機讓它生效，接著透過它安裝 Node.js 特定版本：

nvm install 12
nvm install 16

STEP 3：在兩個 Node.js 專案中加入「.nvmrc」並指定 Node.js 版本

接下來我們就分別在兩個專案中新增「.nvmrc」的檔案，並個別指定 12、16 版本方便測試（讀者在終端機複製貼上下方指令即可）。

cd project-a
touch .nvmrc
echo "12" >> .nvmrc
cd ..
cd project-b
touch .nvmrc
echo "16" >> .nvmrc
cd ..

筆者為了方便 Demo 而指定大版本，「.nvmrc」檔案是能吃「x.y.z」版本號的。

STEP 4：調整 zsh script

在終端機輸入 vi ~/.zshrc（每個人的路徑可能不同），到最後一行貼上下方 script：

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"
  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")
    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

儲存後再輸入 source ~/.zshrc 即可讓 script 生效。

這邊簡單說明 script 運行邏輯：

• 資料夾下有「.nvmrc」的檔案：若指定的 Node.js 版本已安裝就透過「nvm use」切換，假使該版本尚未安裝就會執行「nvm install」。
• 資料夾下沒有「.nvmrc」的檔案：切換回 Node.js 默認的版本。

唯一要注意的是，記得把這段 script 放在 nvm 初始化後的位置（或是直接放在最後面也可以）。

上面的 script 參考自 nvm 官網，如果讀者使用的是 bash script 請參考連結。

STEP 5：實測是否有效

筆者在開頭故意切換到 Node.js 18 的版本，然後再依序切換到「project-a」以及「project-b」的資料夾，從下圖大家可以看到 Node.js 的版本都順利切換嚕！

希望這篇文章，有幫大家解決不同專案的 Node.js 版本切換之苦～

今天這篇文章會採用 Demo 的形式，讓大家理解程式運作的順序，而「阻塞」的程式則是選用 斐波那契數列（fibonacci sequence） 來模擬。

單執行緒會遇到什麼問題

單執行緒如果遇上需要高 CPU 運算的程式，那整體效能就會大幅下降；下面我們用一個簡單的程式來做說明：

function getFibonacciNumber (num) {
  if (num === 0) {
    return 0;
  } else if (num === 1) {
    return 1;
  } else {
    return getFibonacciNumber(num - 1) + getFibonacciNumber(num - 2);
  }
}
console.log(`42th Fibonacci Result:` + getFibonacciNumber(42));
console.log(`15th Fibonacci Result:` + getFibonacciNumber(15));
console.log("被卡住的輕量級任務");

原始碼：single-thread.js（GitHub Gist）

上述程式的執行結果為：

42th Fibonacci Result:267914296
15th Fibonacci Result:610
被卡住的輕量級任務

你可以將程式中的 3 個 console.log 理解為：

1. 42th Fibonacci：會讓程式阻塞的重量級運算。
2. 15th Fibonacci：運算需要的時間不長，但被上面的程式卡住了。
3. 被卡住的輕量級任務：只是簡單的輸出，卻被上面的程式卡的動彈不得。

多執行緒如何解決

既然知道 斐波那契數列（fibonacci sequence） 是阻塞的元兇，那我們可以把這個運算抽離出來，給新的執行緒來計算。

在實作方面，先新增一個 worker.js 的檔案，讓他處理由「主執行緒」指派的「新執行緒」；這裡的執行緒會透過 parentPort.postMessage 函數與「主執行緒」傳遞訊息。

const { parentPort, workerData } = require("worker_threads");

parentPort.postMessage(getFibonacciNumber(workerData.num))

function getFibonacciNumber (num) {
  if (num === 0) {
    return 0;
  } else if (num === 1) {
    return 1;
  } else {
    return getFibonacciNumber(num - 1) + getFibonacciNumber(num - 2);
  }
}

原始碼：worker.js（GitHub Gist）

接著我們新增一個 index.js 的檔案，來設計主執行緒的程式，筆者在這新增一個「runWorker」的函式，將會造成「阻塞」的程式交給它來執行。

const { Worker } = require("worker_threads");

const runWorker = (number) => {
  const worker = new Worker("./worker.js", { workerData: { num: number } });
  worker.on("message", result => {
    console.log(`${number}th Fibonacci Result: ${result}`);
  });

  worker.on("error", error => {
    console.log(error);
  });

  worker.on("exit", exitCode => {
    console.log(`It exited with code ${exitCode}`);
  })
}

runWorker(42)
runWorker(15)
console.log("主執行緒的任務");

原始碼：worker-threads.js（GitHub Gist）

經過這樣的調整後：

1. 繁重的運算由「新執行緒」處理，且不會互相阻塞；解決了 Fibonacci 在「15th」的運算明明很快，但於單執行緒卻被「42th」拖到後面才執行的問題。
2. 從下圖的運算結果，你可以觀察到主執行緒不會被阻塞。

結語

過去 Node.js 常常被說不適合執行高 CPU 運算的任務（因為會阻塞）。

但在導入 worker_threads 使其可以運用多執行緒後，我們只要將「高 CPU 運算」的任務交給其他執行緒處理，主執行緒就能繼續處理其他任務不被阻塞，以此提高 Server 的吞吐量。

如果你做的是電子商務系統，這個「痛點」會更為明顯，一但讓客戶等太久，公司就會流失大筆訂單。

為了解決這個問題，我們可以將資料設計成「快取」，這樣不但能大幅減少查詢資料的回傳時間（毫秒級別），還能有效降低後端資料庫的存取壓力。

本篇文章將以：「Node.js X Koa X Redis」作為範例解說；如果你完全沒接觸過 Redis，可以先參考這篇文章安裝環境。

應用場景說明

如果今天要設計一款「等公車」的服務，那你勢必要串接「第三方 API」來獲取即時訊息。

但有時第三方 API 的回傳時間並不理想，甚至有存取次數的限制；如果我們想降低第三方 API 存取次數，並減少使用者等待的回傳時間，我們可以針對資料做「快取（Cache）」設計。

等公車這個服務有幾個特點：

1. 「公車到站時間」對所有使用者來說都是一樣的。
2. 公車即將抵達的時間以「分鐘」來顯示，所以我們存取的第三方 API 的頻率不用太高。
3. 公車的線路非常多，但不會每條線路都有剛好使用者在查。

我們可以根據特點來設計資料更新的方案：

1. 我們並不需要輪詢所有的路線，因為很多資料我們就算取得，也沒有使用者會需要。
2. 因為即將抵達的時間以「分鐘」顯示，所以我們只要把更新的頻率設計在 1 分鐘以下即可（ex：5 秒鐘）。
3. 更新的策略可以採取「若 Redis 有資料就直接採用，若無則呼叫第三方 API 獲取資料」。

筆者之前有分享過用 Redis 解決「商品秒殺」的應用，有興趣的讀者可以參考這篇文章。

專案環境設置

這個小專案我們會使用到如下套件：

• koa：可以理解為 Express.js 的精簡版後端框架。
• @koa/router：路由器設定用的，看起來會比較直觀。
• ioredis：與 Redis 連線、溝通的套件。
• axios：HTTP 請求工具，我們透過它來 Call API。

使用如下指令便可「建立專案資料夾＆初始化專案＆安裝套件」：

mkdir redis-cache-example
cd redis-cache-example
npm init -y
npm install --save koa @koa/router ioredis axios

找個方便使用的第三方 API

本專案的主要目的，是讓大家理解如何將 API 回傳的資料快取。

所以這邊筆者選擇JSONPlaceholder的服務，他有提供虛擬的 RESTful API（重點是不用申請 Key 方便很多）。

上圖是 API 的回傳格式，大家可以看到，每個物件都有「id」的欄位，我們的程式會使用到這個參數來做 Demo（最多只有到 200，超過會回傳錯誤訊息）。

專案程式

本篇文章的目的是讓讀者理解 Redis 對效能有多大的提升，因此程式架構超級簡單，大概分成三個部分：

1. 將相關套件引入（koa、@koa/router、ioredis、axios）
2. Redis 資料庫連線
3. Get Method 的 RESTful API

而在 Get Method 存取 Redis 資料庫的邏輯為：

1. 先去 Redis 確認是否有快取，如果有就直接回傳。
2. 如果 Redis 沒資料，就要 Call API，並將第一次獲得的資料儲存到 Redis 裡面（資料過期時間設定為 5 秒鐘）。

為了方便讀者實作，筆者下面直接提供完整程式，你只要在專案資料夾下新增 index.js，然後複製貼上程式即可：

const Koa = require('koa');
const Router = require('@koa/router');
const Redis = require('ioredis');
const axios = require('axios')
const app = new Koa();
const router = new Router();

const redis = new Redis({
  host: '127.0.0.1',
  port: 6379,
  password: ''
});
redis.on("error", function (error) {
  console.error(error);
});

router.get('/todos/:id', async ctx => {
  try {
    const cacheTodos = await redis.get(`todos:${ctx.params.id}`);
    if (cacheTodos) {
      console.log("從 Redis 獲得資料");
      ctx.body = JSON.parse(cacheTodos);
      return;
    }

    // 呼叫 API
    const response = await axios.get(`https://jsonplaceholder.typicode.com/todos/${ctx.params.id}`);
    console.log("將第一次獲得的資料儲存到 Redis");
    // 把 API 回傳結果放入 Redis，並設定 5 秒的過期時間（Expire Time）
    await redis.set(`todos:${ctx.params.id}`, JSON.stringify(response.data), "EX", 5);

    ctx.body = response.data;
  } catch (err) {
    ctx.body = err;
  }
});

app.use(router.routes());
app.listen(3000);

原始碼：redis-cache.js（GitHub Gist）

測試程式，確認結果是否符合預期

STEP 1：先在終端機輸入 redis-server，啟動 Redis Server。

STEP 2：輸入 node index.js 運行專案。

STEP 3：打開 POSTMAN，實際體驗有了 Redis Cache API 的資料後，減少了多少回傳時間。

如果想感受差異，可以看看下面筆者錄製的 Gif，裡面也有呈現過 5 秒就要重新抓取資料的邏輯。

結語

本篇文章的重點在於「Cache 的思路」，Redis 只是協助我們達成目標的工具，即使改用 Memcached 也能達到相同目的。

希望這個簡單的範例讓大家對 Redis 的應用有更近一步的認識，也歡迎大家留言分享自己的應用喔！

大綱
一、模擬情境說明
二、在 DB 建立測試測試對照組 Table
三、設計＆建立模擬資料
四、設計測試程式
五、模擬每個情境，取得測試結果
六、令人意外的總結

大家也可以直接 Clone 筆者 GitHub 上的專案來了解喔。（如果順便按個 Star更好😀）

一、模擬情境說明

假設一個商城系統：

• 有 1W 個顧客
• 每位顧客有 10 筆訂單（10W 筆訂單）
• 每筆訂單有 10 筆購買的商品（100W 筆購買的商品）

如果今天想要搜尋某個價格區間的「商品」，有哪些「使用者」購買；使用文字欄位（ex：VARCHAR）與數值欄位（ex：INT），在效能上實際會有多少差異。

二、在 DB 建立測試測試對照組 Table

如果想知道詳細的程式，或是打算在 Local 端模擬一樣的環境，大家可以參考我在GitHub 上面的專案

這裡我們分成 3 種情境來做測試：

情境 A： 將 Join 的欄位設計 Foreign Key，搜尋用到的欄位也設計 Index
情境 B： 將 Foreign Key 的設計拿掉，改為使用 Index
情境 C： 把 Index 全部拿掉，來看看到底有多慘

DB 我選擇的是 MySQL，而 Table 的設計如下：

users（顧客）

orders（訂單）

設計「user_id、user_name」是為了對比文字欄位（ex：VARCHAR）與數值欄位（ex：INTEGER）的差異，皆有建立 Foreign Key。

items（購買的商品）

設計「order_id、order_sn」是為了對比文字欄位（ex：VARCHAR）與數值欄位（ex：INTEGER）的差異，皆有建立 Foreign Key。

可用如下指令建立資料：

• Clone 專案：git clone git@github.com:dean9703111/table-join-varchar-int-performance.git
• 安裝套件：npm install
• 安裝 sequelize cli：npm install -g sequelize-cli
• 將 config 資料夾底下的 config.exmaple.json 複製為 config.json，並填入自己的 DB 資訊
• 建立 DB：sequelize db:create
• 執行 migration 建立 Tables：sequelize db:migrate

資料都是使用 Node.js 搭配 sequelize 這款套件來建立的，如果想了解詳細使用方式，可以參考我先前的的文章。

在沒設計 Index 的 Table（users/orders） 對照組中，會新增 user_id/order_id 的欄位，此欄位內容與 id 欄位相同，單純用來測試效能用的。

三、設計＆建立模擬資料

我們需要設計 3 個 Seeder，將期望的資料塞入：

STEP 1：建立 1W 個顧客
STEP 2：為每位顧客建立 10 筆訂單（user_id、user_name 需與 user Table 關聯）
STEP 3：為每筆訂單建立 10 筆購買的商品（order_id、order_sn 需與 order Table 關聯）

執行全部 Seeder：

sequelize db:seed:all

因為沒建立 Index 的 Table 搜尋效能比想像的更加悲劇，所以在這個情境下將 User 的數量減為 1/10，也就是說購買商品(item)的數量只有 10W 筆。

四、設計測試程式

我們需要設計一個可以根據上面 3 種情境測試的程式，同時用 3 種常見的查詢來比較各自的效能：

1. 單筆查詢：findOne
2. 多筆查詢：findMutiple
3. 設定條件的批量查詢 ：searchRange (大約會找出 1/5 的資料，用來測試匯出大量報表功能)

程式放在下面，有興趣再看就好，這不是本文的重點，我知道還有很多細節可以優化 😇

const { sequelize } = require("./models");
const { QueryTypes } = sequelize;
function getJoinCol (colType, setting) {
    let orderJoinCol = "";
    let itemJoinCol = ""
    if (setting === "" && colType === "Int") {
        orderJoinCol = `orders.user_id = users.user_id`
        itemJoinCol = `items.order_id = orders.order_id`
    } else if (colType === "Int") {
        orderJoinCol = `${setting}orders.user_id = ${setting}users.id`
        itemJoinCol = `${setting}items.order_id = ${setting}orders.id`
    } else if (colType === "VarChar") {
        orderJoinCol = `${setting}orders.user_name = ${setting}users.name`
        itemJoinCol = `${setting}items.order_sn = ${setting}orders.sn`
    }
    return { "orderJoinCol": orderJoinCol, "itemJoinCol": itemJoinCol }
}
async function findOne (colType, setting) {
    console.time(`${colType}-${setting}FindOne`);
    let {orderJoinCol,itemJoinCol} = getJoinCol (colType, setting)
    const results = await sequelize.query(`SELECT 
           ${setting}users.name, ${setting}items.price FROM ${setting}users
           LEFT JOIN ${setting}orders ON ${orderJoinCol}
           LEFT JOIN ${setting}items ON ${itemJoinCol}
           WHERE ${setting}items.name = 'Dumpitem5000-10-10'`, { type: QueryTypes.SELECT });
    console.timeEnd(`${colType}-${setting}FindOne`);
}
async function findMutiple (colType, setting) {
    console.time(`${colType}-${setting}FindMutiple`);
    let {orderJoinCol,itemJoinCol} = getJoinCol (colType, setting)
    const results = await sequelize.query(`SELECT 
           ${setting}users.name, ${setting}items.price FROM ${setting}users
           LEFT JOIN ${setting}orders ON ${orderJoinCol}
           LEFT JOIN ${setting}items ON ${itemJoinCol}
           WHERE ${setting}items.name in 
            ('Dumpitem3000-10-10','Dumpitem5000-10-10','Dumpitem7500-10-10')`
        , { type: QueryTypes.SELECT });
    console.timeEnd(`${colType}-${setting}FindMutiple`);
}
async function searchRange (colType, setting) {
    console.time(`${colType}-${setting}SearchRange`);
    let {orderJoinCol,itemJoinCol} = getJoinCol (colType, setting)
    const results = await sequelize.query(`SELECT 
           ${setting}users.name, ${setting}items.price FROM ${setting}users
           LEFT JOIN ${setting}orders ON ${orderJoinCol}
           LEFT JOIN ${setting}items ON ${itemJoinCol}
           WHERE ${setting}items.price < 80`, { type: QueryTypes.SELECT });
    console.timeEnd(`${colType}-${setting}SearchRange`);
}

function test (type) {
    switch (type) {
        case 'foreign':
            findOne("Int", "foreign_");
            findMutiple("Int", "foreign_");
            searchRange("Int", "foreign_");
            findOne("VarChar", "foreign_");
            findMutiple("VarChar", "foreign_");
            searchRange("VarChar", "foreign_");
            break;
        case 'index':
            findOne("Int", "index_");
            findMutiple("Int", "index_");
            searchRange("Int", "index_");
            findOne("VarChar", "index_");
            findMutiple("VarChar", "index_");
            searchRange("VarChar", "index_");
            break;
        default:
            findOne("Int", "");
            findMutiple("Int", "");
            searchRange("Int", "");
            findOne("VarChar", "");
            findMutiple("VarChar", "");
            searchRange("VarChar", "");
    }
}

// test("foreign")//有建立 foreign Key 的
// test("index")//有建立 index 的
test()//什麼都沒有設定的

原始碼：table-join-index.js（GitHub Gist）

五、模擬每個情境，取得測試結果

情境 A： 將 Join 的欄位設計 Foreign Key，搜尋用到的欄位也設計 Index

• ER Diagram

小知識 : 如果 Foreign Key關聯的欄位為 Primary Key，它會自動建立 Index。

• 執行程式

測試數據：

• INTEGER 單筆查詢：787.003ms
• INTEGER 多筆查詢：773.931ms
• INTEGER 設定條件的批量查詢：3.555s
• VARCHAR 單筆查詢：767.987ms
• VARCHAR 多筆查詢：773.861ms
• VARCHAR 設定條件的批量查詢：6.049s

情境 B： 將 Foreign Key 的設計拿掉，改為使用 Index

• ER Diagram

• 執行程式

測試數據：

• INTEGER 單筆查詢：464.168ms
• INTEGER 多筆查詢：540.567ms
• INTEGER 設定條件的批量查詢：2.624s
• VARCHAR 單筆查詢：447.98ms
• VARCHAR 多筆查詢：549.225ms
• VARCHAR 設定條件的批量查詢：4.824s

情境 C： 把 Index 全部拿掉，來看看到底有多慘

• ER Diagram

• 執行程式

測試數據：

• INTEGER 單筆查詢：1.217s
• INTEGER 多筆查詢：1.205s
• INTEGER 設定條件的批量查詢：3:08.252 (m:ss.mmm)
• VARCHAR 單筆查詢：1.755s
• VARCHAR 多筆查詢：1.964s
• VARCHAR 設定條件的批量查詢：44.285s

六、令人意外的總結

這邊先列出比較表，方便大家理解：

在這張表裡面有我預料的結果，也有我沒想到的結果，我歸類如下：

• 批量查詢時，如果有設定 Foreign Key、Index，INTEGER 的搜尋效率優於 VARCHAR。
• 在有設定 Foreign Key、Index，那單筆、多筆查詢的效率是差不多的，跟使用 INTEGER 還是 VARCHAR 關聯性不大。
• Foreign Key 的搜尋效率略低於 Index（可能是我在資料表上設計的不足）。
• 如果沒建立 Index，那搜尋效率慘不忍睹（即使資料只有 1/10，效能還是超悲劇）。
• 如果沒建立 Index，在批量查詢時，INTEGER 查詢效率低於 VARCHAR（這部分我真的搞不懂為什麼）。

老實說，這個實驗結果反而把我弄得有點迷糊，也許還要從更多面向做測試，追尋知識的道路真的任重道遠🤕

本篇是從「搜尋花費時間」的角度來實驗，歡迎高手從硬體消耗資源的角度來實驗。

• 我能學到什麼 🤔：sequelize 基礎使用方式。
• 我能學會嗎 🤔：筆者從零開始建立專案，並附上詳細的指令與說明，相信大家都能學得開心。
• 文章目標 🤩：建立一個有使用者（user）、訂單（order）、購買貨物（item）的資料庫，設計 Table 彼此的關連性，透過 Query 確認資料。

大綱
一、初始化專案
二、透過 Config 建立 DB
三、用 Migration 建立 Table
四、用 Seeder 建立假資料(Dummy Data)
五、簡易 Query

大家也可以直接 Clone 筆者 GitHub 上的專案來了解喔。（如果順便按個 Star更好😀）

ㄧ、初始化專案

STEP 1：建立專案資料夾

mkdir sequelize-demo && cd  sequelize-demo
npm init

STEP 2：安裝 sequelize

npm install -g sequelize-cli
npm install --save sequelize

STEP 3：安裝你想使用的 DB（本篇文章以 MySQL 為範例）

npm install --save mysql2 #本篇文章
npm install --save pg pg-hstore # Postgres
npm install --save mariadb
npm install --save sqlite3
npm install --save tedious # Microsoft SQL Server

二、透過 Config 建立 DB

STEP 1：用指令初始化相關設定檔

sequelize init

STEP 2：調整 sequelize 的 config/config.json 檔

預設使用的環境都是development，記得調整成自己的 DB 登入參數

"development": {
    "username": "root",
    "password": "baobaoverycute",
    "database": "sequelize_demo",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },

STEP 3：依照剛剛設定的 config/config.json 來建立 DB

sequelize db:create

如果想要移除該 DB，可透過指令： sequelize db:drop

三、用 Migration 建立 Table

STEP 1：新增所需 Tables & 基礎欄位

根據文章目標，我們需要建立 3 個 Tables：使用者（user）、訂單（order）、購買貨物（item）

sequelize model:generate --name user --attributes name:string,mail:string
sequelize model:generate --name order --attributes user_id:integer,total_price:integer
sequelize model:generate --name item --attributes order_id:integer,price:integer

如果沒有填寫「attributes」的參數會無法建立 Table。

STEP 2：前往 migrations 的資料夾，設計 Table 間的關聯性

調整 order Table，建立 user_id 與 user 的關聯性（一個 user 會對應到多筆 order）

user_id: {
    type: Sequelize.INTEGER,
    references: {
        model: 'users',
        key: 'id'
    },
},

調整 item Table，建立 order_id 與 item 的關聯性（一個 order 會對應到多筆 item）

oder_id: {
    type: Sequelize.INTEGER,
    references: {
        model: 'orders',
        key: 'id'
    },
},

STEP 3：修改完成之後，就可以下指令建立剛剛設定的 Table 啦～

sequelize db:migrate

下圖是用 MySQLWorkbench 產生的 ER Diagram

如果想要回溯 migration 可用如下指令：

• 退一個版本：sequelize db:migrate:undo
• 退到初始狀態：sequelize db:migrate:undo:all
• 退到指定版本：sequelize db:migrate:undo:all –to XXXXXXXXXXXXXX-create-user.js

四、用 Seeder 建立假資料(Dummy Data)

目標：建立 100 個使用者（user），每個使用者有 10 筆訂單（order），每筆訂單下面有 10 個貨物（item）。

STEP 1：先建立 Seeder 檔案

sequelize seed:generate --name demo-user
sequelize seed:generate --name demo-order
sequelize seed:generate --name demo-item

STEP 2：建立各自 Seeder 資料產生的邏輯，下面以 order 舉例：

"use strict";

module.exports = {
  async up(queryInterface, Sequelize) {
    function getRandomInt(max) {
      return Math.floor(Math.random() * max);
    }
    // 100 個使用者，每個使用者有 10 筆訂單（order）
    var orderArray = [];

    for (let i = 1; i <= 100; i++) {
      for (let j = 1; j <= 10; j++) {
        const order = {
          user_id: i,
          total_price: Math.floor(Math.random() * 1000),
          createdAt: new Date(),
          updatedAt: new Date(),
        };
        orderArray.push(order);
      }
    }

    return queryInterface.bulkInsert("Orders", orderArray);
  },

  async down(queryInterface, Sequelize) {
    return queryInterface.bulkDelete("Orders", null, {});
  },
};

原始碼：sequelize-order.js（GitHub Gist）

STEP 3：執行 Seeder

執行單個 Seeder

sequelize db:seed --seed my_seeder_file.js

執行全部 Seeder

sequelize db:seed:all

STEP 4：前往 DB ，確認資料是否有正確寫入：

建立 100 個使用者（users）。

建立 100 個使用者（users），每個使用者有 10 筆訂單（orders），共 1000 筆資料。

建立 100 個使用者（users），每個使用者有 10 筆訂單（orders），每筆訂單下面有 10 個貨物（items），共 10000 筆資料。

取消執行的 Seeder 可用如下指令：

• 取消最近的 Seeder：sequelize db:seed:undo
• 取消指定的 Seeder：sequelize db:seed:undo –seed my_seeder_file.js
• 取消全部 Seeder：sequelize db:seed:undo:all

五、簡易 Query

STEP 1：在專案資料夾下建立一個 row-queries-exmaple.js 的檔案。

STEP 2：將如下程式複製貼上，這是一個簡單 Raw Queries；會找出 price 低於 50 的 5 筆購買貨物，以及對應的使用者。

const { sequelize } = require("./models");
const { QueryTypes } = sequelize;

async function rawQueries() {
  console.time("rawQueries");
  const results = await sequelize.query("SELECT users.name, items.price FROM users\
         LEFT JOIN orders ON orders.user_id = users.id\
         LEFT JOIN items ON items.order_id = orders.id\
         WHERE items.price < 50 LIMIT 5", { type: QueryTypes.SELECT });
  console.log(JSON.stringify(results, null, 2));
  console.timeEnd("rawQueries");
}
rawQueries();

原始碼：sequelize-raw-queries.js（GitHub Gist）

STEP 3：在終端機輸入：node row-queries-exmaple.js

下圖即可看到看到搜尋結果、程式執行時間。

如果你想要知道 Table Join 時，選擇文字欄位（VARCHAR）與數值欄位（INTEGER）在效能（performance）上的差異，可以參考這篇文章。

文章大綱
一、安裝 Docker、kubectl、minikube 等工具
  ➤ 安裝 Docker
  ➤ 安裝 kubectl
  ➤ 安裝 minikube
二、建立 Node.js Web App
  ➤ 建立「package.json」
  ➤ 建立「server.js」
  ➤ 運行 Node.js Web App
三、將 Node.js Web App 給 Docker 化
  ➤ 建立「Dockerfile」
  ➤ 建立「.dockerignore」
  ➤ 製作 Docker Image
  ➤ 印出建立的 Images
  ➤ 將建立好的 Docker Image 跑起來
  ➤ 確認 Docker Image 運行狀態，並進入網址確認畫面如預期
四、撰寫 K8s 使用的 yaml 檔＆部署 K8s
  ➤ K8s 的 yaml 檔基礎說明
  ➤ K8s 部署
  ➤ 查看部署後 pods 狀態
  ➤ 取得 deployment 的外部 ip，確認是否會顯示網頁
  ➤ 刪除執行中的 K8s
  ➤ 關閉 minikube

本篇文章是在 Mac 的作業系統下操作的

一、安裝 Docker、kubectl、minikube 等工具

安裝 Docker

前往官網下載 Docker 安裝檔，安裝過程就是狂按下一步，這裡就不再多做介紹，下載後要把 App 打開依照步驟執行才算是完成安裝喔！

安裝 kubectl

安裝他才能操作 K8s 喔！

# 安裝 kubectl
brew install kubectl
# 確認是否安裝成功
kubectl version --client
# 查看目前 cluster 運行狀態
kubectl get all

安裝 minikube

這個工具可以讓你在本機(Local)架設 K8s 叢集(Cluster)喔！

# 安裝 minikube
brew install minikube
# 啟動 minikube，啟動 k8s cluster
minikube start
# 查看 minikube 狀態
minikube status
# 取得目前 minikube 的 IP address
minikube ip

二、建立 Node.js Web App

你也可以直接去筆者的 github，直接將專案 Clone 到本機來做測試。

建立「package.json」

{
  "name": "docker_web_app",
  "version": "1.0.0",
  "description": "Node.js on Docker",
  "author": "Dean Lin",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.2"
  }
}

原始碼：node_web_app.json（GitHub Gist）

建立「server.js」

"use strict";

const express = require("express");

// Constants
const PORT = 8080;
const HOST = "0.0.0.0";

// App
const app = express();
app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

原始碼：node_web_app.js（GitHub Gist）

運行 Node.js Web App

在終端機先輸入yarn將套件安裝，再輸入yarn start確認專案可以運行。

三、將 Node.js Web App 給 Docker 化

建立「Dockerfile」

填寫製作 Docker Image 時需要參考的環境＆指令。

FROM node:14

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 8080
CMD [ "node", "server.js" ]

原始碼：Dockerfile（GitHub Gist）

建立「.dockerignore」

填寫製作 Docker Image 時不想要複製的檔案。

node_modules
npm-debug.log

原始碼：.dockerignore（GitHub Gist）

製作 Docker Image

# 登入 Docker
docker login
# ！如果 Docker app沒有開啟就執行下面步驟會報錯！
# 建立 Docker Image
docker build . -t <your username>/node-web-app
# 筆者範例指令
docker build . -t babydragon9703111/node-web-app

印出建立的 Images

docker images

將建立好的 Docker Image 跑起來

# 裡面填寫的 port 是本地端要跑的（對外 port）
docker run -p [port]:8080 -d <your username>/node-web-app
# 筆者範例指令
docker run -p 8080:8080 -d babydragon9703111/node-web-app

確認 Docker Image 運行狀態，並進入網址確認畫面如預期

# Get container ID
docker ps

# Print app output
docker logs <container id>

四、撰寫 K8s 使用的 yaml 檔＆部署 K8s

K8s 的 yaml 檔基礎說明

• apiVersion：API 版本，需要依照 kind 的物件來決定 version。
• kind：建立的物件。
• metadata：描述物件及標籤。
• spec：物件要的功能。

建立nodetest-k8s.yaml來做測試範例，裡面的 image 等相關資訊記得算成自己的

apiVersion: v1
kind: Service
metadata:
  name: node-app-service
spec:
  selector:
    app: node-web-app
  ports:
    - protocol: "TCP"
      port: 8080
      targetPort: 8080
  type: LoadBalancer

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: node-web-app
spec:
  selector:
    matchLabels:
      app: node-web-app
  replicas: 3
  template:
    metadata:
      labels:
        app: node-web-app
    spec:
      containers:
        - name: node-web-app
          image: babydragon9703111/node-web-app:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080

原始碼：nodetest-k8s.yaml（GitHub Gist）

K8s 部署

# 啟動 k8s cluster
minikube start

# 執行部署
kubectl apply -f nodetest-k8s.yaml

查看部署後 pods 狀態

# 此指令會查 default namespace 的資源
kubectl get pods

因為我們在 spec 的 replicas 的值設為 3，所以會產生 3 個 pods。

取得 deployment 的外部 ip，確認是否會顯示網頁

minikube service node-app-service --url

刪除執行中的 K8s

# 指定刪除剛剛建立的 K8s
kubectl delete -f nodetest-k8s.yaml

剛下達指令刪除時，在 STATUS 的部分會顯示 Terminating，過一段時間就會消失嚕～

關閉 minikube

# 如果沒關閉的話，你會發現電腦燙燙的，CPU 居高不下
minikube delete

以上就是 Node.js X Docker X Kubernetes 超簡單範例啦！希望讀者可以透過這篇文章對這些技術有基礎認識～

如果想更近一步了解 K8s Auto Scaling 的技術，歡迎閱讀筆者寫的這篇文章：「模擬 K8s Auto Scaling（可在 Local 端測試）」

熟悉的起手式：「我方便問你一個 Node.js 核心的問題嗎？」

這是一個在了解後，無論面試還是工作，CP 值都很高的題目，建議讀者要真的融會貫通。

大綱

1. 請簡述 Node.js 的 Event Loop
   • 1.1 面試官為什麼會問？
   • 1.2 面試官想從答案確認什麼？
   • 1.3 筆者提供的簡答
2. 回答問題所需具備的知識
   • 2.1 Event Loop 執行的邏輯
   • 2.2 用 Node.js 範例程式確認自己是否理解 Event Loop
   • 2.3 解析 Node.js 範例程式執行順序
3. 衍伸問題
   • 3.1 可以簡述 Node.js 跟 JavaScript 的差異嗎？
   • 3.2 readFile 和 createReadStream 函式的差異？
   • 3.3 REPL 是什麼？

1. 請簡述 Node.js 的 Event Loop

1.1 面試官為什麼會問？

只要你的履歷上有 Node.js，10 間公司至少有 3 間會問這個常見面試題；而且問題的起手式出奇的一致：「我方便問你一個 Node.js 核心的問題嗎？」

1.2 面試官想從答案確認什麼？

• 你了解 Event Loop 對 Node.js 的重要性
• 你能大概說明 Event Loop 每個階段的任務
• 如果出白板題要你解釋程式執行的順序，你可以正確回答

1.3 筆者提供的簡答

Node.js 之所以高效，是因為採取單執行緒與 Event Loop 的概念；將所有需要等待結果、請求外部資源的函式，全部丟到 Event Loop 中等待；而 Event Loop 的邏輯是 Node.js 底層用 C 語言撰寫的 libuv 庫來運行的。

2. 回答問題所需具備的知識

2.1 Event Loop 執行的邏輯

• 了解 MacroTask 的 6 個階段
  • Timer
    等計時器（setTimeout、setInterval）的時間一到，會把他們的 callback 放在這裡等待執行。
  • Pending callbacks
    作業系統層級使用（ex：TCP errors、sockets 連線被拒絕）。
  • Idle, Prepare
    內部使用。
  • Polling：
    • 如果 Queue 不為空，依次取出 callback 函數執行，直到 Queue 為空或是抵達系統最大限制。
    • 如果 Queue 為空但有設置「setImmediate」就進入 Check 階段。
    • 如果 Queue 為空但沒有設置「setImmediate」就會在 Polling 階段等待，直到 Queue 有東西或是 Timer 時間抵達。
  • Check
    處理 setImmediate 的 callback。
  • Close callbacks
    處理關閉連線、檔案的 callback。

Macrotask Queue 在 Evevnt Loop 優先層級較低，接下來介紹優先層級更高的兩個 Queue。

• NextTick Queue 優先層級最高
  「process.nextTick()」的 callback 可以隨意插隊；只要這個 Queue 有東西就會優先執行。

• MicroTask Queue 優先層級次高
  「Promise」的狀態從 pending 轉變為 resolve 或 reject 時，執行的 callback 會進入這個 Queue。

  注意：Promise 在創建時是同步的，不會進入 Event Loop。

2.2 用 Node.js 範例程式確認自己是否理解 Event Loop

大家可以先用紙筆模擬看看下面程式的執行順序：

console.log("start");

process.nextTick(function () {
  console.log("nextTick1");
});

setTimeout(function () {
  console.log("setTimeout");
}, 0);

new Promise(function (resolve, reject) {
  console.log("promise");
  resolve("resolve");
}).then(function (result) {
  console.log(result);
});

(async function () {
  console.log("async");
})();

setImmediate(function () {
  console.log("setImmediate");
});

process.nextTick(function () {
  console.log("nextTick2");
});

console.log("end");

如果答案跟下面結果一樣，那代表你很了解 Node.js 的 Event Loop 邏輯：

start
promise
async
end
nextTick1
nextTick2
resolve
setTimeout
setImmediate

2.3 解析 Node.js 範例程式執行順序

• SETP 1： 順序執行，先把同步函式解決。

  1. 因為 Promise 在創建時是同步的，所以會先執行。

  2. 在 function 前面加上 async 宣告為異步函式，執行時會被轉換為 Promise。

     console.log("start");
     
     new Promise(function (resolve, reject) {
       console.log("promise");
       resolve("resolve");
     }).then(function (result) {
       console.log(result);
     });
     
     (async function () {
       console.log("async");
     })();
     
     console.log("end");
     

• STEP 2： 進入 Event Loop。

  1. 如果執行過程中遇到 NextTick Queue 就優先執行。

     process.nextTick(function () {
       console.log("nextTick1");
     });
     
     process.nextTick(function () {
       console.log("nextTick2");
     });
     

  2. 在處理完最高優先層級後，如果執行過程中遇到 MicroTask Queue 就執行。

     new Promise(function (resolve, reject) {
       console.log("promise");
       resolve("resolve");
     }).then(function (result) {
       console.log(result);
     });
     

  3. 在前兩個高優先層級的 Queue 清空後，返回 Event Loop 繼續執行，setTimeout 設定的時間已到先執行。

     setTimeout(function () {
       console.log("setTimeout");
     }, 0);
     

  4. 接著再在「Check」 階段執行 setImmediate

     setImmediate(function () {
       console.log("setImmediate");
     });
     

以上步驟執行完成後就是範例程式的解答啦～希望對大家理解 Event Loop 有幫助。

3. 衍伸問題

3.1 可以簡述 Node.js 跟 JavaScript 的差異嗎？

考點：確認求職者是否理解自己天天使用的工具

JavaScript 是程式語言，可以在合適的瀏覽器中運行；而 Node.js 是一個能執行JavaScript 的環境，它以 Chrome V8 引擎為核心，再加上 C/C++套件，讓 Sever 端也可以執行 JavaScript。

3.2 readFile 和 createReadStream 函式的差異？

考點：判斷求職者過去專案中使否使用過這類函式，並理解差異

readFile 函式會將讀取到的完整內容存在記憶體後傳給使用者，而 createReadStream 函式則是逐塊讀取檔案，不是全部存在記憶體中；因此要讀取較大的檔案時，建議使用 createReadStream ，利用其逐塊讀取的特性能減少使用者等待時間。

3.3 REPL 是什麼？

考點：對專有名詞是否熟悉，能否解釋

REPL（Read Eval Print Loop）是一個用來執行程式語言的虛擬環境。

就像是我們在瀏覽器的 Console 可以執行 JavaScript 程式碼；在安裝完 Node.js 後，新增一個 JavaScript 檔，在終端機輸入node xxx.js便可以執行它。

感謝大家的閱讀，如果喜歡我的文章可以訂閱接收通知；如果有幫助到你，按Like可以讓我更有寫文的動力，我們明天見～

參考資源：

1. Node.js 的 Event Loop (事件輪詢)到底在做什麼？(筆者部落格)
2. 15 個常見的 Node.js 面試問題及答案
3. 你有沒有想過，到底 Server 是如何「同時處理多個 requests」的？ - Node.js 篇

在許多人的幫助下，本系列文章已成功出版，除了添加新的篇章，更完善了每個案例的應對進退；如果對現在的職涯感到迷茫，也許這本書能帶給你不一樣的觀點～

天瓏書局： https://www.tenlong.com.tw/products/9786263334571

你是十八般武藝樣樣精通，還是樣樣通樣樣鬆？

工程師真的很難，會得不多會被問為什麼沒學，會得很多還要被質疑專業程度；這種比較類型的問題，除非你有事先做功課，不然就算你都會用也未必能在現場對答如流。

大綱

1. 你會的後端框架不只一個，可以說明一下它們之間的差異嗎？
   • 1.1 面試官為什麼會問？
   • 1.2 面試官想從答案確認什麼？
   • 1.3 筆者提供的簡答
2. 回答問題所需具備的知識
   • 2.1 PHP VS Node.js
   • 2.2 用 supervisor 讓 Node.js 熱更新
   • 2.3 不一定要拼個誰輸誰贏
3. 衍伸問題
   • 3.1 既然你先學了 Node.js 的框架，為何後來改用 PHP 的框架？
   • 3.2 使用框架有什麼好處跟壞處？

1. 你會的後端框架不只一個，可以說明一下它們之間的差異嗎？

1.1 面試官為什麼會問？

因為履歷資訊中顯示求職者會如下的後端（Backend）框架：

• PHP：Laravel
• Node.js：Express.js、AdonisJS

當你會的東西多，面試官就會想了解你是每個都學一點，還是真的了解它。

1.2 面試官想從答案確認什麼？

• 能否簡單敘述 PHP 與 Node.js 的差異
• 舉例過去用這些框架做過哪些專案或是功能
• 為什麼會學習新的框架

1.3 筆者提供的簡答

之前使用 PHP 的 Laravel 框架開發過內部管理系統，也曾用 Node.js 的 Express.js 框架完成過餐廳點餐系統。

兩者的差異主要因為程式語言而產生的，PHP 是同步語言、多執行緒，Node.js 是一個能執行 JavaScript 的環境，支援非同步，為單執行緒。

如果專案要求穩定一致的效能，我會偏向使用 PHP 框架；而如果要承接高流量，我會選擇 Node.js 框架。

2. 回答問題所需具備的知識

2.1 PHP VS Node.js

如果面對一個問題只有一種解決方案時，面試官會深入詢問這個技術；但如果面對問題有兩個以上的解決方案，他就會問你在不同情境下該使用什麼技術，每個技術都有各自的優勢，這邊我們就從不同的角度來做分析吧～

• 同步的 PHP vs 異步的 Node.js
  • 同步的 PHP 會為每個 Request 建立一個 thread，每個 thread 都會消耗記憶體，也就是說如果想要服務更多的客戶就要花心思在硬體設備上。
  • 異步的 Node.js 是非阻塞 (non-blocking) I/O 設計，搭配上 Event Loop 可以用一句很形象的話說明：「與其人多但好多人閒著；還不如一個人拼命往死裡做。」
• 多執行緒的 PHP VS 單執行緒的 Node.js

  • 多執行緒 (multi-threaded)的 PHP
    使用阻塞 (blocking) I/O 的設計

    PHP 可以為每個 Request 都開一個執行緒；如果你想要實現非阻塞也能透過 reactPHP 來實現。

  • 單執行緒 (single-threaded)的 Node.js
    使用非阻塞 (non-blocking) I/O 設計 + 提供非同步 (asynchronous) 處理

    Node.js 原則上是單執行緒，但可以透過 PM2 的 Cluster Mode 達到多執行緒。

• 應用場景
  從 Client 端與 Server 端的溝通頻率來做分析：
  • 溝通頻率不高
    PHP 是個不錯的選擇（ex：個人部落格，像 WordPress 就是用 PHP 寫的）。
  • 溝通頻率頻繁
    Node.js 更能激發性能（ex：single-page-application、聊天室）；它適合大吞吐量的系統，較不適合需要大量 CPU 運算的系統。
• 可使用的資源

  • PHP 有 Composer
    Composer 的命名方式：「所有者/package 名稱」

  • Node.js 有 NPM
    NPM 的命名方式：「package 名稱」

    因為 NPM 的命名方式太自由，導致上面有很多的資源都是無效資源，關鍵字第一個找到的未必是最合適的。

• 人才市場
  • 人才數量
    PHP 比 Node.js 早了 10 幾年發行，因此市場上使用 PHP 的人比使用 Node.js 的人更多；如果職位流動性高，用 PHP 開發會比較合適。
  • 薪資
    物以稀為貴，同樣都是新人，會 Node.js 的薪水會略高於會 PHP 的求職者。
• 專案容量
  用 Laravel 跟 Express.js 來比較：
  • 專案初期
    一開始 Laravel 因為包山包海所以專案體積較大。
  • 專案後期
    儘管 Express 是 Node.js 輕量級的框架，但因為實作過程往往要擴充一堆 package，而且一個 package 往往會有很多的 dependency；這些原因容易導致最終實作出來的是一個笨重的專案。
• 程式語言轉換
  除非你的運氣逆天，每次都剛好找到符合你技能樹的公司，而且這間公司專案用的技術還很固定；不然肯定要面對程式語言的轉換，這邊分享幾個轉換時要注意的重點。
  • 找類型相似的框架
    從 PHP 跳到 Node.js 一定會面臨諸多不適應；但如果你選擇的是跟 Laravel 很類似的 AdonisJS 框架，這份不適感會下降許多，反之亦然。
  • 語言語法
    如果你已經熟悉了一種程式語言，我覺得轉換到另外一個語言的學習成本不會太高；但許多內建函式都要重新學習、生命週期也要重新熟悉、錯誤處理的經驗也要重新累積。
  • 專案規模
    如果是只需要 CRUD 邏輯的小專案，那我覺得藉此多瞭解一門程式語言是一個很棒的機會；但如果面臨的是業務邏輯複雜的大專案，我強烈建議一定要選自己熟悉的程式語言，或者團隊中的扛霸子熟悉這門語言；不然出事根本沒人可以救得了。
• 效能
  • 響應速度
    Node.js 靠著 V8 引擎加上非同步的特型，擁有較快的響應速度。
• 面對錯誤的處理

  • PHP 遇到某個 Request 錯誤時，它只對這個 Request 產生影響。

  • Node.js 因為所有 Request 都在單執行緒的 Web-server 中，所以某個 Request 導致的未知錯誤就可能影響到整個 Server。

    不過這塊可以透過 PM2 的 Cluster Mode 與自動重啟來補救。

• 熱更新
  • PHP 修改後，只要刷新頁面就能看到。
  • Node.js 預設沒有熱更新，需要關閉專案後重啟。

2.2 用 supervisor 讓 Node.js 熱更新

在開發階段推薦使用 supervisor 這款套件。

• STEP 1：在全域安裝套件npm install supervisor -g

• STEP 2：建立一個myapp.js的檔案，並複製貼上下面程式

  var http = require("http");
  http
    .createServer(function (req, res) {
      res.writeHead(200, { "Content-Type": "text/plain" });
      res.end("Hello World!");
    })
    .listen(3000, "127.0.0.1");
  

• STEP 3：用node myapp.js啟動程式後，修改res.end("Hello World!");的內容；再刷新網頁後內容不變。

• STEP 4：改用supervisor myapp.js啟動程式，修改res.end("Hello World!");的內容；再刷新網頁後內容更新。

supervisor 也可以做專案資料夾的監控，但是要記得排除一些資料夾（ex：儲存 log 檔的）；否則你的專案就無時無刻在重起了。

如果是正式的網站且流量大，建議使用 PM2 來做處理，它也有監控資料夾的功能。

2.3 不一定要拼個誰輸誰贏

存在即合理

• 小專案不用花太多時間在評估框架及程式語言選擇上
  有些公司對專案要用什麼框架以及程式語言保持著非常謹慎的態度，謹慎的態度是對的，但也要考量到專案的規模；如果今天的專案就是 CRUD 的簡單應用，預估使用者數量不多或是主要來自於內部成員，用什麼框架及程式語言其實都差不多。
• 看組織成員擅長的語言
  如果公司高層為了追求潮流而要求開發人員用一個不熟悉的框架去做專案，他最好祈求專案上線後平平安安；不然出事了公司沒有能夠處理的人才，沒有人會在意一個不能用的網站效能有多好。
• 每個程式語言都有自己的擁護者
  在不同的條件下，每個程式語言都有自己的優勢，而且每年都會誕生新的框架與程式語言；筆者覺得與其不停盲目追逐新的技術，不如先深入研究一個成熟的技術，當你有辦法靠它解決各種現實難題時，再去學新的框架跟程式語言也不晚。

3. 衍伸問題

3.1 既然你先學了 Node.js 的框架，為何後來改用 PHP 的框架？

考點：這題其實是想了解求職者的人格特質

這兩個都是為了解決問題的技術，我一開始用 Node.js 的 Express 框架獨立完成了幾份專案；但後來有一個需要 Team work 的大型專案，因為當時的組長比較熟悉 PHP 的 Laravel 框架，所以我便藉由這個機會學習新的技術；也因為這次的技術轉換，讓我了解不同框架在部署以及效能各方面的差異。

我想透過上面的回答給面試官幾個訊息：

• 我能獨立完成專案，也可以團隊合作。
• 我願意學習新技術。
• 學習的同時會分析不同框架的優劣。

3.2 使用框架有什麼好處跟壞處？

考點：確認求職者對框架的認知

• 好處
  框架能夠讓初學者快速入門並開發出有一定水平的專案，因為框架提供了許多常用的函式，因此可以大幅縮短專案時程；在團隊協作上框架優勢更為明顯，能夠讓成員有一致的開發方式。
• 壞處
  因為框架已經幫開發人員做了太多事情，這會導致開發人員並不理解許多功能的原理，這也造成了一但框架無法滿足功能，初學者的生產力會斷崖式下降；如果長期使用，也容易讓自己的開發思維被限制在框架內。

筆者碎碎念

希望讀者不要只把我提出來的問題當成面試會出的考題；當面試官會這樣詢問時，通常是因為實務上也會遇到類似的問題。

感謝大家的閱讀，如果喜歡我的文章可以訂閱接收通知；如果有幫助到你，按Like可以讓我更有寫文的動力，我們明天見～

參考資源：

1. PHP + Apache Stack vs Node.js
2. 服務端 I/O 效能大比拼：Node、PHP、Java、Go
3. 簡析 Node.js 特點與應用場景
4. 詳細版 | 用 Supervisor 守護你的 Node.js 進程
5. 淺談 Node.js 和 PHP 程式管理

在許多人的幫助下，本系列文章已成功出版，除了添加新的篇章，更完善了每個案例的應對進退；如果對現在的職涯感到迷茫，也許這本書能帶給你不一樣的觀點～

天瓏書局： https://www.tenlong.com.tw/products/9786263334571

大綱
一、建立雲端 MongoDB
  SETP 1：註冊帳號
  SETP 2：建立組織(Organization)
  SETP 3：建立專案(Project)
  SETP 4：建立叢集（Build your first cluster）
  SETP 5：建立 DB 使用者（Create your first database user）
  SETP 6：加入可以存取的 IP（Add IP Address to your Access List）
  SETP 7：載入範例資料（Load Sample Data）
  SETP 8：連線到這個叢集（Connect to your cluster）
二、用 Node.js 取得雲端 MongoDB 的資料

一、建立雲端 MongoDB

SETP 1：註冊帳號

建議直接用 Google 帳號登入就好了，這個是真的有「免費」資源讓大家使用的。

基本上你只打勾才能下一步啦

SETP 2：建立組織(Organization)

左下角的「Get Started」是官方教學，但如果在這個階段「Build your first cluster」會失敗 QQ，所以建議按照文章操作順序比較穩定

點擊「Create an Organization」

輸入組織名稱後點擊「Next」

點擊「Create Organization」建立組織，你之後還是可以邀請其他人進來這個組織，不急於現在。

SETP 3：建立專案(Project)

點擊「New Project」

輸入專案名稱

點擊「Create Project」建立專案

SETP 4：建立叢集（Build your first cluster）

選最右邊「FREE」的

這邊我是選擇「Google Cloud」在「Taiwan」的機器，選好後按「Create Cluster」

SETP 5：建立 DB 使用者（Create your first database user）

點擊「Add New Database User」建立使用者

他有提供三種驗證方式，如果是初學者我建議選擇「Password」就好，而密碼我建議用「Autogenerate Secure Password」產生的比較安全；其他權限都先使用默認就好，按下「Add User」便建立成功～

SETP 6：加入可以存取的 IP（Add IP Address to your Access List）

點擊「Add IP Address」加入 IP

如果你電腦的 IP 是固定的就選「ADD CURRENT IP ADDRESS」，如果是使用手機分享或是其他浮動 IP，你可以選「ALLOW ACCESS FROM ANYWHERE」，但如果選了這個就真的要小心保護你的帳號密碼不要外流

SETP 7：載入範例資料（Load Sample Data）

為了方便讓大家測試與學習，官方提供範例資料讓大家使用

點擊「Load Sample Dataset」即可，大概等個 5~8 分鐘左右載入

SETP 8：連線到這個叢集（Connect to your cluster）

點擊「Connect」來看連線的方式

這裡我推薦使用「MongoDB Compass」，有 GUI 介面就是友善～

下載及安裝的方式請依照自己的作業系統處理，這裏我就不贅述了；但下面連線字串真的要複製起來等等連線要用

打開安裝好的「MongoDB Compass」後，在框框內貼上剛剛複製的連線字串，記得要把 <password> 換成在 「STEP 5 建立 DB 使用者」的密碼

連進去後就能看到範例資料嚕～

二、用 Node.js 取得雲端 MongoDB 的資料

STEP 1：建立一個資料夾，輸入 npm init

SETP 2：安裝 MongoDB 套件 npm install mongodb

STEP 3：建立 index.js 並貼上官方範例程式

SETP 4：將 uri 的內容要改成自己的（你怎麼連線到 MongoDB Compass 這裡就是怎麼設定）

const { MongoClient } = require("mongodb");

// Replace the uri string with your MongoDB deployment's connection string.
const uri =
  "mongodb+srv://<user>:<password>@<cluster-url>?retryWrites=true&writeConcern=majority";

const client = new MongoClient(uri);

async function run() {
  try {
    await client.connect();

    const database = client.db('sample_mflix');
    const movies = database.collection('movies');

    // Query for a movie that has the title 'Back to the Future'
    const query = { title: 'Back to the Future' };
    const movie = await movies.findOne(query);

    console.log(movie);
  } finally {
    // Ensures that the client will close when you finish/error
    await client.close();
  }
}
run().catch(console.dir);

原始碼：Mongo_example.js（GitHub Gist）

STEP 5：在終端機輸入 node index.js

如果順利印出下面的資訊就代表你成功踏入 MongoDB 學習的第一步嚕～

STEP 6：如果你有驗證的心，可以回到 MongoDB Compass

選好 DB 以及 Collection 後，在 filter 輸入 { title: ‘Back to Future’ } ，確認回傳結果是否與 Node.js 查到的相同

大綱
一、文章目標
二、使用技術
  ➤ Redis
  ➤ Lua
三、程式架構
  ➤ 主程式：redisSecKill.js
  ➤ Lua腳本：secKill.lua
四、執行結果
五、補充

一、文章目標

1. 產生秒殺商品基礎資訊(商品名稱、庫存)
2. 模擬秒殺情境，確認是否會超賣
3. 確認有保存購買人資訊

二、使用技術

Redis

1. 如果完全沒有相關基礎，建議先參考這篇文章來安裝 Redis 以及他的 GUI 工具
2. 本篇文章使用 Redis 的 Hash、List type 來儲存資訊

Lua

1. 為了避免超賣，這裡採用 Lua 腳本
2. 在 Redis Server 執行 EVAL 指令時，在結果回傳前只會執行當下 Lua 腳本的邏輯，其他 Client 端的命令須等待直到 EVAL 執行完為止。

Lua 腳本的邏輯應盡量簡單以保證執行效率，否則會影響 Client 端的體驗

三、程式架構

主程式：redisSecKill.js

1. 先啟用 Redis Client 端（如未安裝相關套件，請在專案資料夾下輸入 yarn add ioredis）
2. 用 prepare 函式，以 Hash type 建立參加秒殺的產品庫存
3. 用 secKill 函式模擬使用者購買行為，緩存並執行 Lua 腳本

const fs = require('fs');
const Redis = require('ioredis');
const redis = new Redis({
    host: '127.0.0.1',
    port: 6379,
    password: ''
});

redis.on("error", function (error) {
    console.error(error);
});

async function prepare (item_name) {
    // 參加秒殺活動的商品庫存
    await redis.hmset(item_name, "Total", 100, "Booked", 0);
}

const secKillScript = fs.readFileSync('./secKill.lua');

async function secKill (item_name, user_name) {
    // 1. 緩存腳本取得 sha1 值
    const sha1 = await redis.script("load", secKillScript);
    // console.log(sha1);

    // 2. 透過 evalsha 執行腳本
    // redis Evalsha 命令基本語法如下
    // EVALSHA sha1 numkeys key [key ...] arg [arg ...] 
    redis.evalsha(sha1, 1, item_name, 1, "order_list", user_name);
}

async function main () {
    console.time('secKill')
    const item_name = "item_name"
    prepare(item_name)
    for (var i = 1; i < 10000; i++) {
        const user_name = "baobao" + i
        secKill(item_name, user_name)
    }
    console.timeEnd('secKill')
}
main()

原始碼：redisSecKill.js（GitHub Gist）

Lua 腳本：secKill.lua

在 Lua 腳本執行「取得商品庫存」➜「如果庫存足夠就-1」➜「儲存購買者資訊(List type)」

local n = tonumber(ARGV[1])
local order_name = ARGV[2]
if not n  or n == 0 then
    return 0       
end                
local vals = redis.call("HMGET", KEYS[1], "Total", "Booked");
local total = tonumber(vals[1])
local blocked = tonumber(vals[2])
if not total or not blocked then
    return 0       
end                
if blocked + n <= total then
    redis.call("HINCRBY", KEYS[1], "Booked", n)
    redis.call("LPUSH", order_name,ARGV[3])                                   
    return n;   
end                
return 0

原始碼：secKill.lua（GitHub Gist）

四、執行結果

SETP 1：在專案資料夾下輸入 node redisSecKill.js 模擬秒殺

SETP 2：待執行完後，用 Redis GUI 程式確認商品沒有超賣

SETP 3：確認訂單都有對應的買家

五、補充

上面程式只是 MVP，現實狀況還有很多要討論的：

1. 哪些商品被列為秒殺，如何紀錄
2. 設定秒殺開始時間、結束時間
3. 存在 Redis 的資料怎麼存入關連式資料庫中

如果你對 Redis 感興趣，筆者這邊也整理了很多相關資源：
1. 一文讓你徹底瞭解 Redis(進階)，史上最全,不看後悔！！！【建議收藏】
2. 【总结】瞬时高并发（秒杀/活动）Redis 方案
3. redis 之 sorted sets 类型及操作
4. node.js 中对 redis 的安装和基本操作
5. Node.js 中实践 Redis Lua 脚本
6. 使用 Redis 搭建电商秒杀系统

筆者也是剛學習 Redis 的新人，如果描述有誤，或是有更好的解決方式，再麻煩大神們不吝賜教，感謝～

大綱
一、請用一段話簡述 Node.js 的 Event Loop
二、Node.js 在 Event Loop 邏輯下的執行順序
三、Event Loop 執行的邏輯
  ➤ 了解 MacroTask 的 6 個階段
  ➤ NextTick Queue 優先層級最高
  ➤ MicroTask Queue 優先層級次高
四、解析一開始 Node.js 範例程式執行順序
  ➤ 順序執行，先把同步函式解決
  ➤ 進入 Event Loop

一、請用一段話簡述 Node.js 的 Event Loop

「Node.js 之所以高效，是因為採取單執行緒與 Event Loop 的概念；將所有需要等待結果、請求外部資源的函式，全部丟到 Event Loop 中等待；而 Event Loop 的邏輯是 Node.js 底層用 C 語言撰寫的 libuv 庫來運行的。」

有興趣的朋友可以來 GitHub 上看 libuv 的程式：

1. 前往 libuv 的 GitHub
2. 看運作的核心程式碼「core.c」
3. 搜尋「uv_run」，直接看最原本的邏輯

二、Node.js 在 Event Loop 邏輯下的執行順序

大家可以先用大腦模擬看看下面程式的執行順序：

console.log('start');

process.nextTick(function () {
    console.log('nextTick1');
});

setTimeout(function () {
    console.log('setTimeout');
}, 0);

new Promise(function (resolve, reject) {
    console.log('promise');
    resolve('resolve');
}).then(function (result) {
    console.log(result);
});

(async function () {
    console.log('async');
})();

setImmediate(function () {
    console.log('setImmediate');
});

process.nextTick(function () {
    console.log('nextTick2');
});

console.log('end');

原始碼：event_loop.js（GitHub Gist）

如果答案跟下面結果一樣，那代表你很了解 Node.js 的 Event Loop 邏輯：

start
promise
async
end
nextTick1
nextTick2
resolve
setTimeout
setImmediate

三、Event Loop 執行的邏輯

了解 MacroTask 的 6 個階段

Timer：等計時器（setTimeout、setInterval）的時間一到，會把他們的 callback 放在這裡等待執行。

Pending callbacks：作業系統層級使用（TCP errors、sockets 連線被拒絕）。

Idle, Prepare：內部使用。

Polling：

1. 如果 Queue 不為空，依次取出 callback 函數執行，直到 Queue 為空或是抵達系統最大限制。
2. 如果 Queue 為空但有設置「setImmediate」就進入 check 階段。
3. 如果 Queue 為空但沒有設置「setImmediate」就會在 Polling 階段等待直到 Queue 有東西或是 Timer 時間抵達。

Check：處理 setImmediate 的 callback。

Close callbacks：處理關閉連線、檔案的 callback。

Macrotask Queue 在 Evevnt Loop 優先層級較低，接下來介紹優先層級更高的兩個 Queue。

NextTick Queue 優先層級最高

「process.nextTick()」的 callback 可以隨意插隊；只要這個 Queue 有東西就會優先執行。

MicroTask Queue 優先層級次高

「Promise 」的狀態從 pending 轉變為 resolve 或 reject 時，此時執行的 callback 會進入這個 Queue。

注意：Promise 在創建時是同步的，不會進入 Event Loop。

四、解析一開始 Node.js 範例程式執行順序

順序執行，先把同步函式解決

1. 因為 Promise 在創建時是同步的，所以會先執行
2. 在 function 前面加上 async 宣告為異步函式，執行時會被轉換為 Promise

console.log('start');

new Promise(function (resolve, reject) {
    console.log('promise');
    resolve('resolve');
}).then(function (result) {
    console.log(result);
});

(async function () {
    console.log('async');
})();

console.log('end');

原始碼：sync_function.js（GitHub Gist）

start
promise
async
end

進入 Event Loop

1. 如果執行過程中遇到 NextTick Queue 就優先執行

process.nextTick(function () {
    console.log('nextTick1');
});

process.nextTick(function () {
    console.log('nextTick2');
});

原始碼：nextTick_queue.js（GitHub Gist）

nextTick1
nextTick2

2. 在處理完最高優先層級後，如果執行過程中遇到 MicroTask Queue 就執行

new Promise(function (resolve, reject) {
    console.log('promise');
    resolve('resolve');
}).then(function (result) {
    console.log(result);
});

原始碼：MicroTask_queue.js（GitHub Gist）

resolve

3. 在前兩個高優先層級的 Queue 清空後，返回 Event Loop 繼續執行，setTimeout 設定的時間已到先執行。

setTimeout(function () {
    console.log('setTimeout');
}, 0);

原始碼：setTimeout_function.js（GitHub Gist）

setTimeout

4. 接著再在「Check」 階段執行 setImmediate

setImmediate(function () {
    console.log('setImmediate');
});

原始碼：setImmediate_function.js（GitHub Gist）

setImmediate

以上步驟執行完成後就是範例程式的解答啦～希望對大家理解 Event Loop 有幫助。

參考資源：

1. 完整圖解Node.js的Event Loop(事件迴圈)
2. 15 尚硅谷 前端面试题 nodejs事件轮询机制

一、打包工具 pkg
  ➤ 安裝
  ➤ pkg 打包參數說明
  ➤ package.json 參數說明
二、實際範例展示
  ➤ package.json 參數設定
  ➤ 產生執行檔
  ➤ 執行上可能遇到的問題
  ➤ 搭配環境變數執行的方式

一、打包工具 pkg

安裝

全局安裝，讓每個 Node.js 專案都能使用

npm install -g pkg

pkg 打包參數說明

安裝完後輸入 pkg -h 會顯示他能用的打包參數，下面說明常用的：

• -t：目標打包給哪個系統用的(Linux, macOS and Windows)，如未設定會產生 3 個檔案
• -c：打包會參考 package.json 或是其他 json 檔案
• -o：檔案輸出名稱

package.json 參數說明

{
    "pkg": {
        "scripts": [
            "build/**/*.js"//需要打包的其他js文件
        ],
        "assets": [
            "dist/**/*"//靜態文件目錄
        ]
    }
}

二、實際範例展示

以下範例的原始碼：https://github.com/dean9703111/medium_to_airtable

有時你設計了一個很有趣的功能，但如果他的前置作業太麻煩，非相關領域的人沒法無腦操作時就會阻礙他的推廣；相反如果他毫無使用門檻就會很多人願意嘗試看看。

這裏我就使用之前分享的 side project — 『透過爬蟲讓 Airtable 管理你的 Medium 文章』一步步說明如何操作。

package.json 參數設定

• 撰寫 scripts：記得不要去死背套件指令，需要記憶的事情交給電腦就好。這裏我新增了一個『build』的指令，他會以 main.js 作為入口檔，依據 package.json 的設定產生一個給 macOS 使用的執行檔。
• 設定 pkg：把『node_modeles』的資料夾全部視為靜態檔即可

{
...
  "scripts": {
    "build": "pkg main.js -t node12-macos-x64 -c package.json"
  },
  "pkg": {
    "assets": [
      "node_modules/**/*"
    ]
  }
...
}

產生執行檔

在上一步我們寫好 scripts 後可以用如下指令產生執行檔：

1. 使用 npm：npm run build
2. 使用 yarn：yarn build

如果沒有特別指定檔案產生的位置就會出現在資料夾的根目錄喔～

執行上可能遇到的問題

你可以直接下載macOS的執行檔玩玩看：https://github.com/dean9703111/medium_to_airtable/raw/master/app/medium-to-airtable

只要用 Terminal 前往檔案資料夾的位置，輸入 ./medium-to-airtable 即可執行，但應該會遇到如下錯誤：

回去看程式碼會發現錯誤的原因是因為無法讀取 .env 的環境變數

搭配環境變數執行的方式

所以我們只需要在執行檔案前輸入原本設定在 .env 檔的資料就能夠順利執行：

ENV1=xxx ENV2=yyy ENV3=zzz ./execute_file

以這個 side-project 來說會長這個樣子（參數要怎麼填請參考這篇文章）：

MEDIUM_PAGE="https://medium.com/你的網頁" SHOW_BROWSER=false AIRTABLE_API_KEYKEY='你申請的api' AIRTABLE_BASE='airtable的id' ./medium-to-airtable

然後就可以順利執行嚕～

如果你對這個專案有興趣可參考相關系列文章：
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(上) — 遇到需求時的分析以及執行步驟
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(下) — 如何使用這個工具
➤ 透過爬蟲讓 Airtable 管理你的 Medium 文章(補充篇) — 文章字數統計

認真說這個打包工具比我想像的還要神，而且使用起來也沒什麼難度，如果手上剛好有熱騰騰的 side-project 趕快用這個套件來炫耀一波吧！

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定
不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的
為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

需要安裝哪些工具

說明包含 windows/mac 兩個系統的設定

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v16.19.1 (使用nvm安裝，後面會介紹)

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

windows 安裝步驟

1. 先進入windows下載頁面
2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

3. 下載後一路瘋狂下一步即可

4. 安裝後開啟命令提示字元(CMD)

5. 在 CMD 輸入指令確認 nvm 是否安裝成功

mac 安裝步驟

1. 打開終端機(Terminal)，以下步驟皆在終端機操作
2. mac 建議先下載 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. 下載後安裝 nvm

brew install nvm

4. 在終端機輸入指令確認 nvm 是否安裝成功

用 NVM 安裝 node.js

• 指令：nvm install [version]
• 請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

nvm install 16.19.1

筆者nvm安裝版本：0.39.3

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控
windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

git fetch

• 抓取遠端數據庫更新

git pull

• 更新遠端數據庫

git push

筆者windows git安裝版本：2.27.0.windows.1

4. yarn

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠
下載頁面

常用指令

• 依據 package.json 安裝所有套件

yarn

• 安裝到 dependencies

yarn add [package]

• 安裝到 devDependencies

yarn add [package] –save-dev

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

yarn global add [package]

筆者yarn安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度
VScode下載頁面

成功要選人少的路走，套件要選人多的來用

如何選擇 Node.js 中發出 Request 的套件？

雖然眾多的套件都能實現這個目標，但還是把套件做個簡單的區分：

1. 古老且沒再更新的套件：https、xmlhttprequest、request(這個套件在今年二月宣告廢棄)
2. 使用人數眾多且持續更新的套件：superagent、node-fetch、got、axios

原則上選擇使用人數眾多且持續更新的套件最安全，因為古老的套件通常文件不齊全且無人維護，如果某一天宣告廢棄你的專案就要大量改寫了

本專案採用 axios 來實現這個需求，如果你有興趣你也能嘗試不同的套件來完成今天的功能

今日目標

1. axios 基礎介紹

1.1 安裝 / GET / POST 基礎用法

1.2 請求配置說明

2. 用 axios 發出 LINE 通知

1. axios 基礎介紹

1.1 安裝 / GET / POST 基礎用法

• 安裝

  npm install axios
  yarn add axios
  

• GET 基礎用法

  const axios = require('axios'); // 引入套件
  axios.get('url/users', { // 填入 api 網址
      params: { // 傳入 params 物件
          ID: 12345
      }
  })
  .then(function (response) { 
      // 處理成功後要做的事
      console.log(response);
  })
  .catch(function (error) {
      // 發生意外地處理
      console.log(error);
  })
  

• POST 基礎用法

  axios.post('url/users', { // 要傳送的資料由後方物件帶入
      firstName: 'Fred',
      lastName: 'Flintstone'
  })
  .then(function (response) {
      console.log(response);
  })
  .catch(function (error) {
      console.log(error);
  });
  

1.2 請求配置說明

• axios 的組成結構：

  axios.(config 物件)
  .then(function (response) {})
  .catch(function (error) {});
  

• config 物件：發出 Request 的配置選項，其中只有 url 為必填

  {
      // url 為必填
      url: '/users',
  
      // method 是發出 Request 時使用的方法
      method: 'get', // 默認為 get
  
      // baseURL 如果填寫就會被添加到 url 前面，除非 url 為絕對路徑
      baseURL: 'https://some-domain.com/api/',
  
      // 你可以在這個地方定義自己的 headers
      // 通常會拿來設定 Authorization、Content-Type
      headers: {'Content-Type': 'application/json'},
  
      // params 通常跟著 GET method 一起使用
      // 這裡填寫的參數會帶入 url 後面，ex : .../user?ID=123
      params: {
          ID: 123
      },
  
      // data 只適用於 POST、PUT、PATCH 這幾個 method
      // 主要作為 Request 傳送的資料
      data: {
          firstName: 'Fred'
      },
  
      // Request 時間超過 1000毫秒(1秒)後會被中止
      timeout: 1000,
  
      // 選項: 'arraybuffer', 'document', 'json', 'text', 'stream'
      // 瀏覽器才有 'blob'
      responseType: 'json', // 默認為 json
  
       // 限制 http 回應時的內容大小
      maxContentLength: 2000,
  }
  

  這裡只列出常用的配置選項，如果你有興趣深入研究請參考官方文件

• 下面列出使用 then 時常用的回應參數

  axios.get('/users/123')
  .then(function(response) {
      console.log(response.data); // api 回傳的資料會在這裡
      console.log(response.status); // 這個是 HTTP狀態碼
      console.log(response.config); // 這個 Request 的 config
  });
  

2. 用 axios 發出 LINE 通知

在對 axios 有基礎了解後我們就把昨日在 POSTMAN 設定 Request 的參數搬移到專案程式吧。在專案 tools 資料夾內新增 lineNotify.js，今天我們要用這隻程式發出 LINE 通知

• 因為傳送 data 的資料格式為 form-data ，所以請先下指令 yarn add form-data 安裝套件喔

tools/lineNotify.js

const axios = require('axios')
var FormData = require('form-data');
require('dotenv').config();

function lineNotify () {
    const token = process.env.LINE_TOKEN;
    
    // 使用 form-data 傳遞資料
    const form_data = new FormData();
    form_data.append("message", '測試 lineNotify');

    // 設定 LINE Notify 的 權杖 & form-data
    const headers = Object.assign({
        'Authorization': `Bearer ${token}`
    }, form_data.getHeaders());
    
    axios({
        method: 'post',
        url: 'https://notify-api.line.me/api/notify',
        data: form_data,
        headers: headers
    }).then(function (response) {
        // HTTP狀態碼 200 代表成功
        console.log("HTTP狀態碼:" + response.status);
        // 觀察回傳的資料是否與 POSTMAN 測試一致
        console.log(response.data);
    }).catch(function (error) {
        console.error("LINE通知發送失敗");
        if (error.response) { // 顯示錯誤原因            
            console.error("HTTP狀態碼:" + error.response.status);
            console.error(error.response.data);
        } else {
            console.error(error);
        }
    });
}
lineNotify()

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   node tools/lineNotify.js
   

2. 確認印出的 HTTP狀態碼 & 回傳的資料與 POSTMAN 測試結果一致

   

3. 如果你的 LINE 收到發出的通知就代表你成功嚕！

   

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我昨天的把昨天的程式碼打包成壓縮檔，你可以在乾淨的環境為專案加入發出LINE通知的功能
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 要在tools/google_sheets資料夾放上自己的憑證，申請流程請參考Day17
  • 調整fanspages資料夾內目標爬蟲的粉專網址
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)
    • 填上IG登入資訊
    • 填上SPREADSHEET_ID
    • 填上爬蟲執行時間(CRONJOB_TIME)
    • 填上LINE Notify申請的權杖(LINE_TOKEN)，申請流程請參考Day27
  • 在終端機下指令 npm install forever -g ，讓你在終端機的任何位置都能管控排程
  • 在sh資料夾中設定執行排程的shell script