Deploy a Static Website to Alibaba Cloud Function Compute with Serverless Devs

Our company often needs to publish static sites, and after comparing several products we chose Alibaba Cloud Function Compute (FC) because its elastic instance provides a sufficient 500 MB storage space for static assets.

Write a Simple HTTP Server

Using Express as an example, add the dependency and create app.js:

yarn add express

let Express = require("express");
let app = new Express();
app.use(Express.static('dist'));
// Serve static files from the dist folder
app.use((req, res) => { res.redirect("/"); });
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); });
// Listen on FC custom runtime default port 9000

Run the server with node app.js and verify that http://localhost:9000/dist/index.html is reachable.

Create a Bootstrap Script

FC custom runtime requires a bootstrap file to start the HTTP server. Create a file named bootstrap in the project root with the following content:

#! /bin/bash
node app.js

Note that the shebang line #! /bin/bash is mandatory, and Windows users must convert line endings from /r/n to /n to avoid startup timeouts.

Install Serverless Devs and Write s.yaml

Add the Serverless Devs CLI tool as a dev dependency: yarn add @serverless-devs/s -D Then create s.yaml in the project root:

# 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
    props:
      region: cn-shenzhen
      service:
        name: my-awesome-websites
      function:
        name: www-example-com
        runtime: custom
        handler: dummy-handler
        codeUri: ./
      triggers:
        - name: http
          type: http
          config:
            authType: anonymous
            methods: [ HEAD, GET ]

Deploy to Function Compute

Configure your AccessKey and AccessSecret, then execute: s deploy The website will be uploaded to FC.

Configure a Custom Domain

Add a CNAME record pointing to ${UID}.${REGION}.fc.aliyuncs.com (e.g., xxxxx.cn-shenzhen.fc.aliyuncs.com) and set the custom domain in the FC console. After propagation, the site can be accessed via the custom domain, for example:

http://deploy-static-website-to-fc.example.dengchao.fun

Sample Project

The sample project used in this article is available on GitHub:

https://github.com/DevDengChao/deploy-static-website-to-fc-example

Related Links

500 Mb storage limit – https://help.aliyun.com/document_detail/51907.html

Configure AccessKey and AccessSecret – https://www.serverless-devs.com/serverless-devs/command/config

Alibaba Cloud Function Compute product overview – https://help.aliyun.com/document_detail/52895.html

Resource usage limits – https://help.aliyun.com/document_detail/51907.html

Custom runtime documentation – https://help.aliyun.com/document_detail/132044.html

Custom domain configuration – https://help.aliyun.com/document_detail/90763.html