相信很多人在面對繁瑣重複的工作時，腦袋可能會冒出一句話：「如果有工具可以幫我搞定就好了！」

這幾個月我收到許多 AI 輔助開發的企業內訓邀請；為了呈現最高品質的內容，我想把過去 YouTube 影片底下的留言彙整起來。

但問題來了，YouTube 並沒有匯出留言的功能

而我有些影片留言就有幾百則，如果手動整理，那是一個非常浩大且無趣的過程。

這就是我在日常工作遇到的痛點，我相信大家在自己的工作中，一定也有對應的痛點。

這邊再分享一個實際案例，前陣子我受邀到三軍總醫院分享 AI 輔助開發的經驗。

當時就以醫院的兩大痛點「月報製作」和「排班系統」當案例，現場向醫護人員展示 AI 的可能性，以及要注意的資安議題。

分享這些案例，是想讓大家了解，過去我們可能有想法，但因為沒有技術，因此只能等別人開發

但現在，只要想法與需求足夠明確，其實是有辦法在 AI 的輔助下，自己完成工具的。

但實際動手時，會遇到幾個問題。

首先，不管你選擇的 AI Agent 是 Claude Code、Codex 還是 Cursor；它們在執行任務時，時常會跳出一些操作權限的提醒，問你要同意還是拒絕。

假如你沒有相關技術背景，其實很難判斷該接受還是拒絕，而且閱讀這些資訊真的很花時間；要是不小心接受了 AI 的危險指令，電腦甚至有被清空磁碟或格式化的風險。

① 在隔離環境執行 Claude Code

所以我會先跟大家分享，如何用 Claude Code 搭配 Docker 建立一個可以放心讓 AI 執行的隔離環境；在這個環境中，AI 可以自動執行所有指令，不用擔心影響到自己的電腦。

② 設計好系統目標後，放手讓 AI Agent 執行

但在讓 AI 執行前，我們需要先告訴他明確的目標，以及驗收的標準。如果可以，最好再指定使用的技術，這樣得到的成品會更符合自己的預期。

③ 加入 Git 版本控制

而在 AI 製作完初版後，我們要先加入 Git 版本控制。因為 AI 修改程式碼的幅度很大，如果沒有版本控制，改壞就回不去了。

④ 透過 Hostinger 部署上線

另外如果你想把成果分享給朋友，或作為個人的作品集；我會分享透過 Hostinger 部署上線的步驟。

⑤ 上線後要考量的事

但上線只是考驗的開始，我也會分享系統上線後可能會遭遇的挑戰。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 危險模式】怕 AI 搞壞電腦？用 Docker 隔離沙盒讓它火力全開，再用 Hostinger 部署上線 | AI Agent | Vibe Coding

① 在隔離環境執行 Claude Code

在正片開始前，我先說明會使用到的工具

Claude Code

首先你需要選一個 AI Agent，這隻影片的範例是 Claude Code；目前需要付費升級到 Pro 以上的版本才能使用。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝

curl -fsSL https://claude.ai/install.sh | bash

另外 Windows 可以參考下面的指令

irm https://claude.ai/install.ps1 | iex

Docker

接下來要安裝是 Docker，他可以幫我們建立隔離環境的「容器」

https://www.docker.com/products/docker-desktop/

如果你直接在電腦的終端機執行 Claude，AI 就有機會動到電腦裡的資料與設定；而 Docker 的作用，就是把 Claude 的執行環境限制在容器之內。

在這樣的狀態下，AI 執行起來會安全許多，因為他看不到容器外的資訊。

在官網上，你可以根據自己的作業系統選擇要安裝的版本。安裝完成後打開 Docker Desktop，不需要註冊，也不用登入帳號。

看到左下角有一個綠色的「Egine Running」，就代表 Docker 引擎已經在你的電腦背景跑起來了。

如果想更確定的話，可以在終端機輸入 docker -v 來確認

Node.js

再來因為今天示範的是網頁工具，所以我們需要安裝 Node.js，由於 Node.js 有許多版本，所以我們要透過 nvm 來安裝與管理。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝。

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

而 Windows 可以到官網下載最新的「setup.exe」安裝程式。

https://github.com/coreybutler/nvm-windows/releases

安裝完成後，重新開啟終端機，並輸入 nvm -v 確認版本，接著再輸入 nvm install –lts 安裝最新版本的 Node.js，並輸入 node -v 確認有切換到最新版本。

安裝程式碼編輯器 IDE

接著我們要安裝一個程式碼編輯器（IDE），我這邊使用的是 Cursor，但如果你想用 VS Code 或 Antigravity 也都可以

安裝 Dev Containers 外掛

裝好 IDE 後，點擊左側的 Extensions，搜尋「Docker Dev Containers」，選第一個進行安裝即可。

安裝完成後，我們的程式碼編輯器就能直接在 Docker 容器裡面工作了。

下載練習用的專案

確認前面的工具都準備完成後，我們要透過 Git 來下載練習用的專案

https://git-scm.com/install/windows

如果你是第一次使用 Git，可以到官網根據自己的系統下載，安裝完成後輸入 git –version 確認版本。

另外輸入下面兩行，可以確認有沒有完成帳號的設定。

git config --global user.name
git config --global user.email

這些設定都完成後，就可以下載專案了，歡迎路過按個 Star，讓我知道自己的分享對大家有幫助：

https://github.com/deancourse/claude-code-docker-container

大家可以直接 Fork 我的 Repository 來體驗，Fork 完成後，點擊 Code，從裡面複製專案網址。

然後回到程式碼編輯器，點擊「Clone Repo」，貼上剛剛複製的網址來下載專案。

指定下載路徑，完成後點擊「開啟」，就可以跟著一起操作了。

專案簡介

這個專案我是參考 Claude Code 官方的範本修改的

我在它的基礎上，加上了前端網頁設計與 Git Commit 的 Skill，以及給 AI 參考的 CLAUDE.md，這份 CLAUDE.md 是參考 andrej-karpathy 的版本

在 IDE 啟動沙盒

在了解專案基礎架構後，輸入「F1」貼上 Dev Containers: Reopen in Container

這個指令會幫你下載容器所需的資源，第一次執行會比較久，啟動完成後，左下角就會顯示 Container Claude Code Sandbox。

