Vibe Coding Google App 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，让全世界的人都看到自己的网页！

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识 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 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