How to deploy a static website to Function Compute using Serverless Devs

Author | Deng Chao Serverless Devs Open Source Contributor

foreword

The company often has some websites that need to be released online. After comparing several different products, they decided to use Alibaba Cloud's function computing (FC) to host the built static website. The 500 Mb of storage [1] that comes with FC Elastic Instances is simply too much for a static website.

Function Compute resource usage: help.aliyun.com/document_de…

Deploy static website to Custom Runtime function

Suppose we now have a front-end project with the following structure:

/
├ dist/ 待部署的构建产物
│  └ index.html 
├ src/
└ package.json
复制代码

step 1. Write a simple HTTP server

Take Express as an example, first add dependencies to the project:

yarn add express
复制代码

Then create a new app.js and write:

let Express = require("express");
let app = new Express();
app.use(Express.static('dist'));
 //使用 dist 文件夹中的内容对外提供静态文件访问
app.use((req, res) => { res.redirect("/"); }); 
// 重定向无法处理的请求到网站的根目录
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); }); 
// 监听 FC custom 运行时默认的 9000 端口
复制代码

Start this simple Express server with node app.js and ask http://localhost:9000 to make sure /dist/index.html can be accessed.

The next step is to publish app.js and dist to Function Compute.

step 2. Write bootstrap

Function Compute custom runtime requires the user to provide a bootstrap file to start the custom HTTP server, so we need to create this file in the root directory:

#! /bin/bash
node app.js
复制代码

Note that #!/bin/bash in the first line is required, otherwise Function Compute will not know which interpreter to use to execute the contents of the script. Windows users remember to change the newline character of this file from /r/n to /n , otherwise you will encounter the problem of function calculation startup timeout.

step 3. Install @serverless-devs/s and write s.yaml

Add the @serverless-devs/s command line tools to the project:

yarn add @serverless-devs/s -D
复制代码

Then create a basic s.yaml configuration file in the root directory:

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: my-awesome-website-project
services:
  my-service: # 任意的名称
    component: devsapp/fc       # 使用 fc 组件
    props:
      region: cn-shenzhen       # 部署到任意的可用区, 例如深圳.
      service:
        name: my-awesome-websites   # 深圳可用区的 my-awesome-websites 服务
      function:
        name: www-example-com     # my-awesome-websites 服务下的一个函数
        runtime: custom        # 使用 custom 运行环境
        handler: dummy-handler     # 由于使用了 custom 运行环境, 所以这里可以随便填
        codeUri: ./          # 部署当前文件夹下的全部内容
      triggers:
        - name: http
          type: http        # 创建一个 HTTP 类型的触发器, 以便客户端可以通过 HTTP 协议进行访问
          config:
            authType: anonymous    # 允许匿名访问
            methods: [ HEAD, GET ]  # 静态网站只需要处理 HEAD 和 GET 请求就够了
复制代码

step 4. Deploy to Function Compute

After configuring AccessKey and AccessSecret[2], execute the command:

s deploy
复制代码

Your website is deployed.

接下来就是配置自定义域名了, 配置好以后就可以通过你自己的域名访问到这个网站了。

step 5.配置自定义域名

以自定义域名 deploy-static-website-to-fc.example.dengchao.fun 为例； 首先添加 CNAME 记录, 解析值填写 ${UID}.${REGION}.fc.aliyuncs.com. 因为我们的 s.yaml 中设置的 region 是 cn-shenzhen, 所以对应的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

接下来设置函数计算控制台上的自定义域名:

访问一下试试看: deploy-static-website-to-fc.example.dengchao.fun(opens new window)

样本工程

本文中的样本工程已经上传到 GitHub: github.com/DevDengChao… new window)

参考及相关链接

[1] 500 Mb 存储空间 help.aliyun.com/document_de…

[2] 配置好 AccessKey 和 AccessSecret www.serverless-devs.com/serverless-…

[3] 阿里云函数计算-产品简介 help.aliyun.com/document_de…

[4] 资源使用限制 help.aliyun.com/document_de…

[5] Customize the running environment help.aliyun.com/document_de…

[6] Configure custom domain name help.aliyun.com/document_de…

[7] Serverless devs 官网 www.serverless-devs.com/

Click here to learn more about the Serverless Devs website!

Publish the latest information on cloud native technology, gather the most comprehensive content of cloud native technology, regularly hold cloud native events, live broadcasts, and release Alibaba products and user best practices. Explore cloud-native technologies side by side with you and share the cloud-native content you need.

Follow the official account of [Alibaba Cloud Native] to get more real-time information about cloud native!