Website-fc Plugin

本插件帮助您通过Serverless-Devs工具和FC组件，快速部署静态网站到阿里云函数计算平台。

• 快速开始
  • 插件作用
  • 使用教程
    • 快速上手
    • 参数说明
    • 作用域
  • 操作案例
  • 最佳实践
  • 工作原理
• 关于我们

快速开始

• 源码
• 快速体验: s init website-vuepress

插件作用

通过CDN+OSS部署

通过OSS组件可以将静态资源快速部署到阿里云对象存储上，同时分发到CDN节点。不同地域的客户都能快速的访问对应的资源。

上面的架构是比较推荐的最佳实践，能够保证高可用，和极致弹性，也是一个标准的Serverless架构。同时用户也能快速的访问它就近的资源，提供了最好的用户体验。

通过函数计算FC部署

通过CDN+OSS的方式虽然在性能和弹性都做到了最优，但是有下面几种场景，用户会选择他的应用部署在函数计算上

• 不希望太复杂的架构，前后端都部署在函数计算上
• FullStack的框架，前后端都是一体化，前端部署在OSS有跨域的问题。如果要解决跨域的问题，又需要引入网关等组件，进一步带来了架构的复杂度
• FaaS厂商一般都有免费额度，我的流量不高，部署在Faas足够用了

使用教程

快速上手

website-fc本质是针对FC组件进行增强。 还是遵循FC组件的Yaml规范，区别在于

1. 在执行部署之前声明对应的插件website-fc

actions: # 自定义执行逻辑
  pre-deploy: # 在deploy之前运行
    - plugin: website-fc

2. 更改函数的codeUri为静态资源的本地地址

services:
  website:
    component: fc
    actions: # 自定义执行逻辑
      pre-deploy: # 在deploy之前运行
        - plugin: website-fc
    props: #  组件的属性值
      region: ${vars.region}
      service: ${vars.service}
      function:
        name: http-trigger-nodejs14
        description: 'hello world by serverless devs'
        runtime: nodejs14
        codeUri: ./build # 本地静态资源的地址

参数说明

参数详情：

参数名称	默认值	参数含义	必填
index	index.html	自定义默认首页	false

我们知道访问静态网站需要一个html的页面作为首页，比如您访问http://www.serverless-devs.com/首页的时候，其实实际访问的资源是http://www.serverless-devs.com/index.html。

website-fc插件的默认行为也是会将您的默认首页指向index.html。如果您需要自定义您的首页为demo.html。只需要做如下声明

actions: # 自定义执行逻辑
  pre-deploy: # 在deploy之前运行
    - plugin: website-fc
      args:
        index: demo.html

可以参考案例

作用域

Website-fc只能在pre-deploy阶段生效。

actions: # 自定义执行逻辑
  pre-deploy: # 在deploy之前运行
    - plugin: website-fc

操作案例

• 项目目录结构

- dist
  - index.htm
- s.yaml

• yaml配置如下

edition: 1.0.0        #  命令行YAML规范版本，遵循语义化版本（Semantic Versioning）规范
name: component-test   #  项目名称
access: default # 密钥别名

vars: # 全局变量
  region: cn-hangzhou
  service:
    name: hello-world-service
    description: 'hello world by serverless devs'

services:
  website:
    component: fc
    actions: # 自定义执行逻辑
      pre-deploy: # 在deploy之前运行
        - plugin: website-fc
    props: #  组件的属性值
      region: ${vars.region}
      service: ${vars.service}
      function:
        name: http-trigger-nodejs14
        description: 'hello world by serverless devs'
        runtime: nodejs14   # 任何一个 runtime 都可以
        codeUri: ./dist
        memorySize: 128
        timeout: 60
      triggers:
        - name: httpTrigger
          type: http
          config:
            authType: anonymous
            methods:
              - GET
      customDomains:
        - domainName: auto
          protocol: HTTP
          routeConfigs:
            - path: /*
              methods:
                - GET

最佳实践

以下是来自社区实践后总结出的最佳实践:

• 如何使用 website-fc 插件部署静态网站到函数计算 by DevDengChao

欢迎大家通过 PR 投稿更多内容.

工作原理

插件运行原理

插件本质是上对组件能力的增强，作用在组件的执行前(pre-deploy)以及执行后(post-deploy)。通过修改组件的入参(input)和出参(output)，提供能力。

需要注意的是：上一个插件的出参(output)会作为下一个插件或者组件的入参。详情可查看 插件模型开发指南

website-fc 插件在把你的代码部署到云端前将 runtime 覆盖为了 custom 运行时, 将 caPort 覆盖为了 9000, 以及生成了一段简单的监听 9000 端口的 Express 代码到最终的 codeUri 中, 并通过 node 启动了 Express HTTP 服务器.

关于我们

• Serverless Devs 工具：
  • 仓库：https://www.github.com/serverless-devs/serverless-devs

    欢迎帮我们增加一个 🌟

  • 官网：https://www.serverless-devs.com/
• 阿里云函数计算组件：
  • 仓库：https://github.com/devsapp/fc
  • 帮助文档：https://www.serverless-devs.com/fc/readme
• 钉钉交流群：33947367