Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地

完成了酷炫的 Vibe Coding 專案後，最興奮的莫過於將成果分享給朋友或客戶。但對於許多人來說，部署網頁可能得購買主機、租賃雲端服務、或要設定略嫌繁瑣的 GitHub Pages，有沒有一種方式，能讓丟檔案進雲端硬碟一樣簡單，立刻擁有一個展示網頁呢？答案就是 Google Apps Script ( GAS )！這篇文章將會介紹如何透過 Google Apps Script，讓 Google 雲端硬碟變成為專屬 Web 伺服器，讓 Vibe Coding 成果一鍵上線。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 認識 Google Apps Script ( GAS )
• 為什麼 GAS 是 Vibe Coding 的完美拍檔？
• 使用 Google Apps Script 部署網頁的注意事項
• 在 Google 雲端硬碟中建立 Google App Script
• Google App Script 的編輯畫面
• Google App Script 的部署方式
• 範例 1、使用 GAS 範例程式碼
• 範例 2、使用 GAS 範例資料庫
• 正式部署 GAS，讓全世界的人都看到自己的網頁！

認識 Google Apps Script ( GAS )

Google Apps Script ( 以下簡稱 GAS ) 是 Google 的一個基於 JavaScript 程式語言的雲端腳本平台，它最初的設計是用來自動化處理 Google Workspace（ 如 Sheets、Docs、Gmail 等）的繁瑣任務，但它其實隱藏了一個強大的功能：「網頁應用程式 ( Web App )」模式。

透過編寫簡單的 doGet() 函式，GAS 可以讀取存放在雲端硬碟中的 HTML 和資源檔，並將其渲染成一個具備獨立網址的網頁。這意味著不需要管理任何伺服器，也不需要處理 SSL 憑證，只要有 Google 帳號，就能擁有一個具備後端處理能力的部署空間。

GAS 常用於以下情境：

• 自動化報表：自動整理 Google 試算表數據並產生分析報告。
• 郵件自動化：結合 Gmail 根據表單提交內容自動發送個人化郵件。
• 外部 API 串接：抓取第三方服務 ( 如天氣、幣值、股市 ) 資料並存入 Google 試算表。
• 開發輕量級網頁應用：建立互動式儀表板、簽到系統或專案管理小工具。

為什麼 GAS 是 Vibe Coding 的完美拍檔？

在 Vibe Coding 的世界裡，追求的是流暢的開發節奏與快速的創意實踐，而 GAS 之所以能與這種開發模式完美契合，是因為它徹底移除了「部署」這道技術高牆，讓創意能與開發速度並駕齊驅，下方列舉一些透過 GAS 部署 Vibe Coding 網頁的好處：

• 零環境設定

  不需要安裝 Node.js、Git 或任何開發環境，這與 Vibe Coding「專注於想法而非技術細節」的初衷完美契合。

• 自帶簡易資料庫

  直接連動 Google Sheets 試算表存取資料，讓網頁瞬間從「靜態展示」升級為「動態應用」。

• 雲端原生

  在雲端撰寫程式碼，甚至可以讓 AI 寫好代碼，直接貼上就可以部署。

使用 Google Apps Script 部署網頁的注意事項

雖然 GAS 部署非常便利，但在投入使用前，需要先了解下方幾個關鍵限制與特性：

• 網址格式與更新邏輯

  • 固定長網址

    GAS 生成的網址通常很長且不可自訂（ 例如 script.google.com/macros/s/.../exec ）。

  • 部署版本制

    這是新手最容易卡關的地方，如果只是單純修改雲端硬碟裡的 HTML 代碼，網頁並不會自動更新，必須在 GAS 介面中「管理部署」並發布「新版本」，變更才會生效。

• 服務額度與限制

  • 流量限制

    GAS 並非為高流量網站設計。如果同一時間有太多人（約 30-50 人以上）同時存取，可能會遇到連線被拒。

  • 執行時間

    免費帳號每天有總執行時間限制，但對於單純展示網頁的作品來說，通常綽綽有餘。

• 安全性與瀏覽器限制

  • Google 授權警告

    初次部署或執行腳本時，Google 會要求授權存取雲端硬碟，並顯示安全警告。這是正常程序，只需點擊「進階」並繼續執行即可。

  • Iframe 沙盒限制

    GAS 網頁會使用 Iframe 的方式，在 Google 的安全沙盒中執行，某些需要高度權限的瀏覽器 API ( 例如特定的攝影機呼叫或地理定位 ) 可能會受到限制。

  • 路徑問題 ( 關鍵重點 )

    在一般網頁環境中習慣用相對路徑寫法 ( 例如 src="./image.png" )，但在 GAS 環境下這種相對路徑可能會失效，因此必須將圖片等檔案上傳到 Google 雲端硬碟並啟用分享機制，並透過特定 GAS 將檔案路徑轉換為可讀取的直連網址。

