Quickly deploy front-end applications using the Serverless Devs plugin

Author: Deng Chao Serverless Devs Open Source Contributor

background

In the above [Aliyun] [FC] How to use @serverless-devs/s to deploy a static website to Function Compute, we introduced in detail how to deploy a developed static website to Alibaba Cloud through @serverless-devs/s On Function Compute (FC), but recently, both Function Compute and @serverless-devs/s have updated a series of functions, and the current steps for deploying static websites can be more concise!

Deploy static website to Custom Runtime function using website-fc plugin

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

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

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

You ask me where did steps 1 and 2 go? Of course it was omitted!

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

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: # 任意的名称
    actions:
      pre-deploy:
        - plugin: website-fc     # 在 pre-deploy 插槽中安装 website-fc 插件
    component: devsapp/fc       # 使用 fc 组件
    props:
      region: cn-shenzhen       # 部署到任意的可用区, 例如深圳.
      service:
        name: my-awesome-websites   # 深圳可用区的 my-awesome-websites 服务
      function:
        name: website-fc-plugin    # my-awesome-websites 服务下的一个函数
        runtime: custom        # 使用 custom 运行环境
        handler: dummy-handler     # 由于使用了 custom 运行环境, 所以这里可以随便填
        codeUri: ./dist        # 部署 dist 文件夹下的全部内容
      triggers:
        - name: http
          type: http        # 创建一个 HTTP 类型的触发器, 以便客户端可以通过 HTTP 协议进行访问
          config:
            authType: anonymous    # 允许匿名访问
            methods: [ HEAD, GET ]  # 静态网站只需要处理 HEAD 和 GET 请求就够了

The difference from the above is that:

 actions:
      pre-deploy:
        - plugin: website-fc     # 在 pre-deploy 插槽中安装 website-fc 插件

The website-fc plugin installed in the pre-deploy slot can replace steps 1 and 2 above;

as well as:

Now instead of deploying the entire project into the function, only the built static files need to be deployed.

step 4. Deploy to Function Compute

After configuring AccessKey and AccessSecret(opens new window), please refer to:

https://www.serverless-devs.com/serverless-devs/command/config , execute the command:

Your website is deployed.

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

### step 5. Configure custom domain name

Take the custom domain name deploy-static-website-with-website-fc-plugin.example.dengchao.fun as an example.

First add a CNAME record, and fill in ${UID}.${REGION}.fc.aliyuncs.com for the parsing value. 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 Compute console:

Visit and try it out: http://deploy-static-website-with-website-fc-plugin.example.dengchao.fun (opens new window)

Sample project

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

refer to

[1] Alibaba Cloud Function Computing - Product Introduction(opens new window)
https://help.aliyun.com/document_detail/52895.html

[2] Resource usage limit(opens new window)
https://help.aliyun.com/document_detail/51907.html

[3] Custom runtime environment(opens new window)
https://help.aliyun.com/document_detail/132044.html

[4] Configure a custom domain name(opens new window)
https://help.aliyun.com/document_detail/90763.html

[5] Serverless devs official website(opens new window)
https://www.serverless-devs.com/

[6] Configure AccessKey and AccessSecret(opens new window)
https://www.serverless-devs.com/serverless-devs/command/config

[7] website-fc plugin
https://github.com/devsapp/website-fc

Click here to learn more about the Serverless Devs website!