跳到主要内容

serverless 快速配置静态网站

前后端分离的项目，前端只需要将构建出来的产物或静态文件放在服务器中，并配置一下 http 服务器即可，较为容易做成标准化流程。所以就诞生 serverless 快速部署网站的方式，当然 serverless 能做的事情不止这些，还包括：云函数等。

本文以快速部署静态网站为出发点作简单的流程说明。

serverless 简单介绍​

维基百科

无服务器框架（Serverless Framework） 是一个使用 Node.js 编写的免费开放原始程式码的 Web 框架。 无服务器（Serverless） 是第一个为在 AWS Lambda 平台上构建应用程序而开发的框架，AWS Lambda 是亚马逊作为 Amazon Web Services 的一部分提供的无服务器计算平台。

概要​

  • 需要注册云服务厂商的账号，如：AWS、腾讯云、阿里云等
  • 有一定的流量费用，不过中小企业或个人使用起来比租用云服务器要便宜，优势在于按需计费不占用服务器资源
  • 构建的域名如： https://sls-website-ap-guangzhou-nbf9sm-1301866726.cos-website.ap-guangzhou.myqcloud.com (可自定义域名，但需要备案，虽然有其他方法可申请 https ，但是国家层面的监控最终是躲不过的，建议进行域名备案)

快速安装​

npm install -g serverless

资源​

  • **Serverless Devs - 组件化和插件化设计，无厂商锁定的开发者工具
    • nodejs 生态 @serverless-dev/s

不同厂商的配置​

腾讯​

yaml 配置文档： https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md

component: website
name: iHosServer
org: test
app: iHosServer
stage: dev

inputs:
  src:
    src: ./dist/build/h5 # Upload static files
    index: index.html
    error: 404.html
    region: ap-guangzhou
    bucketName: my-bucket

阿里​

https://developer.aliyun.com/article/883420

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: hdf-h5-ihosserver-pord
services:
  # 任意的名称
  my-service: 
    # 使用 fc 组件
    component: devsapp/fc       
    props:
      # 部署到任意的可用区, 例如深圳.
      region: cn-guangzhou       
      service:
        # 深圳可用区的 my-awesome-websites 服务
        name: hdf-h5-ihosserver-pord   
      function:
        # my-awesome-websites 服务下的一个函数
        name: www-example-com 
        # 使用 custom 运行环境   
        runtime: custom  
        # 由于使用了 custom 运行环境, 所以这里可以随便填     
        handler: dummy-handler 
        # 部署当前文件夹下的全部内容   
        codeUri: ./dist/build/h5         
      triggers:
          name: http
          type: http        
          config:
            # 允许匿名访问
            authType: anonymous
            # 静态网站只需要处理 HEAD 和 GET 请求就够了    
            methods: [ HEAD, GET ]