Introduction: Recently, Function Compute and @serverless-devs/s have updated a series of functions, and the steps for deploying static websites can be more concise now!

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:

www.serverless-devs.com/serverless-…

,Excuting an order:

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 the parsed value ${UID}.$ {REGION}.fc.aliyuncs.com。因为我们的 s.yaml 中设置的 region 是 cn-shenzhen, 所以对应的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com 。