在 Google 雲端硬碟中建立 Google App Script

前往自己 Google 雲端硬碟裡「要作為網頁部署的資料夾」，從左側「新增」一個「Google App Script」檔案。

建立的時候可能會出現通知訊息，點擊「建立程式碼」繼續。

完成後就會自動開啟 Google App Script 的編輯畫面。

Google App Script 的編輯畫面

開啟 GAS 編輯器後，主要可以分為以下幾個區域：

• 左側導覽選單 ( Side Navigation )：切換不同的工作視圖。

  • 總覽：觀察整個專案狀態。
  • 編輯器：撰寫程式碼。
  • 專案紀錄：專案編輯的版本紀錄。
  • 觸發條件：設定自動執行時間和觸發條件。
  • 執行項目：查看過往執行狀態。
  • 專案設定：查看 ID 或時區設定。

  

• 檔案清單 ( File List )：管理專案內的所有檔案。

  • 程式碼檔案：可新增 .gs 腳本檔 ( 處理後端邏輯 ) 與 .html 檔案 ( 設計前端網頁介面 )。
  • 資料庫：點擊「+」號輸入 Script ID 來引入他人寫好的函式庫，方便重複使用複雜的功能。
  • 服務：點擊「+」號連動 Google 官方 API ( 如 Drive API、Sheets API、YouTube API 等 )，讓網頁能直接操控雲端硬碟的檔案或數據。

  

• 頂部工具列 ( Tool Bar )：執行專案的核心操作。

  • 專案名稱：具有識別度的專案名稱 ( 根據服務使用狀態，可能會在 Google Cloud 出現 )
  • 儲存：儲存檔案到雲端硬碟
  • 執行：測試程式碼。
  • 偵錯：啟動除錯模式，允許設定斷點 ( Breakpoint ) 並逐行執行程式碼。
  • 函式選擇器：下拉選單會列出專案中所有的函式 ( 例如 doGet、processData )，預設顯示「沒有函式」。
  • 執行紀錄：回報程式執行狀況與偵錯資訊

  

• 程式碼編輯器 ( Code Editor )：

  編輯程式碼的工作區域，支援 JavaScript 語法高亮與自動完成，也是貼上 AI 生成的程式碼或修改網頁邏輯的位置。

  

• 部署 ( Deploy )：將專案轉化為網頁的關鍵開關。

  • 新部署 ( New deployment )：用於發布一個全新的版本，並產生正式的 /exec 結尾網址。
  • 管理部署 ( Manage deployment )：用於編輯舊有的部署、查看版本紀錄，或是將現有部署更新。
  • 測試部署 ( Test deployments )：提供一個 /dev 結尾的測試網址。在這個網址下，修改完程式碼並儲存後，重新整理網頁就能立刻看到變化，不需要反覆發布新版本。

  

Google App Script 的部署方式

當程式碼完成後，點擊「新部署」並點擊左側的齒輪圖示時，可以選擇以下四種部署方式：

• 網頁應用程式 ( Web App )：

  這種部署方式是本篇教學的重點，主要將程式碼發布為「具備 URL 的網頁」，從中可以設定執行身分 ( 以自己的帳號或特定使用者帳號執行 ) 以及存取的權限。

• API 執行檔 ( API Executable )：允許外部應用程式 ( 如 Android 或 iOS App ) 透過 Google 官方的 API 介面來執行此腳本的功能。

• 外掛程式 ( Add-on )：將腳本發布為 Google Sheets、Docs 或 Gmail 的擴充功能，使用者可以從 Google Workspace Marketplace 安裝。

• 程式庫 ( Library )：將專案封裝起來，讓其他 GAS 專案可以透過 Script ID 引入並使用你寫好的函式。

使用 GAS 範例程式碼

STEAM 教育學習網特別提供了一個可以把 Google 雲端硬碟變成「建議伺服器」的 GAS，這個 GAS 有下列幾個特色：

• 讀取並顯示網頁 html 檔案。
• 使用網址屬性 folder ( 資料夾 ) 和 file ( 網頁名稱 ) 區分不同層檔案。
  • 沒有 folder 檔名時，自動讀取根目錄。
  • 沒有 file 檔名時，自動讀取名為 index.html 的檔案。
• 支援轉換相對路徑，例如 CSS、JS、img 等等，但要開啟資料夾權限。
• 支援超連結轉換相對路徑，轉換根目錄為 GAS 網址，且超連結後不受 GAS 沙盒影響。

