Cómo implementar un sitio web estático en Function Compute usando Serverless Devs

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

prefacio

La compañía a menudo tiene algunos sitios web que deben publicarse en línea. Después de comparar varios productos diferentes, decidieron usar la computación funcional (FC) de Alibaba Cloud para alojar el sitio web estático creado. Los 500 Mb de almacenamiento [1] que vienen con FC Elastic Instances son simplemente demasiado para un sitio web estático.

Función Computar uso de recursos: help.aliyun.com/document_de…

Implemente un sitio web estático en la función Custom Runtime

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

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

paso 1. Escribe un servidor HTTP simple

Tome Express como ejemplo, primero agregue dependencias al proyecto:

yarn add express
复制代码

Luego crea un nuevo app.js y escribe:

let Express = require("express");
let app = new Express();
app.use(Express.static('dist'));
 //使用 dist 文件夹中的内容对外提供静态文件访问
app.use((req, res) => { res.redirect("/"); }); 
// 重定向无法处理的请求到网站的根目录
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); }); 
// 监听 FC custom 运行时默认的 9000 端口
复制代码

Inicie este sencillo servidor Express con el nodo app.js y pregunte a http://localhost:9000 para asegurarse de que se pueda acceder a /dist/index.html.

El siguiente paso es publicar app.js y dist to Function Compute.

paso 2. Escribir arranque

La función Compute custom runtime requiere que el usuario proporcione un archivo de arranque para iniciar el servidor HTTP personalizado, por lo que debemos crear este archivo en el directorio raíz:

#! /bin/bash
node app.js
复制代码

Tenga en cuenta que se requiere #!/bin/bash en la primera línea; de lo contrario, Function Compute no sabrá qué intérprete usar para ejecutar el contenido del script. Los usuarios de Windows recuerden cambiar el carácter de nueva línea de este archivo de /r/n a /n, de lo contrario, se encontrará con el problema del tiempo de espera de inicio del cálculo de la función.

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

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

yarn add @serverless-devs/s -D
复制代码

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

paso 4. Implementar para calcular funciones

Después de configurar AccessKey y AccessSecret[2], ejecute el comando:

s deploy
复制代码

Su sitio web está desplegado.

接下来就是配置自定义域名了, 配置好以后就可以通过你自己的域名访问到这个网站了。

step 5.配置自定义域名

以自定义域名 deploy-static-website-to-fc.example.dengchao.fun 为例； 首先添加 CNAME 记录, 解析值填写 ${UID}.${REGION}.fc.aliyuncs.com. 因为我们的 s.yaml 中设置的 region 是 cn-shenzhen, 所以对应的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

接下来设置函数计算控制台上的自定义域名:

访问一下试试看: deploy-static-website-to-fc.example.dengchao.fun(opens new window)

样本工程

本文中的样本工程已经上传到 GitHub: github.com/DevDengChao… new window)

参考及相关链接

[1] 500 Mb 存储空间 help.aliyun.com/document_de…

[2] 配置好 AccessKey 和 AccessSecret www.serverless-devs.com/serverless-…

[3] 阿里云函数计算-产品简介 help.aliyun.com/document_de…

[4] 资源使用限制 help.aliyun.com/document_de…

[5] Personaliza el entorno de ejecución help.aliyun.com/document_de…

[6] Configurar nombre de dominio personalizado help.aliyun.com/document_de…

[7] Desarrolladores sin servidor 官网www.serverless-devs.com/

¡ Haga clic aquí para obtener más información sobre el sitio web Serverless Devs!

Publique la información más reciente sobre la tecnología nativa de la nube, recopile el contenido más completo de la tecnología nativa de la nube, realice regularmente eventos nativos de la nube, transmita en vivo y lance los productos de Alibaba y las mejores prácticas de los usuarios. Explore las tecnologías nativas de la nube junto con usted y comparta el contenido nativo de la nube que necesita.

¡Siga la cuenta oficial de [Alibaba Cloud Native] para obtener más información en tiempo real sobre Cloud Native!