基于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 />

扫描二维码关注公众号，回复： 8428573 查看本文章

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

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

来源：安徽网站优化