tencent cloud

All product documents
Serverless Application Center
DocumentationServerless Application CenterPractical TutorialDeploying Static Website
Deploying Static Website
Download PDF
Last updated: 2024-12-02 11:16:20
Deploying Static Website
Last updated: 2024-12-02 11:16:20
Download PDF

Overview

Tencent Cloud static website component uses Tencent Serverless Framework. Based on serverless services (such as COS) in the cloud, it can implement "zero" configuration, convenient development, and rapid deployment of your static website. The static website component supports a rich set of configuration extensions such as custom domain name and CDN acceleration and provides the easiest-to-use, low-cost, and elastically scalable cloud-based static website development and hosting capabilities.
Features:
Pay-as-you-go billing: fees are charged based on the request usage, and you don't need to pay anything if there is no request.
"Zero" configuration: you only need to write project code and then deploy it, and the Serverless Framework will take care of all the configuration work.
Fast deployment: you can deploy your static website in just a few seconds.
Real-time log: you can view the business status through the output of the real-time log, which makes it easy for you to develop applications directly in the cloud.
Convenient collaboration: the status information and deployment logs in the cloud make multi-person collaborative development easier.
CDN acceleration, SSL certificate configuration, and custom domain name: you can configure CDN acceleration, custom domain names, and HTTPS access.

Directions

1. Install

Install the latest version of Serverless Framework through npm:
$ npm install -g serverless

2. Create

Create a directory and enter it:
$ mkdir tencent-website && cd tencent-website
Use the following command and template link to quickly create a static website hosting application:
$ serverless init website-demo
$ cd website-demo
After download, the directory structure is as follows:
|- src
|   └── index.html
└──  serverless.yml
In the src directory, you can host both simple HTML files and complete React/Vue applications.

3. Deploy

Run the following command in the directory under the serverless.yml file to deploy the static website. After the deployment is completed, you can view the URL address of your static website in the output on the command line. Then, you can click the address to visit the hosted website.
$ serverless deploy
If you have not logged in to or signed up for a Tencent Cloud account, you can directly log in or sign up by scanning the QR code on the command line with WeChat.
If you want to view more information on the deployment process, you can run the sls deploy --debug command to view the real-time log information during the deployment process (sls is an abbreviation for the serverless command).

4. Configure

The static website component supports "zero" configuration deployment, that is, it can be deployed directly through the default values in the configuration file. Nonetheless, you can also modify more optional configuration items to further customize your project.
The following describes certain configuration items in serverless.yml of the static website component:
# serverless.yml

component: website # Name of the imported component, which is required. The `tencent-website` component is used in this example
name: websitedemo # Name of the instance created by this `website` component, which is required

app: websiteApp # Website application name, which is optional
stage: dev # Information for identifying environment, which is optional. The default value is `dev`

inputs:
    src:
      src: ./src  # Directory path of the deployed project
      # dist: ./dist # Output directory after build completion. If a hook is configured, this parameter is required
      # hook: npm run build # Hook script
      index: index.html
      websitePath: ./
    region: ap-guangzhou
    bucketName: my-bucket
    protocol: http
    hosts:
      - host: abc.com
        https:
          switch: on
          http2: on
          certInfo:
            certId: 'abc'
After you update the configuration fields according to the configuration file, run serverless deploy or serverless again to update the configuration to the cloud.

5. Debug

After the static website application is deployed, the project can be further developed through the debugging feature to create an application for the production environment. After modifying and updating the code locally, you don't need to run the serverless deploy command every time for repeated deployment. Instead, you can run the serverless dev command to directly detect and automatically upload changes in the local code.
You can enable debugging by running the serverless dev command in the directory where the serverless.yml file is located.
serverless dev also supports real-time outputting of cloud logs. After each deployment, you can access the project to output invocation logs in real time on the command line, which makes it easy for you to view business conditions and troubleshoot issues.

6. Check status

In the directory where the serverless.yml file is located, run the following command to check the deployment status:
$ serverless info

7. Remove

In the directory where the serverless.yml file is located, run the following command to remove the deployed static website service. After removal, this component will delete all related resources created during deployment in the cloud.
$ serverless remove
Similar to the deployment process, you can run the sls remove --debug command to view real-time log information during the removal process (sls is an abbreviation for the serverless command).

Account Configuration

Currently, you can scan a QR code to log in to the CLI by default. If you want to configure persistent environment variables/key information, you can also create a local .env file:
$ touch .env # Tencent Cloud configuration information
Configure Tencent Cloud's SecretId and SecretKey information in the .env file and save it:
# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
Note:
If you don't have a Tencent Cloud account yet, please sign up first.
If you already have a Tencent Cloud account, you can get SecretId and SecretKey in API Key Management.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support