Introducción: Recientemente, Function Compute y @serverless-devs/s han actualizado una serie de funciones, ¡y los pasos actuales para implementar sitios web estáticos pueden ser más concisos!

Autor: Deng Chao Colaborador de código abierto de desarrolladores sin servidor

antecedentes

En el [Aliyun] [FC] anterior Cómo usar @serverless-devs/s para implementar un sitio web estático en Function Compute, presentamos en detalle cómo implementar un sitio web estático desarrollado en Alibaba Cloud a través de @serverless-devs/s On Function Compute (FC), pero recientemente, tanto Function Compute como @serverless-devs/s han actualizado una serie de funciones, ¡y los pasos actuales para implementar sitios web estáticos pueden ser más concisos!

Implemente un sitio web estático en la función Custom Runtime usando el complemento website-fc

Supongamos que ahora tenemos un proyecto front-end con la siguiente estructura:

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

paso 3. Instale @serverless-devs/s y escriba s.yaml

Usted me pregunta dónde fueron los pasos 1 y 2. ¡Por supuesto que se omitió!

Agregue las herramientas de línea de comando @serverless-devs/s al proyecto:

A continuación, cree un archivo de configuración básico de s.yaml en el directorio raíz:

# 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 请求就够了
复制代码

La diferencia con lo anterior es que:

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

El complemento website-fc instalado en la ranura previa a la implementación puede reemplazar los pasos 1 y 2 anteriores;

así como:

Ahora, en lugar de implementar todo el proyecto en la función, solo se deben implementar los archivos estáticos creados.

paso 4. Implementar para calcular funciones

Después de configurar AccessKey y AccessSecret(se abre en una ventana nueva), consulte:

www.serverless-devs.com/serverless-…

,Ejecutando una orden:

Su sitio web está desplegado.

El siguiente paso es configurar un nombre de dominio personalizado.Después de la configuración, puede acceder a este sitio web a través de su propio nombre de dominio.

paso 5. Configurar un nombre de dominio personalizado

Tome el nombre de dominio personalizado deployment-static-website-with-website-fc-plugin.example.dengchao.fun como ejemplo.

Primero agregue un registro CNAME y complete el valor analizado ${UID}.$ {REGION}.fc.aliyuncs.com。因为我们的 s.yaml 中设置的 region 是 cn-shenzhen, 所以对应的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com 。