這邊提醒一下大家，我在企業內訓時，有部分學員遇到啟動失敗的問題；通常把整個 IDE 關掉重啟就會成功，如果還是不行，可以把錯誤訊息貼到 Claude Code 進行分析。

確認 Claude Code 可以使用

接著我們打開終端機輸入 claude，第一次在這個容器操作時會需要登入；登入後，你會發現這是一個非常乾淨的 Claude。

在 /skills 的部分，你只會看到我預先放進去的技能

而 /permissions 這塊，完全是空白的

接著，我們來做一個測試，跟 AI 說：

幫我列出桌面有哪些檔案

如果是在自己電腦的終端機執行這個指令，AI 會列出桌面的檔案；但因為我們這裡是容器，所以你會看到 AI 跟你說他找不到。

因為他在容器裡面，而桌面這個資料夾，是在容器外面；做到這邊先給自己拍拍手，我們已經完成了隔離環境，接下來就能開啟無限制模式，讓 AI 大展身手

② 設定系統目標，讓 AI 火力全開

大膽執行危險模式

確認 AI 在容器內，碰不到容器外的資料後，我們先用 Control + C 關閉這個對話。

然後就可以用 claude –dangerously-skip-permissions 的方式啟動 Claude 了。

啟動時，Claude 會跳出警告，要選擇「Yes,I accept」才能繼續。

在這個模式下，AI 不會再詢問權限相關問題，可以火力全開。

定好目標讓 AI 執行

但正因為 AI 會火力全開，所以我們在設定執行目標時，越精確越好，否則 Token 額度會消耗得非常快。

比如今天要跟大家示範的是製作「YouTube 留言彙整工具」，假使我只給他這麼一句話當目標，最後的成果通常會不如預期。

根據我的經驗，需求至少要涵蓋 3 個要素：「使用情境、技術限制、驗證方式」

我想要建立一個 YouTube 留言彙整工具，需求如下：

【專案結構】
1. 放在目前 repo 的根目錄，不需建立子資料夾
2. 為了方便部署，package.json 必須在根目錄
3. 在 README.md 增加一節說明使用方式

【使用情境】
1. 輸入「播放清單」網址，彙整清單內所有影片的留言
2. 輸入「單支影片」網址，彙整該影片的留言
3. 輸入「頻道」網址，彙整頻道內影片的留言
4. 網址輸入欄可以共用，有輸入提示
5. 載入留言時，會有進度條，知道現在正在抓取哪支影片

【篩選條件】
- 可以設定搜尋的時間範圍（起訖日期）
- 可以設定關鍵字，只保留包含關鍵字的留言

【技術限制】
- 使用 Node.js 開發
- 不需透過 YouTube API 取得資料，參考 npm 既有套件（取得評論的）
- 匯出結果先呈現在網頁上，要有階層關係、影片縮圖，可下載成 Markdown（不同影片不同檔案）

【驗證方式】
請用下面三個真實網址，為所有情境撰寫測試：
- 播放清單：https://www.youtube.com/watch?v=2hbYCe_E5aU&list=PLWWZkn1dW3eAvSZfJv0-02q27JIsfbN2f
- 單支影片：https://www.youtube.com/watch?v=2hbYCe_E5aU
- 頻道：https://www.youtube.com/@dlcorner
測試必須包含以下驗收條件，低於門檻視為失敗：
① 播放清單：抓到的影片數量 ≥ 10 支
② 單支影片：留言總數 ≥ 400 則
③ 頻道：列出的影片數量 ≥ 40 支
④ 設定時間範圍後，結果中不得出現範圍外的留言
⑤ 設定關鍵字後，每一則留言都必須包含該關鍵字

完成後執行所有測試，如果有失敗的案例，
請修復後重新執行，最多嘗試 10 次；
最後回報每個情境實際抓到的影片數與留言總數。

【專案結構】為未來的部署做準備

首先在專案結構這塊，我要求他直接在 Repo 根目錄下開發，並要求 package.json 這個存放專案資訊的檔案要放在根目錄，方便未來部署。

如果沒有事先交代，AI 很可能會另外建一個子資料夾，把整個專案放在裡面，這會導致部署時需要再額外調整資料夾結構。

【使用情境】把模糊的想法變成明確的功能

在使用情境這塊，如果僅提供「幫我做一個 YouTube 留言彙整工具」這種模糊指令，那 AI 針對細節只能靠猜，所以我把實際的情境拆成「播放清單、單支影片、頻道」這三種。

因為這就是我實際會用到的場景，而篩選條件則是使用情境的延伸，目的是讓我更精準地獲得資訊。

【技術限制】決定成品長什麼樣子

至於技術限制，是在幫 AI 縮小工具的選擇範圍；這邊我指定使用 Node.js 開發，如果不指定，AI 可能會使用其他程式語言。

再來是「不透過 YouTube API」，因為官方 API 需要跑另一套流程，而我希望用現成的套件來處理就好。

最後匯出格式我也明確指定要使用網頁，並呈現階層關係與影片縮圖，而且要讓我能下載成 Markdown 格式方便後續使用。

【驗證方式】讓 AI 沒辦法自我感覺良好

最後則是驗證，AI 時常沒有完成任務，卻騙我們說他搞定了。

所以我給了三個真實網址，並設下具體的判斷規則，這些數據都是我頻道的真實資料。

當執行結果不符合這些規則時，AI 就會自動除錯。加入測試後，我們就能大幅減少手動驗證的成本。

最後三行：讓 AI 自己跑完「測試 → 修復」的迴圈

最後三行，我設計了一個測試迴圈。

因為我們是讓 AI 用放飛自我的模式執行，所以 Token 額度燒得很快。

尤其在他遇到無法解決的錯誤時，燒得最兇，所以我設定了一個嘗試次數上限，作為失敗時的停損點。

人工驗證

稍等一段時間，AI 回報他已經完成了任務，並且測試全數通過。

但做完跟做好是兩件事，這邊我跟大家簡單說明專案的架構。

先打開 package.json 這個檔案，裡面會有專案的名稱、描述、指令，以及使用到的套件。

然後開啟一個新的終端機，輸入 npm run start 來啟動專案：

你也可以直接請 AI 幫你啟動，但如果對專案架構有基礎認知會更好。

接著我們把網址複製下來貼到瀏覽器上，先驗證單支影片是否可以運作，點擊「開始驗證」後，工具就會開始幫我們彙整 YouTube 留言。

