使用函数服务托管静态站点

本文为您介绍如何通过函数服务快速构建一个静态站点，并获取可访问的站点地址。

场景介绍

将静态站点托管至函数服务，可降低流量接入成本，实现按资源实际使用量计费、自动扩缩容、免运维的好处。

函数服务提供 vefaas-nodejs14-static-server 代码模板，方便您基于 Astro 框架构建静态站点，并通过 API 网关触发器快速实现对外提供服务。

背景信息

Astro 是集多功能于一体的 Web 框架，利用组件群岛来构建快速、以内容为中心的网站。更多介绍请参见 Astro 官网。

前提条件

• 已开通函数服务。

• 已开通 API 网关。

• 已创建 API 网关实例和服务，具体操作可参见 创建实例 和 创建服务。

• 已在本地部署 Node.js 环境，建议下载 Node.js 18.x 版本，具体操作可参见 官方文档。安装成功后，执行node --version 会返回 Node.js 版本号。

操作步骤

步骤一：本地开发 Astro 站点

1. 初始化 Astro 项目到本地

   1. 打开终端命令行工具，导航至期望的工作目录，执行以下命令。

      # 使用默认模板创建一个 Astro 项目
      npm create astro@latest
      

   2. 跟随工具的提问，按步骤输入配置，初始化 Astro 项目。

   3. 导航至您的 Astro 项目目录，执行以下命令，启动 Astro 站点。

      npm run dev
      

   4. 使用系统给出的 Local URL，访问 Astro 站点。

      

   5. 执行CRTL+C，退出服务进程。

2. 开发 Astro 项目

   本示例仅简单修改 src/pages/index.astro 的标题语，为您展示自定义开发的 Astro 站点效果。如果您希望自定义开发更多内容，请参见 Astro 官方文档。

   打开src/pages/index.astro文件，将标题“Welcome to Astro”替换为“Welcome to My Blog”。保存并退出。

3. 构建 Astro 站点，获取静态资源
   在 Astro 项目目录下执行以下命令，构建 Astro 站点。

   npm run build
   

   构建成功后，项目目录下将生成 dist 文件夹，用于存储构建生成的静态资源。

步骤二：将 Astro站点静态资源部署至函数服务

1. 创建函数

   使用 vefaas-nodejs14-static-server 模板创建函数。

   1. 登录 函数服务控制台。

   2. 在顶部导航栏，选择目标地域。

   3. 在函数列表页面，单击 创建函数。

   4. 在创建函数页面，选择 vefaas-nodejs14-static-server 模板，单击 下一步：函数配置。

   5. 填写函数名称，函数代码和高级配置保持默认，单击 确定，开始创建函数。

   函数创建成功后，将自动跳转至当前函数的代码页签。
   

2. 上传代码包

   1. 单击右上角下载按钮，将函数代码包下载至本地并解压。

      

   2. 使用步骤一获得的 dist 文件夹内容替换 test-static-server-latest 目录下中 static 文件夹内容。

      

   3. 框选 test-static-server-latest 目录下的全部文件，压缩为一个 Zip 包。

      注意

      请勿直接压缩目录！直接压缩目录将导致函数服务无法找到 index.js入口文件，阻碍函数启动进程。

   4. 在当前函数代码页签，单击左上角 上传 按钮，将代码上传至函数服务控制台。

3. 发布函数

   将函数的当前代码和配置发布至线上。

   1. 在函数详情页面，单击右上角的 发布。

   2. 函数版本 使用 Latest，按需填写 版本描述，实例数上限 保持默认。

   

   3. 单击 确定， 函数进入发布中。函数发布成功后如下图所示。

   

步骤三：创建 API 网关触发器，获取 Astro 站点访问地址

为当前函数配置 API 网关触发器，从而获得站点的公网/内网访问地址，实现一个对公网/内网提供服务的静态站点。

1. 切换至触发器页签，单击 创建触发器。

2. 按要求配置触发器信息。更多参数介绍请参见 创建 API 网关触发器。

   

3. 单击 确定，完成 API 网关触发器创建。

   

4. 获取上图中的公网访问地址，在浏览器中访问您部署的静态站点。

   

后续操作

函数服务提供强大的版本管理能力，并支持灰度发布功能，方便您对静态站点进行敏捷迭代开发。大致步骤如下：
1. 在本地修改项目的源码信息并构建，获取 dist 目录。
2. 使用新生成的 dist 目录替换函数的 static 目录内容，并重新上传代码包。操作步骤同 步骤二 2. 上传代码包。
3. 重新发布函数，可根据需要选择全量发布或灰度发布。详细操作可参见 发布函数。