How to use serverless devs to deploy static websites to function calculation


Author Deng Chao serverless devs open source contributor


The company often has some websites that need to be published and launched. After comparing several different products, it decided to use alicloud’s function computing (FC) to host the built static websites. The 500 MB storage space [1] provided by the FC elastic instance is simply sufficient for static websites.

Function calculation resource usage:

Deploy static web site to custom runtime function

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

ζ dist/ build products to be deployed
│  └ 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();
 //Use the contents in dist folder to provide external static file access
app.use((req, res) => { res.redirect("/"); }); 
//Redirect unprocessed requests to the root of the web site
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); }); 
//Listening to FC custom runtime default 9000 port

Via node app JS start this simple express server and askhttp://localhost:9000Confirm /dist/index HTML can be accessed.

The next step is to put the app JS and dist are published to function calculation together.

step 2. Writing a bootstrap

The function calculation 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

Pay attention to the \/ Bin/bash is required, otherwise the function calculation does not know which interpreter should be used to execute the contents of the script. Windows users should remember to change the newline character of this file from /r/n to /n, otherwise they 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 tool to the project:

yarn add @serverless-devs/s -D

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

edition: 1.0.0
name: my-awesome-website-project
  My service: \any name
    Component: devsapp/fc \fc component
      Region: CN Shenzhen \
        Name: my awesome websites \my awesome websites service in Shenzhen availability zone
        Name: www-example-com \my-awesome-websites service
        Runtime: custom \
        Handler: dummy handler \
        codeUri: ./          #  Deploy all contents under the current folder
        - name: http
          Type: http \\create an HTTP type trigger so that the client can access it through the HTTP protocol
            Authtype: anonymous \\
            Methods: [head, get] \

step 4. Deploy to function calculation

After configuring accessKey and accesssecret[2], execute the command:

s deploy

Your website is deployed.

The next step is to configure the custom domain name. After the configuration, you can access the website through your own domain name.

step 5. Configure custom domain name

Deploy static website to fc example. dengchao. Fun as an example;
First, add the CNAME record, and fill in ${uid} for the resolved value$ {REGION}. fc. aliyuncs. com. Because the region set in our s.yaml is CN Shenzhen, the corresponding value is xxxxxx cn-shenzhen. fc. aliyuncs. com .


Next, set the custom domain name on the function calculation console:

Visit and try: new window)

Sample Engineering

The sample project in this article has been uploaded to github: new window)

References and related links

[1] 500 MB storage

[2] Configure accessKey and accesssecret

[3] Alibaba cloud function computing – Product Introduction

[4] Resource usage restrictions

[5] Customize the running environment

[6] Configure custom domain name

[7] Serverless dev official website

clickhere, learn more about serverless devs official website!

Release the latest information on cloud native technologies, collect the most complete content of cloud native technologies, regularly hold live broadcasts of cloud native technologies, and publish Alibaba products and users’ best practices. Explore cloud native technologies with you and share the cloud native content you need.

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

Recommended Today

Handwritten Vue2 series compiler

When learning becomes a habit, knowledge becomes common sense.thank you allfocus on、like、collectandComment。 New videos and articles will be sent on the WeChat public account as soon as possible, please pay attention:Li Yongning lyn Articles have been included ingithub repository liyongning/blog, Welcome to Watch and Star. foreword Next, we will officially enter the handwritten Vue2 series. […]