Quick Deployment Front End Project to Tencent Cloud Based on serverless

Posted by sw45acp on Mon, 06 Jan 2020 15:22:26 +0100

The Tencent Cloud COS component allows you to quickly deploy static Web site pages into object storage COS and generate domain names for access.

install

First install the serverless component

npm install -g serverless

Generate a configuration file at the root of the project

touch serverless.yml

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

To configure

Configure the following in the serverless.yml file

# 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

deploy

If your account is not Land or register Tencent Cloud, you can authorize login and registration directly through the two-dimensional code in the WeChat scan command line.

Deploy with the sls command and add the --debug parameter to view information during deployment (for Windows users, the sls command may not be available and you need to use the full serverless command when using it)

$ 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

remove

Remove the project with the following commands

$ 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

Account Configuration (Optional)

CLI Scan QR Code login is currently supported by default, and.env files can be created locally if you want to configure persistent environment variable/key information

$ touch .env # Configuration information for Tencent Cloud

Configure SecretId and SecretKey information of Tencent Cloud in the.env file and save <br />

If you don't have a Tencent cloud account, you can go here Register a new account.

If you already have a Tencent cloud account, you can API Key Management Get SecretId and SecretKey in.

# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

Profile Details

A complete configuration file is shown below

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

Description of main parameters

parameter Must/Optional default describe
code Must Site Code Information
region Optional ap-guangzhou Location of the bucket, Guangzhou by default
bucketName Must Bucket name, if you do not add an AppId suffix, it will automatically be added for you, suffix cannot be capitalized
protocol Optional https Protocol: https or 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

Code parameter description

parameter Must/Optional default describe
root Optional The root folder of your site project.Default to current working directory
src Must Folder to upload containing the artifacts you built
hook Optional Hook to build/test/perform any action on code before uploading
index Optional index.html Index Page
error Optional error.html Error Page (For applications built with a front-end framework, this parameter needs to be set to an index page, otherwise there will be problems refreshing or redirecting the page)_

See more Official Documents

Share more great articles to What's Researching Welcome!

Topics: Front-end npm Windows