快速部署静态网站

最近更新时间:2019-11-25 13:03:58

操作场景

静态网站应用调用了基础的腾讯云对象存储 COS 组件,可以快速部署静态网站页面到 COS 中,并生成域名供访问。

Serverless Framework + 腾讯云 >>

操作步骤

安装

通过 npm 安装 Serverless:

$ npm install -g serverless

创建

本地创建 my-website 文件夹:

$ mkdir my-website
$ cd my-website

在文件夹中创建对应的 serverless.yml 文件,并将静态页面放在code目录下,文件目录结构如下:

$ touch serverless.yml
|- code
  |- index.html
|- serverless.yml

code目录下应该对应 HTML/CSS/JS 资源的文件,或者一个完整的 React 应用。
下载 示例 HTML,将以下代码放在 index.html 文件中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, Tencent Cloud</title>
</head>
<body>
Hello, Tencent Cloud
</body>
</html>

配置

serverless.yml 文件中进行如下配置:

# serverless.yml

myWebsite:
  component: "@serverless/tencent-website"
  inputs:
    code:
      src: ./code
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: my-bucket

查看详细配置文档>>

部署

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

通过sls命令进行部署,并可以添加--debug参数查看部署过程中的信息:

$ sls --debug

    DEBUG ─ Resolving the template's static variables.
    DEBUG ─ Collecting components from the template.
    DEBUG ─ Downloading any NPM components found in the template.
    DEBUG ─ Analyzing the template's components dependencies.
    DEBUG ─ Creating the template's components graph.
    DEBUG ─ Syncing template state.
    DEBUG ─ Executing the template's components graph.
    DEBUG ─ Starting Website Component.
    DEBUG ─ Preparing website Tencent COS bucket my-bucket-1300415943.
    DEBUG ─ Deploying "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
    DEBUG ─ "my-bucket-1300415943" bucket was successfully deployed to the "ap-guangzhou" region.
    DEBUG ─ Setting ACL for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
    DEBUG ─ Ensuring no CORS are set for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
    DEBUG ─ Ensuring no Tags are set for "my-bucket-1300415943" bucket in the "ap-guangzhou" region.
    DEBUG ─ Configuring bucket my-bucket-1300415943 for website hosting.
    DEBUG ─ Uploading website files from /Users/dfounderliu/Desktop/temp/code/src to bucket my-bucket-1300415943.
    DEBUG ─ Starting upload to bucket my-bucket-1300415943 in region ap-guangzhou
    DEBUG ─ Uploading directory /Users/dfounderliu/Desktop/temp/code/src to bucket my-bucket-1300415943
    DEBUG ─ Website deployed successfully to URL: https://my-bucket-1300415943.cos-website.ap-guangzhou.myqcloud.com.

    myWebsite: 
      url: https://my-bucket-1300415943.cos-website.ap-guangzhou.myqcloud.com
      env: 

    2s › myWebsite › done

移除

通过以下命令移除项目:

sls remove --debug

  DEBUG ─ Flushing template state and removing all components.
  DEBUG ─ Starting Website Removal.
  DEBUG ─ Removing Website bucket.
  DEBUG ─ Removing files from the "my-bucket-1300415943" bucket.
  DEBUG ─ Removing "my-bucket-1300415943" bucket from the "ap-guangzhou" region.
  DEBUG ─ "my-bucket-1300415943" bucket was successfully removed from the "ap-guangzhou" region.
  DEBUG ─ Finished Website Removal.

  3s › myWebsite › done

账号配置(可选)

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

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

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

# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
说明: