Docker 建隔離環境，讓 Claude Code 火力全開，用 Hostinger 部署上線！

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

這幾個月我收到許多 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 做完，不代表他做好了

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