基于serverless快速部署前端项目到腾讯云

68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6173736574732e67656e6572616c2e7365727665726c6573732e636f6d2f636f6d706f6e656e745f776562736974655f74656e63656e742f726561646d652d776562736974652d74656e63656e742d736572.png

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

安装

首先要安装 serverless 组件

npm install -g serverless

在项目的根目录下生成配置文件

touch serverless.yml

配置

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

# serverless.yml

myWebsite:
  component: '@serverless/tencent-website'
  inputs:
    code:
      src: build
      hook: npm run build
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: my-bucket

部署

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

通过 sls 命令进行部署，并可以添加 --debug 参数查看部署过程中的信息（对于Windows用户来说， sls 命令可能无法使用，在使用时需要使用完整的 serverless 命令）

$ 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 信息并保存

如果没有腾讯云账号，可以在此注册新账号。

如果已有腾讯云账号，可以在API 密钥管理中获取 SecretId 和SecretKey.

# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

配置文件详解

一个完整的配置文件如下所示

myWebsite:
  component: '@serverless/tencent-website'
  inputs:
    code:
      root: ./
      src: ./src
      hook: npm run build
      index: index.html
      error: index.html
    region: ap-guangzhou
    bucketName: my-bucket
    protocol: http
    hosts:
      - host: abc.cn
      - host: abc.com
        fullUrl: on
        cache:
          - type: 0
            rule: all
            time: 1000
          - type: 0
            rule: all
            time: 1000
        cacheMode: simple
        refer:
          - type: 1
            list:
              - 'qq.baidu.com'
              - '*.baidu.com'
        accessIp:
          type: 1
          list:
            - '1.2.3.4'
            - '2.3.4.5'
        https:
          certId: 123
          cert: 123
          privateKey: 123
          http2: off
          httpsType: 2
          forceSwitch: -2
    env:
      API_URL: https://api.com
    cors:
      - allowedOrigins:
          - '*.tencent.com'
          - '*.qcloud.com'
        allowedMethods:
          - PUT
          - POST
          - DELETE
          - HEAD
        allowedHeaders: '*'
        maxAgeSeconds: 0
      - allowedOrigins:
          - '*'
        allowedMethods:
          - GET
        allowedHeaders: '*'
        maxAgeSeconds: 0

主要参数说明

参数	必须/可选	默认	描述
code	必须		网站代码信息
region	可选	ap-guangzhou	存储桶所属地域，默认为广州
bucketName	必须		存储桶名称，如果您不添加AppId后缀，则会自动为您添加，后缀不能大写
protocol	可选	https	协议：https 或者 http
env	Optional		Environment variables to include in a 'env.js' file with your uploaded code.
cors	Optional		Cross-Origin Resource Sharing
hosts	Optional		Add domain

代码参数说明

参数	必须/可选	默认	描述
root	可选		您的网站项目的根文件夹。 默认为当前工作目录
src	必须		包含您构建的工件的要上传的文件夹
hook	可选		在上传之前对代码进行构建/测试/执行任何操作的钩子
index	可选	index.html	索引页
error	可选	error.html	错误页面（对于使用前端框架构建的应用程序来说，需要将此参数设置为索引页，否则在页面刷新或重定向是会出现问题）

更多内容请查看官方文档

更多精彩文章第一时间分享至 研之有物 ，欢迎关注！