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

Time:2022-6-10

Author Deng Chao serverless devs open source contributor

preface

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:https://help.aliyun.com/document_detail/51907.html

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();
app.use(Express.static('dist'));
 //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:

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: my-awesome-website-project
services:
  My service: \any name
    Component: devsapp/fc \fc component
    props:
      Region: CN Shenzhen \
      service:
        Name: my awesome websites \my awesome websites service in Shenzhen availability zone
      function:
        Name: www-example-com \my-awesome-websites service
        Runtime: custom \
        Handler: dummy handler \
        codeUri: ./          #  Deploy all contents under the current folder
      triggers:
        - name: http
          Type: http \\create an HTTP type trigger so that the client can access it through the HTTP protocol
          config:
            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:
http://deploy-static-website-to-fc.example.dengchao.fun(opens new window)

Sample Engineering

The sample project in this article has been uploaded to github:
https://github.com/DevDengChao/deploy-static-website-to-fc-example(opens new window)

References and related links

[1] 500 MB storage
https://help.aliyun.com/document_detail/51907.html

[2] Configure accessKey and accesssecret
https://www.serverless-devs.com/serverless-devs/command/config

[3] Alibaba cloud function computing – Product Introduction
https://help.aliyun.com/document_detail/52895.html

[4] Resource usage restrictions
https://help.aliyun.com/document_detail/51907.html

[5] Customize the running environment
https://help.aliyun.com/document_detail/132044.html

[6] Configure custom domain name
https://help.aliyun.com/document_detail/90763.html

[7] Serverless dev official website
https://www.serverless-devs.com/

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. […]