You need to enable JavaScript to run this app.
导航
使用函数服务托管静态站点
最近更新时间:2023.05.30 18:48:43首次发布时间:2023.05.30 17:33:34

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

场景介绍

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

函数服务提供 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,按需填写 版本描述实例数上限 保持默认。

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

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

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

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

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

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

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

后续操作

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