Serverless 应用中心 部署静态网站 - 最佳实践

操作场景

腾讯云 Website 静态网站组件通过使用 Tencent Serverless Framework，基于云上 Serverless 服务（如对象存储等），实现“0”配置，便捷开发，极速部署您的静态网站，Website 静态网站组件支持丰富的配置扩展，如自定义域名和 CDN 加速等。提供了目前最易用、低成本并且弹性伸缩的静态站点开发和托管能力。

特性介绍：

• 按需付费：按照请求的使用量进行收费，没有请求时无需付费。
• "0"配置：只需要关心项目代码，之后部署即可，Serverless Framework 会搞定所有配置。
• 极速部署：仅需几秒，部署您的静态网站。
• 实时日志：通过实时日志的输出查看业务状态，便于直接在云端开发应用。
• 便捷协作：通过云端的状态信息和部署日志，方便的进行多人协作开发。
• CDN 加速，SSL证书配置和自定义域名 ：支持配置CDN加速，支持自定义域名及 HTTPS 访问。

操作步骤

1. 安装

通过 npm 安装最新版本的 Serverless Framework：

$ npm install -g serverless

2. 创建

创建并进入一个全新目录：

$ mkdir tencent-website && cd tencent-website

通过如下命令和模板链接，快速创建一个静态网站托管应用：

$ serverless init website-demo
$ cd website-demo

下载完毕后，目录结构如下所示：

|- src
|   └── index.html
└──  serverless.yml

在 src 目录中既可以托管简单的 html 文件，也可以托管完整的 React/Vue 的应用。

3. 部署

在 serverless.yml 文件下的目录中运行如下命令进行静态网站的部署。部署完毕后，您可以在命令行的输出中查看到您静态网站的 URL 地址，点击地址即可访问网站托管的链接。

$ serverless deploy

如您的账号未 登录 或 注册 腾讯云，您可以直接通过微信扫描命令行中的二维码进行授权登录和注册。

如果希望查看更多部署过程的信息，可以通过sls deploy --debug 命令查看部署过程中的实时日志信息，sls是 serverless 命令的缩写。

4. 配置

静态网站组件支持“0”配置部署，也就是可以直接通过配置文件中的默认值进行部署。但您依然可以修改更多可选配置来进一步开发该静态网站项目。

以下是静态网站 Website 组件的 serverless.yml部分配置说明：

# serverless.yml
component: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件
name: websitedemo # (必填) 该 website 组件创建的实例名称
app: websiteApp # (可选) 该 website 应用名称
stage: dev # (可选) 用于区分环境信息，默认值是 dev
inputs:
  src:
    root: ./
    src: ./src
    hook: npm run build
    index: index.html
    websitePath: ./
  region: ap-guangzhou
  bucketName: my-bucket
  protocol: http
  hosts:
    - host: anycoder.cn
      https:
        certId: 123

查看 全量配置及配置说明 >>

当您根据该配置文件更新配置字段后，再次运行 serverless deploy 或者 serverless 就可以更新配置到云端。

5. 开发调试

部署了静态网站应用后，可以通过开发调试能力对该项目进行二次开发，从而开发一个生产应用。在本地修改和更新代码后，不需要每次都运行 serverless deploy 命令来反复部署。您可以直接通过 serverless dev 命令对本地代码的改动进行检测和自动上传。

可以通过在 serverless.yml文件所在的目录下运行 serverless dev 命令开启开发调试能力。

serverless dev 同时支持实时输出云端日志，每次部署完毕后，对项目进行访问，即可在命令行中实时输出调用日志，便于查看业务情况和排障。

6. 查看状态

在serverless.yml文件所在的目录下，通过如下命令查看部署状态：

$ serverless info

7. 移除

在serverless.yml文件所在的目录下，通过以下命令移除部署的静态网站 Website 服务。移除后该组件会对应删除云上部署时所创建的所有相关资源。

$ serverless remove

和部署类似，支持通过 sls remove --debug 命令查看移除过程中的实时日志信息（sls是 serverless 命令的缩写）。

账号配置

当前默认支持 CLI 扫描二维码登录，如您希望配置持久的环境变量/密钥信息，也可以本地创建 .env 文件：

$ touch .env # 腾讯云的配置信息

在 .env 文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存：

# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

说明：

• 如果没有腾讯云账号，请先 注册新账号。
• 如果已有腾讯云账号，可以在 API 密钥管理中获取 SecretId 和 SecretKey。