本插件帮助您通过Serverless-Devs工具和FC组件,快速部署静态网站到阿里云函数计算平台。
- 源码
- 快速体验:
s init website-vuepress
通过OSS组件可以将静态资源快速部署到阿里云对象存储上,同时分发到CDN节点。不同地域的客户都能快速的访问对应的资源。
上面的架构是比较推荐的最佳实践,能够保证高可用,和极致弹性,也是一个标准的Serverless架构。同时用户也能快速的访问它就近的资源,提供了最好的用户体验。
通过CDN+OSS的方式虽然在性能和弹性都做到了最优,但是有下面几种场景,用户会选择他的应用部署在函数计算上
- 不希望太复杂的架构,前后端都部署在函数计算上
- FullStack的框架,前后端都是一体化,前端部署在OSS有跨域的问题。如果要解决跨域的问题,又需要引入网关等组件,进一步带来了架构的复杂度
- FaaS厂商一般都有免费额度,我的流量不高,部署在Faas足够用了
website-fc本质是针对FC组件进行增强。
还是遵循FC组件的Yaml规范,区别在于
- 在执行部署之前声明对应的插件
website-fc
actions: # 自定义执行逻辑
pre-deploy: # 在deploy之前运行
- plugin: website-fc
- 更改函数的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
以下是来自社区实践后总结出的最佳实践:
欢迎大家通过 PR 投稿更多内容.
image 插件本质是上对组件能力的增强,作用在组件的执行前(pre-deploy)以及执行后(post-deploy)。通过修改组件的入参(input)和出参(output),提供能力。
需要注意的是:上一个插件的出参(output)会作为下一个插件或者组件的入参。详情可查看 插件模型开发指南
website-fc 插件在把你的代码部署到云端前将 runtime 覆盖为了 custom 运行时, 将 caPort 覆盖为了 9000,
以及生成了一段简单的监听 9000 端口的 Express 代码到最终的 codeUri 中, 并通过 node 启动了 Express HTTP 服务器.
- Serverless Devs 工具:
- 阿里云函数计算组件:
- 钉钉交流群:33947367