稍等一段時間就執行完畢了，你可以看到影片的縮圖，以及下方的留言階層；確認符合預期後，便可點擊「下載 Mardown」來看看呈現的結果是不是自己要的。

在驗證單隻影片符合需求後，就可以擴增測試範圍到「播放清單」與「頻道影片」。

儘管功能都符合預期，但有些細節是在擴增測試範圍後才會發現的，像是有多隻影片的狀態下，需要往下滑才能看到後面的影片留言，操作上並不直覺。

這個部分，我也會在後面的章節來做優化。

③ 加入 Git 版本控制，改壞還有回頭路

在確認基礎功能符合預期後，我們要給這個專案加上版本控制，這邊會使用到 Git 這個工具。

這樣就算 AI 未來把專案改壞了，我們都還有回頭路可以走。

建立第一個存檔點

這邊先請 AI 幫我們產生 commit，直接使用 Git Smart Commit 這個 Skill 即可。

/git-smart-commit

你可以把 commit 想像成遊戲的「存檔點」，每完成一個階段就存一次檔，就算後面打輸了，也能回到上一個存檔點重來。

畢竟 AI 修改程式碼的幅度很大，有時你只是請他調整一個小功能，他卻順手動了其他地方，如果沒有存檔點，改壞就真的回不去了。

推上 GitHub，為部署做準備

最後，我建議把專案推上 GitHub，除了多一份雲端備份，後面部署上線時也會用到。

點擊左側的「Source Control」，接著選擇「同步變更」，然後你就會看到錯誤訊息：

這是因為我們還在 Docker Container 環境裡面，你需要點擊左下角的「Container Claude Code Sandbox」，然後選擇「Reopen Folder Locally」用本機的資料夾開啟：

此時再點擊一次「同步變更」，就可以把資訊傳到 GitHub，接著來到 GitHub 頁面，看到專案的資料有上傳上去，就代表你成功嚕！

優化專案並同步更新

有了存檔點後，我們就可以來繼續優化專案了，像我覺得現在的網頁太素，影片一多操作起來要往下一直拉，不方便，就可以直接請 AI 使用前端技能幫我們優化一下：

/frontend-design
幫我美化頁面質感，希望撈取過程可以切換到不同影片的縮圖，讓我知道現在執行到哪一個，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串

稍等一段時間，AI 就完成了優化，除了外型比先前的版本更好看外。

你會發現他撈取過程會切換到不同影片的縮圖，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串，這樣子我們網頁的易用性就更好了。

如果想把這個版本更新上去，流程是一樣的，使用 Git Smart Commit 這個 Skill：

/git-smart-commit

然後選擇「Reopen Folder Locally」用本機的資料夾開啟，再把變更推送到 GitHub 就好。

④ 透過 Hostinger 將網站部署上線

這邊跟大家說明一下，如果專案是純前端的靜態網頁，我們可以透過 GitHub Pages 來做部署

但因為今天的範例專案有需要一台伺服器來運行，所以我用 Hostinger 來做示範：https://hostinger.com/deanlin10

進入官網後，可以透過 Google 帳號直接註冊登入，因為我們是網頁專案，所以點擊左側的「Websites」分頁。

這邊你會看到不同方案的價格，週期越長，價格會越便宜；如果你有輸入我的優惠碼「DEANLIN」，會再獲得 10% 的優惠。

如果體驗跟想像不符，官方也有 30 天退款保證，讓大家可以更放心地使用。

接著再回到部署的流程，我們在「Websites」下面選擇「Web Apps」，接著點擊「Add website」，選擇「Deploy Web App」。

如果你有購買 Domain，可以直接從這邊選擇，又或者使用「Use temporary domain」這種暫時性的網址。

然後你會看到一張世界地圖，這是在選擇伺服器的位置，建議選擇離延遲比較低的機房，這邊我就選擇 Malaysia。

接下來，你可以選擇上傳檔案，但因為我們的專案已經同步到 GitHub，所以選擇匯入指定的 GitHub Repository 即可。

在與自己的 GitHub 建立連線後，你可以直接貼上 GitHub 專案的網址，然後選擇 Deploy 即可。

中間會詢問你一些部署的參數，你可以根據實際需求調整。

這邊我採用默認值來部署，接著稍等一段時間，它就會顯示部署完畢！

我們可以點擊這個臨時網址來驗證功能，首先你可以看到至少網頁是有成功渲染出來的，並且可以抓到留言，切換影片留言也會跟著切換，Markdown 檔案也可以順利下載。

走到這一步真的太感動了，還沒幫影片按讚的朋友，可以順手按個讚！

⑤ 系統上線後，才是考驗的開始

在這個專案中，我們使用套件而非官方提供的 API 來抓資料，雖然也能達到相同目的，但是有代價的。

大量使用可能被封鎖

首先，如果這個工具是你個人使用，那通常不會有問題；但如果變成網頁開放讓大家使用，一旦使用人數多了，就容易被官方判定為「異常」，進而被封鎖。

網頁可能會改版

另外我們使用的套件是參考網頁結構來取得資訊的，這代表當 YouTube 改版後，如果套件沒有跟著更新，你的程式就抓不到東西了。

不是對錯，而是取捨

講到這邊，可能會有人說：「那直接走官方 API 不是更穩定？」

沒錯，官方 API 更穩定，如果要打造正式產品，我也推薦走官方的路。

但如果你期待的是把專案 Clone 下來就能直接跑，不需要那麼多複雜的步驟，那今天這個範例就夠用了。

在真實世界中，沒有最好的方案，只有當下最合適的選擇。

結語：即使使用者只有你，在 AI 時代也值得開發

最後想跟大家分享我自己在 AI Coding 上的心得。我的本職是軟體工程師，寫了十幾年的程式。

過去評估一個工具值不值得做，看的是需要花多少時間，以及有多少受眾。

但在 AI 時代，這個邏輯改變了

如果工具能用 AI 製作出來，即使受眾只有自己一個人，那也值得做。

就拿彙整 YouTube 留言這個案例來說；我不確定多少人有相同需求，但我知道純手動會把自己搞死。

在手寫程式碼的年代，這個專案至少要花一個週末才能完成；而我一年可能只跑個兩三次，不太可能為了它投入這麼多時間。

