Quickly deploy front-end applications using the Serverless Devs plugin

Author | Deng Chao Serverless Devs Open Source Contributor

background

We are in [Above [Aliyun] [FC] How to use @serverless-devs/s to deploy a static website to Function Compute]( https://blog.dengchao.fun/_posts/2022/04/deploy-static-website-to -fc.html ), describes in detail how to deploy the developed static website to Alibaba Cloud Function Compute (FC) through @serverless-devs/s, but recently, both Function Compute and @serverless-devs/s A series of functions have been updated, 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:

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 for details, 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 a 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 parsed 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

• Alibaba Cloud Function Compute-Product Introduction(opens new window)

  • Resource usage limits(opens new window)
  • Customizing the Runtime Environment(opens new window)
  • Configuring a Custom Domain Name(opens new window)

• Serverless devs official website(opens new window)

  • Configure AccessKey and AccessSecret(opens new window)
• website-fc plugin

For more content, pay attention to the Serverless WeChat official account (ID: serverlessdevs), which brings together the most comprehensive content of serverless technology, regularly holds serverless events, live broadcasts, and user best practices.