下方是這個 GAS 範例連結，檔名是「GAS Vibe Coding by OXXO.STUDIO」，開啟連結之後，點擊右上方「建立副本」，將檔案複製到自己的 google 雲端硬碟中。

連結：https://script.google.com/home/projects/1Dv8iz2ZaPNFrsNl055JneZLlT_7pWEsPomKf92hNHoyUGZs-cep-wRS4

確定已經加入自己的雲端硬碟後，把這個 GAS 檔案副本放到指定的資料夾，這個資料夾也是存放 Vibe Coding 網頁的根目錄資料夾裡，下圖範例使用「Web Test」資料夾 ( 名稱自訂 )，放置完成後開啟這個檔案，就可以準備開始進行部署 ( 前往下方段落：正式部署 GAS，讓全世界的人都看到自己的網頁！ )。

使用 GAS 範例資料庫

STEAM 教育學習網也做了一個公開的 GAS 範例資料庫，也可以透過連結資料庫的方式，使用同樣的功能。首先在特定資料夾中，建立一個「空白」的 GAS，這個資料夾也是存放 Vibe Coding 網頁的根目錄資料夾裡，下圖範例使用「Web Test」資料夾 ( 名稱自訂 )。

點擊左側「資料庫」，輸入下列 ID，選擇最新版本 ( 如果有最新版本的話，數字越大版本越新 )，就可以載入 STEAM 教育學習網的 GAS 範例資料庫。

1TdYzRWi09C5GN_7Xpja-GTYa_zMBQOpLxYAUFGKG9oM1oFxrIHIWOIsV

載入資料庫之後，複製下方程式碼，將其放到程式碼編輯區中取代原本的程式碼，儲存之後就準備可以開始進行部署 ( 前往下方段落：正式部署 GAS，讓全世界的人都看到自己的網頁！ )。

function doGet(e) {
  return GASDatabaseforVibeCodingbyOXXOSTUDIO.render(e);
}

正式部署 GAS，讓全世界的人都看到自己的網頁！

把 Vibe Coding 完成的網頁放到同樣的資料夾中，如果是「首頁」必須將其命名為「index.html」，如果手邊沒有網頁檔案，也可以使用下方範例檔案 ( 解壓縮後會看見首頁檔案 index.html、img 和 test 資料夾、img 資料夾裡有一張 mona.jpg，test 資料夾裡有 a1.html 和 a2.html )。

範例網頁檔案 ( 需解壓縮 )：vibe-coding-demo.zip

把檔案上傳到 Google 雲端硬碟，接著就可以開始進行部署。

開啟範例 GAS，點擊右上角「部署」，選擇「新增部署」。

選擇「網頁應用程式」，並輸入第一版部署的名稱，以及將存取權限設定為「所有人」。

第一次部署會需要「授權」，彈出視窗後點擊「授予存取權」。

因為這個程式並沒有進行 Google 驗證的程序，所以會多一層警告通知，需要點擊「Advanced」 開啟進階選單。

點擊下方「Go to ....」連結，進行授權作業。

選擇自己的 Google 帳號後，點擊 Continue。

就可以得到部署完成的訊息，也會出現網頁的公開連結。

點擊這個連結，如果看得到剛剛自己上傳的網頁，表示部署順利完成。

這個範例程式具備了「轉換相對路徑」的能力，所以如果網頁中有相對路徑的圖片、CSS 或 JavaScript，也可以一併放在 Google 雲端硬碟中，就可以使用相對路徑的方式讀取資料夾裡的檔案，但第一次開啟時如果看不到圖片，這往往是「資料夾權限」造成，只要將資料夾權限打開，就可以看到圖片囉！

特別注意，要使用相對路徑讀取檔案，例如圖片、CSS 或 JavaScript，都需要將該資料夾的「權限」設定為「所有人都可檢視」。

但很可惜的是，如果要連結不同資料夾裡面的網頁檔案，需要在網址列加上對應的參數和屬性，以下圖為例，如果要開啟放在 test 資料夾裡的 a1.html，要在網址列後方加上 ?folder=test?file=a1.html 即可。

小結

Vibe Coding 的魅力在於「快」，而 Google Apps Script 則提供了同樣「快」的部署方案。雖然它在流量與網址美觀度上有其侷限性，但作為從開發到發布的「最後一哩路」，它無疑是目前門檻最低且最彈性的工具之一。

只要掌握了 GAS 的基本特性，搭配這篇教學提供的自動資源轉換腳本，就可以搭配 Google 雲端硬碟，產生充滿無限可能的創意孵化器！

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 範例 - 英文單字卡

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～