但有了 AI 輔助 Coding 後，大家也看到了，只要指令足夠明確，把任務交給 AI，你就可以轉頭做其他事了

時間成本也從「一個週末」，變成「泡一杯咖啡的時間」

很多過去被判斷不值得做的工具，或許現在都值得做了；但這件事有一個前提，你要能把需求講清楚、把驗證邏輯交代好。

因為 AI 做完，不代表他做好了

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

最近收到的企業邀約中，除了有軟體部門想將 AI 導入開發工作流外，也有不少來自人力資源、執行業務部門的邀約。

而面對要客製化的課程，會先安排需求訪談。

開會過程中，有位客戶說的話讓我印象深刻，他說：

「我們企業的痛點，是開發系統的人不用系統；真正用系統的人不會開發，所以我們才想學 Vibe Coding。」

其實這個痛點是業界常態，以人力資源系統來舉例好了，雖然是工程師開發，但 HR 才是主要的使用者。

這導致不管前期規劃與設計有多麼詳盡，初步完成的產品在進入易用性測試後，還是會收到一大堆需求變更。

會有這樣的結果，並不是使用者很刁鑽；而是真正的問題，往往在使用後才會被發現；但這些並不是在前期設計，就能完全考慮到的。

所以有些企業想導入 Vibe Coding，目標是讓熟悉業務的人：

有能力設計出符合自己使用需求的產品，並希望完成的產品原型，未來能交給工程師做後續的優化與維護。

這個課程需求如果放在去年，我還真的不敢接；但最近 AI 成長的速度實在太快了。

今天跟大家介紹的 Claude Code，已經可以讓沒有任何程式基礎的人，在了解與 AI 對話的技巧後，生成出一套涵蓋前後端與資料庫的系統。

並透過與 OpenSpec 的搭配，讓 AI 幫忙撰寫專案文件，達成用規格驅動開發的目標；同時解決過去小白不知道如何撰寫規格，以及工程師不想寫文件的痛點。

在 Claude Code 與 OpenSpec 的幫助下，我們不僅能完成專案從 0 到 1 的建置，更可以做到從 1 到 100 的迭代。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 實戰】一次搞懂 OpenSpec，讓專案每次迭代都有依據

① 安裝 Claude 與 OpenSpec，初始化專案設定

安裝 Antigravity

今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。

如果不知道使用哪一款，可以跟我一樣，使用 Google 最新推出的 AI 程式碼編輯器 Antigravity，登入 Google 帳號就能免費使用。

但這次，我們沒有要使用到編輯器內建的 AI 功能，使用他，只是為了方便檢視程式碼與規格文件的變更，並降低 Claude Code 的入門難度。

確認 Node.js 版本

因為今天分享的 OpenSpec 與實作的全端專案會使用到 Node.js。

所以，我們打開終端機輸入「node -v」，來確認電腦是否有完成安裝。

如果沒有顯示版號，而是出現沒有指令的錯誤訊息，就需要先去安裝 Node.js 才能執行後續步驟。

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝；因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

如果你跟我一樣使用 Mac，執行下面的指令就可以安裝了：

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

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

nvm 安裝完成後，要開啟新的終端機，然後輸入 nvm -v，確認有成功安裝。

接下來輸入 nvm install — lts 來安裝最新版本的 Node.js，安裝完畢後，輸入 node -v 便可檢視剛剛安裝的版本。

安裝 OpenSpec

在 Node.js 安裝完成後，我們要來安裝 OpenSpec，只要在終端機輸入指令，便可以完成全局安裝：

npm install -g @fission-ai/openspec@latest

透過這款工具，我們只要用白話的方式與 AI 對話，就能建立完善的規格，讓專案從零到一的過程更加完善。

而且日後擴增、修改功能時，不管人類還是 AI，都有對應的文件規格可以參考。

這可以盡量避免過去用 AI 寫程式時，相同功能重複被寫好幾次的痛點。

安裝 Claude Code

安裝好 OpenSpec 後，接下來要安裝 Claude Code。

你可選擇在終端機輸入指令安裝：

macOS, Linux, WSL:
```
curl -fsSL https://claude.ai/install.sh | bash
```

Windows PowerShell:
```
irm https://claude.ai/install.ps1 | iex
```

Windows CMD:
```
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
```

但終端機對新手來說，用起來會比較有壓力，所以我更推薦在介面上操作；打開左側的 Extensions，搜尋 Claude Code 就能找到這個外掛。

點擊 Install 安裝完畢後，點擊 Open Claude 的按鈕，就可以打開他。

如果你過去使用過 Cursor 或是 Antigravity，其實操作上大同小異，就是有個對話視窗可以跟 AI 溝通。

但提醒大家，目前 Claude Code 只有付費版才能夠使用，你可以在對話框輸入「/login」來登入。

這邊我們選擇第一個，在網頁點擊授權後回到程式碼編輯器。

另外如果你使用免費版帳號，在登入時會出現這個提醒升級的畫面：

目前 Claude 的月費是每月 20 美金，如果看完今天的影片，覺得 Claude Code 很強大的話，可以考慮付費訂閱。

我認為「時間」才是最寶貴的資產；而「AI」可以幫助你奪回自己的時間。

在專案初始 OpenSpec

登入完成後，你可以在電腦建立一個專案用的空白資料夾，然後選擇 Explorer 用 Open Folder 的方式打開他。

由於這個專案要搭配 OpenSpec 輔助開發，所以要點擊 toggle panel 在終端機輸入：

openspec init

執行指令後，要點擊 Enter 進行初始化，這時問你使用哪些 AI 工具，你可以用「上下鍵」移動，並透過「空白鍵」做選擇。

他是可以多選的，但因為今天以 Claude 做示範，所以就只選 Claude Code。

完成後，就會在左側目錄下看到新增的資料夾，首先要介紹的是「.claude」的資料夾，這個裡面是存放驅動 OpenSpec 功能的 Agent Skills 技能包。

如果你在與 AI 對話的過程中，需求涉及專案的新增、修改、刪除等任務時，AI 會自動調用這些技能，不需要你特別去背指令，我覺得這才更符合 Vibe Coding 的開發流程。

如果你想更深入了解 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧：https://youtu.be/xe00zJEtuMo

