[Aliyun] [FC] 如何使用 website-fc-serve 插件部署静态网站

DevDengChao2026-02-13 16:28

本博客站点已全量迁移至 DevDengChao 的博客 https://blog.dengchao.fun , 后续的新内容将优先在自建博客站进行发布, 欢迎大家访问.

告别 Express，用 serve 轻量部署静态网站到函数计算

在 Serverless 架构日益普及的今天，将静态网站部署到云函数平台已经成为一种高性价比的方案。本文将介绍 website-fc-serve 插件 ------ 一个基于 Serverless-Devs 的轻量级静态网站部署工具，并与它的前身 website-fc 进行对比，帮助你选择最合适的方案。

为什么要用函数计算部署静态网站？

部署静态网站最常见的方式是 CDN + OSS，这种架构性能最优、弹性最好。但在一些场景下，开发者更倾向于将静态资源直接部署到函数计算（FC）：

  • 架构简洁：前后端都部署在函数计算上，不需要额外引入 OSS、CDN 等组件
  • 避免跨域：FullStack 框架前后端一体化时，前端部署在 OSS 可能产生跨域问题，解决跨域又需要引入网关，徒增复杂度
  • 免费额度：FaaS 平台通常提供免费额度，对于低流量站点完全够用

website-fc-serve 是什么？

website-fc-serve 是一个 Serverless-Devs 插件，它能让你用一行配置将本地的静态文件（HTML/CSS/JS 等）部署到阿里云函数计算。它使用 serve 这个轻量级的静态文件服务器来托管你的网站内容。

核心理念很简单：把静态文件交给专业的静态文件服务器，而不是通用的 Web 框架。

快速开始

前置条件

项目结构

假设你的静态网站构建产物在 dist 目录下：

perl 复制代码 
my-website/
├── dist/
│   ├── index.html
│   ├── css/
│   ├── js/
│   └── assets/
└── s.yaml

最小配置

在项目根目录创建 s.yaml：

yaml 复制代码 
edition: 3.0.0
name: my-website
access: default

vars:
  region: cn-hangzhou
  functionName: my-static-website

resources:
  website:
    component: fc3
    actions:
      pre-deploy:
        - plugin: website-fc-serve
    props:
      region: ${vars.region}
      functionName: ${vars.functionName}
      description: "My static website on FC"
      timeout: 30
      memorySize: 512
      code: ./dist

然后执行部署：

bash 复制代码 
s deploy

就这么简单。插件会自动完成以下工作：

  1. 将 ./dist 目录下的静态文件复制到部署包中
  2. 安装 serve 依赖
  3. 配置 Node.js 运行时 Layer
  4. 设置环境变量
  5. 以 serve 作为函数启动命令，在 9000 端口提供静态文件服务

绑定域名

要通过自定义域名访问，添加一个 fc3-domain 资源：

