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

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

安装

首先要安装 serverless 组件

npm install -g serverless

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

touch serverless.yml

<a name="YpT8f"></a>

配置

在 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 信息并保存<br />

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

如果已有腾讯云账号，可以在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	错误页面_（对于使用前端框架构建的应用程序来说，需要将此参数设置为索引页，否则在页面刷新或重定向是会出现问题）_

来源：安徽网站优化