提醒一下大家，在指令不夠明確時，AI 可能不會觸發對應的 Skill，假如想強制驅動 openspec，可以在對話窗中輸入「/opsx」來操作。

目前預設只有提供 4 個指令，其實已經足以面對大多數的需求了。

如果你想要擴充指令的話，可以在終端機輸入

openspec config profile

此時會看到幾個選項：

1. Delivery 是指這些功能「裝在哪裡」

2. Workflows 則是這些功能「有哪些」

這邊我選擇「Delivery and workflows」示範給大家看：

1. Delivery 我選擇要同時安裝在 skills 跟 commands 中

2. 而 workflows 我就用空白鍵，把可以使用的都全選

完成後按下 Enter 就好，安裝好的 skills 跟 commands 會出現在資料夾底下：

如果你想知道每個 Skill 的具體功能，直接請 AI 解釋給你聽就好，這邊就直接貼提示詞，跟他說：

我想知道 openspec 目前安裝的 skill 用途
請使用表格呈現，用白話簡短描述

② 規格驅動開發，從零打造全端系統

安裝 Docker

根據過去經驗，最容易在環境設定上卡關的是「資料庫」，因為每個人電腦環境不同，所以要先安裝 Docker 這款工具。

你可以把 Docker 想成一個「標準化的容器」，把專案需要的環境通通打包在裡面，這樣不管你用 Mac 還是 Windows，打開就能跑，不用自己一個一個裝，也方便未來與其他人一起維護專案。

到官網根據自己的作業系統下載安裝後，就可以直接使用，不需要特別註冊、登入帳號。

在完成 Docker 安裝後，接下來，我們就能體驗 OpenSpec 加 Claude Code 的威力了。

過去的開發流程

今天的教學，我想以大部分上班族都會使用到的「出缺勤系統」作為範例。

在沒有 AI 輔助的年代，如果想完成這個系統，前期需要與 HR 部門開會釐清需求，然後請設計師根據需求完成每個頁面的流程示意圖。

過程中 PM 會把討論細節撰寫成需求規格，之後才會由工程師著手開發。

過去光是要做出能讓 HR 體驗的最小可行性系統（MVP），都至少要花一個月的時間。

但現在，前面的所有步驟，已經有機會讓沒有程式背景的 HR 自行完成。

大家不要急著留言說我妖言惑眾，看完示範後，就會知道這一切並不是誇飾。

Prompt 設計

完整提示詞如下：

請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度

前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動，並且要包含 Postgres Admin 網頁
這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行

在提示詞中，我分成了 3 塊，分別是「專案目標、使用技術、細節討論」

• 專案目標：在專案目標這塊，我先大概說明自己的需求，一開始的描述有點模糊沒有關係，因為 AI 會在後續跟你釐清細節。

請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度

• 使用技術：接下來則是描述使用技術，這個非常重要，如果希望專案完成原型後，可以由工程師團隊接手維護；一定要先詢問他們目前最擅長的「前端、後端、資料庫」是哪些，並且為了讓彼此環境一致、啟動更方便，所以我指定使用 Docker 來啟動。

前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動專案，並且要包含 Postgres Admin 網頁

• 細節討論：最後則是提醒 AI 要與我們討論規格的細節，這樣可以釐清一開始沒說清楚的地方，最後要求他要參考 openspec 的 skill

這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行

送出提示詞後，你可以看到 AI 會根據我們的需求提出問題，讓細節更加完善：

同時提醒一下大家，用 Plan Mode 的規劃會非常詳盡，如果大家想要加速體驗，可以在提示詞最後加上「以最小可行性方案來規劃」，否則執行下去跑半小時也是有可能的。

OpenSpec 撰寫專案文件

前面釐清完需求後，你會看到 AI 觸發 OpenSpec 的 Skills 做更細部的規劃：

• proposal.md：一開始會先建立 proposal，這個文件是用來確認目標是否正確、範圍是否合理。
• design.md：然後再進入技術規劃，design 文件就是在說明技術挑選的理由，以及專案可能會遇到的風險與處理方案。
• specs 資料夾：緊接著在 specs 資料夾底下，會根據功能區分資料夾，並分別建立說明細節的規格文件。
• task.md：在最後會設計一個執行任務的 task 文件，他是用來檢驗任務是否完成的列表，目前都是空的，等任務完成後才會打勾。

規格驅動開發（SDD）

確認以上規劃都符合預期後，說「開始實作」，AI 就會根據規劃開始撰寫程式了。

在等待一段時間後，AI 說他已經完成了初版，此時剛剛 Task 的任務列表已經全部打勾：

如果你不知道如何啟動專案，可以貼上下面的提示詞請 AI 幫忙啟動

幫我啟動專案，我想在 Local 開發前後端程式
只有 Postgres 跟 Postgres Admin 用 Docker 啟動
如果根目錄 README.md 沒有操作步驟，請協助補充

我個人建議第一次啟動可以請 AI 幫忙，因為處理較大型的專案時

AI 有很高的機率在第一版遇到一些零星錯誤，我們可以先讓他自我修正一下

初步驗證功能

啟動後就可以根據 AI 只是來確認功能是否符合預期。

首先我們可以正常打卡的，並且當打卡時間沒有在上班時間內時，會有遲到的訊息：

因為我們進來的權限是管理者，所以也可以進行使用者的新增、權限的設定：

再確認網頁內容可以順利瀏覽後，接著我們可以試著打開 Postgres Admin 網頁，看一下資料庫是否是否有順利寫入。

如果不知道這些資訊如何填寫，直接問 AI 就好了。

使用者的資訊會存放在 users 資料夾，這邊就能看到預設的 Admin 管理者帳號，以及剛剛新增的一般使用者：

接受此次變更

初步確認功能符合預期後，我們回到程式碼編輯器，可以跟他說

功能符合預期，進行歸檔

稍等一段時間後，你會發現原本空空的 specs 資料夾底下，出現專案對應的規格文件，而 archives 底下出現了歸檔的文件，並註明了對應的日期。

建立專案規則

在完成專案初步建立後，我們可以在 Claude 對話窗輸入「/init」，這個指令會掃描目前的專案結構，並在根目錄建立「CLAUDE.md」。

這份文件會在每次對話開始時自動載入，幫助 Claude 在未來開發過程中，能更了解這個專案的架構、技術、開發規則等資訊。