yaml 复制代码 
resources:
  website:
    component: fc3
    actions:
      pre-deploy:
        - plugin: website-fc-serve
    props:
      region: ${vars.region}
      functionName: ${vars.functionName}
      timeout: 30
      memorySize: 512
      code: ./dist
  fc3_domain_0:
    component: fc3-domain
    props:
      region: ${vars.region}
      domainName: auto
      protocol: HTTP
      routeConfig:
        routes:
          - path: /*
            functionName: ${vars.functionName}

功能详解

1. SPA 路由支持

如果你的项目是 Vue、React 等单页应用（SPA），客户端路由需要服务器将所有未匹配的路径回退到 index.html。启用 fallbackToIndex 即可：

yaml 复制代码 
actions:
  pre-deploy:
    - plugin: website-fc-serve
      args:
        fallbackToIndex: true

这对应 serve 的 -s 参数。启用后，访问 /about、/user/123 等路径时，即使服务器上没有对应的文件，也会返回 index.html，由前端路由接管。

2. 自定义首页

默认首页是 index.html。如果你的首页文件名不同（比如 demo.html），可以通过 index 参数指定：

yaml 复制代码 
actions:
  pre-deploy:
    - plugin: website-fc-serve
      args:
        index: demo.html

3. 自定义运行时

默认使用 custom.debian11 运行时。如果需要更新的系统库，可以切换到其他版本：

yaml 复制代码 
actions:
  pre-deploy:
    - plugin: website-fc-serve
      args:
        runtime: custom.debian12

4. 指定 serve 版本

默认使用 npm 上最新版的 serve。如果需要锁定版本以确保稳定性：

yaml 复制代码 
actions:
  pre-deploy:
    - plugin: website-fc-serve
      args:
        version: 14.2.0

参数速查表

参数 类型 默认值 说明
index string index.html 自定义首页文件名
fallbackToIndex boolean false SPA 模式，未匹配路由返回首页
runtime string custom.debian11 函数运行时
version string latest serve 的 npm 版本

工作原理

website-fc-serve 作为一个 pre-deploy 插件，在函数部署之前介入，修改部署的输入参数：

bash 复制代码 
你的静态文件 (./dist)
        │
        ▼
  ┌─────────────────────┐
  │  website-fc-serve   │
  │                     │
  │  1. 复制静态文件     │
  │  2. 安装 serve      │
  │  3. 配置 Layer      │
  │  4. 设置环境变量     │
  │  5. 配置启动命令     │
  └─────────────────────┘
        │
        ▼
  FC 部署（serve 在 9000 端口启动）

具体来说，插件会：

  • 将 runtime 设置为 custom.debian11（可自定义）
  • 将 caPort 设置为 9000
  • 自动添加 Nodejs22 官方 Layer（如果用户未配置 Node.js Layer）
  • 通过 customRuntimeConfig 启动 serve：
arduino 复制代码 
./node_modules/.bin/serve [-s] public -l tcp://0.0.0.0:9000

Layer 自动管理

插件会智能管理 Node.js 运行时 Layer：

  • 如果你未配置任何 Layer ，插件自动添加 Nodejs22 官方 Layer
  • 如果你已配置了 Node.js Layer （如 Nodejs20），插件会自动识别版本并调整 PATH 环境变量中的路径
  • 如果你配置了其他 Layer 但没有 Node.js Layer ，插件仍会自动补充 Nodejs22 Layer

环境变量自动配置

插件会自动配置以下环境变量，确保 Node.js 运行时正常工作：

环境变量 默认值 作用
PATH /opt/nodejs{version}/bin:... 指向正确的 Node.js 可执行文件路径
NODE_PATH /opt/nodejs/node_modules Node.js 模块查找路径
LD_LIBRARY_PATH /code:/code/lib:/usr/lib:... 动态链接库查找路径

如果你在 props.environmentVariables 中已经自定义了这些变量，插件会保留你的配置。

website-fc-serve vs website-fc：有什么区别？

website-fc-serve 是 website-fc 的演进版本。两者的核心区别在于底层使用的 HTTP 服务器不同。

对比总结

对比维度 website-fc website-fc-serve
HTTP 服务器 Express.js serve
定位 通用 Web 服务 纯静态文件服务
依赖复杂度 Express 及其依赖链 仅 serve 一个依赖
部署包体积 较大 更小
冷启动速度 较慢（Express 初始化开销） 更快（serve 启动轻量）
插件自身依赖 有第三方 npm 依赖 零外部依赖
SPA 支持 需自行配置 内置 fallbackToIndex 参数
Layer 管理 手动配置 自动检测和配置
适用场景 需要服务端逻辑的站点 纯静态站点、SPA

为什么选择 website-fc-serve？

如果你的网站是纯静态的 （HTML/CSS/JS、Vue/React/Angular 构建产物、VuePress/Hexo/Hugo 等静态站点生成器的输出），那么 website-fc-serve 是更好的选择：

  1. 更轻量：serve 专为静态文件服务设计，没有 Express 的路由、中间件等额外开销
  2. 更快的冷启动：依赖更少意味着函数冷启动更快
  3. 更小的部署包：直接影响部署速度和存储成本
  4. 零外部依赖 ：插件本身仅使用 Node.js 内置模块（fs、path、child_process），更稳定可靠
  5. 开箱即用的 SPA 支持：一个参数搞定前端路由兜底
  6. 自动化的 Layer 管理：无需手动查找和配置 Node.js Layer ARN

什么时候仍然需要 website-fc？

如果你的场景包含以下需求，可能仍需要基于 Express 的 website-fc：

  • 需要在服务端实现 API 接口或中间件逻辑
  • 需要服务端渲染（SSR）
  • 需要自定义请求/响应处理（如添加自定义 Header、重写 URL 等）

适用场景

website-fc-serve 非常适合以下场景：

  • 前端框架构建产物 ：Vue、React、Angular、Svelte 等 npm run build 的输出
  • 静态站点生成器：VuePress、Hexo、Hugo、Jekyll、Gatsby 等
  • 文档站点：Docusaurus、MkDocs 等
  • 简单的 HTML 页面：传统的多页面静态网站
  • 原型展示：快速将设计稿或 Demo 部署上线

完整配置示例

以下是一个涵盖所有参数的完整配置：

yaml 复制代码 
edition: 3.0.0
name: my-spa-website
access: default

vars:
  region: cn-hangzhou
  functionName: my-vue-app

resources:
  website:
    component: fc3
    actions:
      pre-deploy:
        - plugin: website-fc-serve
          args:
            index: index.html # 首页文件名
            fallbackToIndex: true # 启用 SPA 模式
            runtime: custom.debian11 # 运行时
            version: latest # serve 版本
    props:
      region: ${vars.region}
      functionName: ${vars.functionName}
      description: "Vue SPA on FC"
      timeout: 30
      memorySize: 512
      code: ./dist
  domain:
    component: fc3-domain
    props:
      region: ${vars.region}
      domainName: auto
      protocol: HTTP
      routeConfig:
        routes:
          - path: /*
            functionName: ${vars.functionName}

总结

website-fc-serve 秉持「用正确的工具做正确的事」的理念，用 serve 替代 express 来部署静态资源。对于纯静态网站和 SPA 应用，它提供了更轻量、更快速、更简洁的部署体验。零外部依赖的设计也让插件本身更加稳定。

如果你正在使用 Serverless-Devs 部署静态网站到阿里云函数计算，不妨试试 website-fc-serve。

相关链接：

更多内容

相关推荐
大魔王7191 小时前
进程线程和协程二
后端
前端拿破轮1 小时前
利用Github Page + Hexo 搭建专属的个人网站（一）
前端·人工智能·后端
鱼人1 小时前
线上排障利器：10 个必备 Linux 命令快速定位日志中的 Bug
后端
UrbanJazzerati1 小时前
从零到一：用Python Tkinter打造专业的文件行删除工具(一)
后端·面试
大鹏19881 小时前
Windows 下将 Java 项目打包为 Docker 容器并部署的完整指南
后端
大尚来也2 小时前
Python 实战指南：一键批量旋转 PDF 页面方向
后端
大黄评测2 小时前
跳出索引思维定式：一次基于业务逻辑的非典型 SQL 优化实践
后端
q1cheng2 小时前
基于Spring Boot + Vue项目online_learn的用户登录认证全流程分析
前端
bcbnb2 小时前
Fastlane 结合 AppUploader 来实现 CI 集成自动化上架
后端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03243 行 microGPT：把“训练 + 推理”拆到骨头里04UV安装并设置国内源05openclaw配置教程（linux+局域网ollama）06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07Zsh/Bash Conda设置延迟启动，启动速度优化08爬虫逆向之观安（观镜WEB应用安全防护系统）09MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法10openclaw 配置飞书 报错 应用未建立长连接