除了 Claude 的設定外，我們也可以幫 OpenSpec 建立規則，你可以在對話窗輸入這段提示詞：

Please read openspec/config.yaml and help me fill it out
with details about my project, tech stack, and conventions

這是請 AI 幫你填寫專案使用到的技術，以及需要遵守規則，目標是讓 OpenSpec 的 Skill 觸發時，有參考的慣例。

簡單來說，CLAUDE.md 是給「做事」用的，openspec/config.yaml 是給「規劃」用的。

③ 建立版本控制，根據需求迭代功能

在完成專案初版後，我強烈建議大家先建立版本控制，因為 Vibe Coding 時，你的每個指令都可能大幅調整專案程式。

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

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

如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟！

https://www.youtube.com/watch?v=5DEV_K0JauQ&t=836s

設計 .gitignore

版本控制並不代表你需要把專案底下所有檔案都上傳，比如像「.env」這類有隱私資訊的檔案就不適合加入。

所以我們要建立「.gitignore」，把他從 Git 版控中移除；如果不確定專案有哪些檔案、資料夾要加入「.gitignore」，可以使用下面的提示詞：

請幫我設計專案的「.gitignore」
但「.claude、openspec」要加入版本控制

建立版本控制

完成前面 Git 的相關設定後，可以點擊左側的 Source Control，點擊 Initialize Repository 可以初始化專案。

接著點擊 Generate，AI 就會辨識我們更新的內容，來產生 commit 訊息；確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更。

但如果想更新到雲端，你需要點擊 Publish Branch才會正式上傳喔！

如果專案尚未存在於 GitHub，會有彈窗出現，讓你輸入專案名稱，這邊我就用跟資料夾一樣的就好了。

如果你的專案沒打算對外公開原始碼，我建議選擇 Private 隱私模式，完成後，點擊 Open GitHub 去看看是否部署順利。

如果能看到專案的內容，就代表你成功上傳專案了！

迭代功能

其實不管 Vibe Coding 還是開發系統，最難的並不是 0 到 1，而是 1 到 100 的那段路。

不過有了 OpenSpec 的幫助，這一切會變得容易許多。

這邊我們開一個新對話窗來處理新任務，比如我們可能會有忘記打卡的情形發生，就可以跟 AI 說：

幫我設計忘打卡的處理方案，讓規則彈性一點，使用 OpenSpec

這樣 AI 就會開始著手設計，並根據 OpenSpec 的 SKill 建立對應的需求規格；稍等一段時間後，AI 就完成了前期的設計。

由於我們有加入 Git 做版本控制，所以可以在 Source Control 中，清楚看到 AI 撰寫的需求變更規格書。

再確認需求與自己的期待相符後，接下來的流程都是一樣的，直接跟他說「開始實作」就好。

驗證功能

等 AI 完成調整後，因為功能涉及後端與資料庫，所以我會建議大家跟 AI 說：

請協助確認資料庫變更是否執行，並幫我重新啟動後端程式

等 AI 執行完畢後，我們再去瀏覽網頁，這樣測試會比較準。

畫面中能看到補打卡的功能完成新增：

申請補打卡：

核准補打卡：

確認結果生效：

功能歸檔

確認沒問題後，回到程式碼編輯器，直接在與 AI 的對話窗說

幫我歸檔

稍等一段時間後，你就會看到 archive 裡面多了一個資料夾，裡面放的就是這次的變更。

另外專案的 specs 也有進行對應的調整，綠色是新增，黃色是變更的意思。

這邊也提醒大家，每做完一件事，記得保持 commit 的好習慣；這樣每個版本完成的功能會比較明確，而不是一堆功能全部混一起。

模擬測試資料

補充一個情境，不是所有變更，都會觸發 OpenSpec 的 Skill。

比如目前專案初始狀態下，只有一個 Admin 的帳號，這樣想測試多位使用者的不同情境，要自己手動慢慢加，很沒效率。

此時我們就可以請 AI 幫忙設計模擬資料，我就跟他說：

我想要根據權限建立多位使用者，來模擬不同情境

因為這個需求不會涉及到功能上的改變，所以不會觸發 OpenSpec 的 Skill

等 AI 完成後，我們可以到員工管理看一下，哇！真的建立了對應的員工資料：

這樣可以方便我們測試更加複雜的流程。

設定 Email SMTP

另外如果有功能卡住，不知道如何處理時，也可以先詢問 AI 如何設定。

比如新增員工時，會需要寄信通知，但如果環境變數沒有設定好，信件是不會發送的。

此時就可以詢問 AI：

我要如何設定環境變數，讓 email 可以順利寄出？

這邊他就說 Gmail 要開啟兩步驟驗證，我們就點擊對應的網址來進行設定。

設定完成後，因為我們有更新到「.env」環境檔，所以要重啟才會生效，你可以直接請 AI 幫忙：

幫我重啟後端

重啟完畢後，我們再新增一個使用者測試是否能收到信件：

如果你也跟著教學走到了這一步，先給自己拍拍手，然後別忘記幫文章點個讚。

你已經初步完成一個有資料庫的全端系統啦！

AI 正在改變企業決策

如果在幾個月前拍這個主題，我肯定會從 AI 完成的系統挑出很多安全性的漏洞。

但這次拍完教學後有點被嚇到，雖然還是遇到了許多功能上 Bug，但我已經無法在短時間找出系統漏洞了。

以往這類的出缺勤管理系統，企業都是要找特定廠商購買，並且支付年費來維護的；但 Vibe Coding 的出現，可能會導致企業做出不同的選擇。

不過提醒大家，目前只是完成系統的初版，如果接下來打算在團隊內開發協作，還需要設計合適的工作流。

我過去有拍一隻影片，分享如何解決版本控制與團隊協作的痛點：https://youtu.be/1VuLTQidbPM

另外如果你想要讓系統更穩定，還需要加入自動化測試，畢竟市場不會為爛產品買單：https://youtu.be/Rb0_LutRIaw

別忘記，不管 AI 有多強大，出事還是要人類來背鍋。

結語：AI 時代下每個人，正在經歷角色的轉變

其實我是懷抱沈重的心情發布這期影片的，因為今天介紹的 OpenSpec 與 Claude Code 給了我完全不同的開發體驗。

如果你是工程師，一定要嘗試看看這個工具組合；假使你沒有程式背景，建議跟著影片實作一遍。

其實早在幾個月前，我就想拍攝這個主題了。

但用相同的指令，當時 AI 完成的初版，連專案啟動都有問題。我需要來回溝通十幾次，才能勉強讓專案跑起來，但結果還是漏洞百出。

可是今天這期影片想必大家也都看到了，我們已經能用簡單的提示詞生成一個有資料庫、登入功能的前後端系統。

儘管中間遇到了一些小問題，目前版本也有許多細節要優化。

但光是這個版本，放在過去可是要一個專業團隊才有辦法完成。

也許這樣說會被很多人罵，但我還是想提醒大家，尤其是工程師。

過去，程式碼是個昂貴的產品，但不是程式碼本身貴，而是要產生出有意義的程式，需要大量的經驗、專業。

但 AI 的發展正在讓程式碼快速貶值，因為 AI 不僅寫程式很快，品質還越來越優秀。

不過今天這隻影片想傳遞的不是「工程師已死」，這類網路上爛大街的口號。

而是透過實際的範例告訴大家，在 AI 時代下的每個人，大家正在經歷角色的轉變。

工程師的重點不再是寫了多少行程式，而是去評估系統架構、審查程式碼合理性。

而 PM 與執行業務單位，也不再只是眼巴巴的等工程師開發，在 AI 的輔助下，他們已經可以嘗試加入開發。

這中間當然還有很多細節要磨合，我自己也還在摸索。

但有件事我可以肯定，現在的開發分工，跟過去相比已經不一樣了；而不久的將來，變化只會更快。

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

使用者可以透過視覺化的介面，用拖拉節點、設定參數的方式來建立符合自己需求的工作流。

他有雲端與本地（local）的版本，考量到許多工作流程需要放上私鑰（ex: Google API Key、OpenAI API Key），以及雲端版本至少要付費 20 歐元（限制工作流程執行 2500 次）；所以筆者選擇了本地部署的方案，這篇文章會分享詳細的操作步驟。

STEP 1: 安裝 Docker

前往 Docker 官網: https://www.docker.com/

根據自己的作業系統選擇對應的版本下載。

STEP 2: 使用 docker-compose.yml 安裝 n8n

你可以直接 git clone 筆者的 GitHub 專案，或者建立一個 n8n 的資料夾，新增 docker-compose.yml 檔案。

volumes:
  n8n_storage:
services:
  n8n:
    image: n8nio/n8n:latest
    restart: always
    ports:
      - "127.0.0.1:5678:5678" # 根據實際需求設定
    volumes:
      - n8n_storage:/home/node/.n8n

貼上內容後，在終端機（Terminal）輸入 docker compose up -d 即可啟動

STEP 3: 註冊 n8n 帳號

進入網址: http://127.0.0.1:5678

如果看到下面的帳號設定畫面就代表你 n8n 安裝成功了！

帳號設定完成後，你會看到下面的初始畫面。

這邊要特別提醒的是，你一定要記得自己的 Email 跟 Password，因為官方 Forgot Password 的功能只是擺飾用的。

到這一步，你就完成 n8n local 環境的初始化了！下一篇文章將會向讀者分享 n8n Node（節點）的使用方法。

延伸閱讀:

• [n8n 教學]掌握重要節點 (Node) 使用情境：Set、Loop Over Items、If、Code、HTTP Request、Wait
• [n8n 教學]在 Google Sheet 自動建立 SEO 關鍵字矩陣

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

大綱
ㄧ、先初始化一個簡易的 Node.js 專案
二、撰寫 Dockefile，了解優化前體積有多大
三、使用 Node.js 的 Alpine 版本
四、正式環境下，不需要安裝 devDependencies 的套件
五、如果我們只使用最基礎的 Alpine，然後 Node.js 自己安裝呢？
六、採用多階段構建，取用上個階段產生的結果
七、使用 Distroless 讓正式環境更加安全

ㄧ、先初始化一個簡易的 Node.js 專案

# 建立資料夾
mkdir docker-test
cd docker-test

# 初始化應用
npm init

# 安裝 express
npm install express --save

初始化後的 package.json 大概會長這樣（scripts 的 start 筆者有微調）：

{
  "name": "docker-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

接著我們新增一個「index.js」的檔案，並貼上如下程式：

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

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

為了實測不同情境打包的影響，我們安裝一個儲存在「devDependencies」的套件：

npm install eslint -save-dev

二、撰寫 Dockefile，了解優化前體積有多大

這邊我們就先用最簡易的方式寫 Dockerfile：

FROM node
# 運行的資料夾
WORKDIR /usr/src/app
# 移動所需檔案
COPY package.json index.js ./
# 安裝套件
RUN npm install
# 提供服務的接口
EXPOSE 3000
CMD ["npm", "start"]

接下來輸入 docker build -t docker-test . 就可以建立 Docker Image（docker-test 是名稱）。

然後輸入 docker images ，確認剛剛建立的 Docker Image 是否存在；從下圖我們可以看到優化前的 Image 大小高達 1.01GB。

三、使用 Node.js 的 Alpine 版本

Node.js Alpine 版本的 Image 體積會遠小於完整的 Node.js Image，現在我們修改一下 Dockerfile：

# 使用 Alpine 版本 
FROM node:alpine
WORKDIR /usr/src/app
COPY package.json index.js ./
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]

輸入 docker build -t docker-test-alpine . 來建立 Image，完成後輸入 docker images 看看 build 出來的 Image 體積是否改變。

從上圖我們可以看到，Alpine 的版本讓它的體積從 1.01GB 下降到了 189MB，整整少了 812MB！

四、正式環境下，不需要安裝 devDependencies 的套件

通常一個專案會安裝一些 devDependencies 的套件，但這些套件只需要在開發環境中輔助使用，在正式環境下並沒有安裝的必要。

我們調整一下 Dockerfile 安裝套件的指令：

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json index.js ./

# 只安裝 dependencies 的套件
RUN npm install --production

EXPOSE 3000

CMD ["npm", "start"]

在上圖我們可以看到體積又變小了，果然還有優化的空間（少了 12MB）。

五、如果我們只使用最基礎的 Alpine，然後 Node.js 自己安裝呢？

剛剛我們使用的是 Node.js 的 Alpine 版本，如果更極端一點，只使用最基礎的 Alpine，然後自己額外安裝 Node.js 會有什麼樣的結果呢？

# 使用最基礎的 Alpine
FROM alpine:latest

# 自己安裝 Node.js & npm
RUN apk add --no-cache --update nodejs npm

WORKDIR /usr/src/app

COPY package.json index.js ./

RUN npm install --production

EXPOSE 3000

CMD ["npm", "start"]

沒想到這個操作把整包 Image 的體積壓的更低了（從 177MB 降到 64.7MB）。

六、採用多階段構建，取用上個階段產生的結果

Docker Image 你可以先想想成疊疊樂，在這之中多執行一次「RUN」就會多疊一層；而在 Docker 的世界中可以允許有多個「FROM」，但只會取用最後一個「FROM」所建立的 Image。

在了解上面的概念後，我們就可以把「安裝」的步驟放在第一個「FROM」裡面執行，然後第二個 FROM 就只是單純地把第一層安裝好的結果搬過去即可，用 Dockerfile 實現會長這樣：

FROM alpine:latest AS builder
RUN apk add --no-cache --update nodejs npm
WORKDIR /usr/src/app
COPY package.json index.js ./
# 先完成安裝
RUN npm install --production
FROM alpine:latest
RUN apk add --no-cache --update nodejs npm
WORKDIR /usr/src/app
# 把安裝好的全部移過去
COPY --from=builder /usr/src/app .
EXPOSE 3000
CMD ["npm", "start"]

經過這麼多的努力後，我們的 Docker Image 也順利從 1.01GB 下降到 58.9MB，減少了超過 94% 的體積，並且可以明顯感受到 build Image 的速度上升不少。

七、使用 Distroless 讓正式環境更加安全

儘管上面我們已經使用 Alpine 讓 Docker Image 變得這麼小，但在文章的最後我想再提供讀者另一個選擇， 那就是「Distroless」！

先讓我們用它來 Build 一個 Docker Image。

FROM node AS builder
WORKDIR /usr/src/app
COPY package.json index.js ./
RUN npm install --production
# 改成用 Distroless
FROM gcr.io/distroless/nodejs
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app .
EXPOSE 3000
CMD ["index.js"]

如果單純從結果來看，它在體積上(162MB)並沒有什麼優勢，但如果你嘗試用 Shell 打開它，會發現 Shell 根本不存在！換而言之，它的安全性相對更高，可以考慮使用它來做正式環境的部署。

以上就是筆者優化 Docker Image 體積的步驟啦！如果文中有表達不清晰、錯誤的部分再煩請告知，感謝您的閱讀。

參考資源：Node.js docker 鏡像體積優化實踐、三個技巧，將Docker鏡像體積減小90%

文章大綱
一、安裝 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 端測試）」

一、事先準備
 ➤ 創建 Nuxt.js 專案
 ➤ 下載 & 安裝 Docker
二、在 local 把 Nuxt.js 專案 Build 成 Docker Image
 ➤ 撰寫 dockerfile & .dockerignore
 ➤ 把 Nuxt.js 專案 build 成 Docker Image
三、將 Docker Image 發佈到 dockerhub 上面

一、事先準備

創建 Nuxt.js 專案

如果你已經有 Nuxt.js 的專案可以跳過下面的操作流程

STEP 1：創建一個 Nuxt.js 專案

$ yarn create nuxt-app nuxtjs-tutorial

在創建過程中會問你一些問題，你可以參考筆者的選擇：

STEP 2：讓 Nuxt.js 專案跑起來

$ cd nuxtjs-tutorial 
$ yarn dev

下載 & 安裝 Docker

STEP 1：下載 Docker

前往官網下載 Docker 安裝檔

安裝過程就是狂按下一步，就不在多做介紹，下載後要把 App 打開依照步驟執行才算是完成安裝喔！

STEP 2：註冊 Docker

在官網註冊 docker 帳號

STEP 3：在 local 端登入 docker

$ docker login

輸入剛剛註冊的帳號密碼

二、在 local 把 Nuxt.js 專案 Build 成 docker image

撰寫 dockerfile & .dockerignore

STEP 1：先用指令建立這兩個檔案

$ touch dockerfile
$ touch .dockerignore

STEP 2：撰寫 dockerfile

# node 運行環境
FROM node:12.19.0

# 存放image的目錄
RUN mkdir -p /app
COPY . /app
WORKDIR /app

# 如果需要相關的環境變數請自行調整路徑
#COPY ./env/.prod-env /app/env/.prod-env

# 對外的port
ENV HOST 0.0.0.0 
EXPOSE 3000

# 安裝套件並build專案
RUN yarn
RUN yarn build

# 執行專案
CMD [ "yarn", "start" ]

原始碼：dockerfile（GitHub Gist）

STEP 2：撰寫 .dockerignore

npm-debug.log
node_modules

原始碼：.dockerignore（GitHub Gist）

把 Nuxt.js 專案 build 成 Docker Image

STEP 1：Build Docker Image

在專案目錄下輸入指令後耐心等待打包，docker_example 是這個 image 的名字

docker build -t docker_example .

STEP 2：Run Docker Image

輸入指令確認 image 是否成功

docker run -it — rm -p 80:3000 docker_example

特別注意『80 是對外 port，3000 是 container 的 port』，docker_example 就是剛剛建立的 image 名稱

上圖 172.xx.xx.x:3000 的網址點開來是沒有畫面的，因為我們已經透過指令改變對外 port 到 80 了，在網址列上輸入 http://localhost/ 就能成功看到供果嚕～

三、將 Docker Image 發佈到 dockerhub 上面

STEP 1：給剛剛建立的 Image 一個 tag，username 是你 Doacker 的帳戶，xxximage是你希望這個 Image 在 dockerhub 上呈現的名字

docker tag docker_example username/xxximage

STEP 2：列出目前存在的 Images

docker images

STEP 3：把這個 Image 丟到 dockerhub 的 repositories

這個 push 的過程會根據你產生 Image 的大小決定，通常要等一段時間

docker push username/xxximage

STEP 4：在自己的 Docker 帳戶上看到剛剛上傳的 Docker Image

之後要部署這個 Docker Image 到其他 Server 就只需要輸入下面指令就能獲得嚕～

docker pull username/xxximage

希望這篇文章有幫助到使用 Mac 開發 Nuxt.js 專案的朋友們～