preface

Before, I deployed the website code to coding, and successfully migrated to bucket COS on Tencent cloud, but I still found it very troublesome, mainly because cos is charged for object storage, and it was really uncomfortable to see the account balance is insufficient every day

See Tencent cloud launched this year static website hosting, so eager to try, after trying, as expected is strong

The premise to prepare

⒈ Log in Tencent cloud platform and enter the console

⒉ Find the static web hosting under cloud development in the cloud Products in the top menu bar (as shown in the picture below)

Video on

  • How to deploy the code to Tencent Cloud website static hosting (1)
  • How to deploy the code to Tencent Cloud website static hosting (ii)

Create a cloud development environment

If you use static web hosting of Tencent Cloud, you need to create a cloud environment first, and it will automatically build and initialize a environment

After you have created the dist, you just need to throw the local packaged dist file into the root directory of the environment, which is just a upload of the code, and the deployment, container, etc., static web hosting automatically takes care of that for you

Place the locally packaged code in the root directory

Once you have created the environment, added the custom domain name successfully (need to record), and resolved successfully, you can configure SSL certificates for secure access using HTTPS

You can then throw the local packaged code into the environment you created (as shown below).

(You can upload the code file manually or through the CLI tool.)

Use the CloudBase CLI tool to deploy files to CloudBase

Let’s talk about static web hosting

CloudBase is a new capability provided by Tencent Cloud. Using cloudBase static website hosting, you can provide fast and secure hosting services for web applications and static resources created by yourself

Static resources can be quickly deployed with a single command, and access to resources can be accelerated using CDN (Content distribution Network) (this is charged, if not clear, do not use freely, there is a price)

The main function

HTTPS:cloudBase static web hosting is built with HTTP and HTTPS, and can be used without additional configuration. You can apply for a free SSL certificate valid for one year, which is quite convenient

User-defined domain name: A cloudBase static website can use its own private domain name to access static resources. However, a registered domain name must be prepared. Otherwise, the user-defined domain name cannot be used

Fast distribution: Static resources will be cached on CDN edge servers everywhere, so the content can be loaded quickly no matter where your users are (which I value)

Command line deployment: Files can be easily deployed to cloudBase using the cloudBase CLI

Install the cloudBase CLI tool

  1. Install Node.js, download it from the official website, and select version LTS later than 8.6.0+
npm - v; // You can view the installed Node version
Copy the code
  1. Use NPM to install the CLI
npm i -g @cloudbase/cli
Copy the code
  1. Or install it using Yarn
yarn global add @cloudbase/cli
Copy the code

warning

If NPM install -g@cloudbase/CLI fails, you may need to change the NPM permission or run the following code as a system administrator

sudo npm install -g @cloudbase/cli
Copy the code
  1. Test whether cloudBase cli is successfully installed

You can use CloudBase -v to view the CLI version. If the terminal displays output, it indicates that the CLI version is successful

cloudbase - v;
Copy the code

This cloudbase command can be abbreviated to TCB, which is short for cloud development product (Tencent Cloud Base). You can use TCB -h to view all TCB commands

Ensure that the cloud development service has been successfully launched

Before starting to use the cloud development service, you need to log in to the Tencent Cloud Development console to ensure that you have opened the cloud development service and created a usable environment

The login

Log in to the Tencent cloud account and obtain authorization before the cloudBase CLI can operate resources. The cloudBase CLI provides two authorization methods

⒈ Tencent Cloud – Cloud development console

⒉ Cloud API key authorization

Tencent Cloud – Cloud development console authorization

Enter the following command in the terminal

tcb login
Copy the code

When you enter this command, it will automatically open the Cloud Development Console to obtain authorization, and agree to the authorization button to allow cloudBase CLI to obtain authorization

Tencent Cloud – Cloud API key authorization

First, Tencent cloud official website to obtain the cloud API key, and then enter the following command in the terminal

tcb login --key
Copy the code

Next, enter the SecretId and SecretKey of the cloud API key to complete the login

Login in CI

In a CI (Continuous integration) build, you can log in directly through the API key using the following method

tcb login --apikeyId xxx --apiKey xxx
Copy the code

The CloudBase-CLI environment is now complete

All quantity deployed

The CLI of cloud development provides commands to deploy website files. To the folder to be deployed, run the hosting:deploy command

Deploy all files in the current directory to a static web site, as shown below

$CD dist $Cloudbase Hosting deploy -e envId $CD dist $Cloudbase Hosting deploy -e envIdCopy the code

When you run this command, the deployment can be successful, but it will prompt you that the command is about to be discarded, just follow the prompt

Re-enter the specified command is ok

Deployment file

Sometimes, if you do not want a full deployment and only need to upload a single specified file, you can use the following command to upload the file to the root directory when cloudPath is not specified

Cloudbase hosting deploy localPath(localPath) cloudpath(path of the cloud environment directory) -e envIdCopy the code

As shown in the following example

-e envId # Deploy all files in the current directory to the root directory. If you do not specify a local hosting directory, you will upload all files in the current directory by defaultstaticDirectory where the index.js file is deployed tostatic/index.js
cloudbase hosting deploy ./static/index.js static/index.js -e envId
Copy the code

Pay attention to

When you use vue.history mode, you need to configure the error page in the static site-Settings bar to be the App dependent page. The maximum number of deployment files is 50TB. The number of deployment files is unlimited. The actual situation prevails

View cloud development environment information

Use the following command to display static site status, access domain names, and other information

cloudbase hosting detail -e envId
Copy the code

Delete the file

Use the following command to remove files or folders from the storage space of a static web site

cloudbase hosting deleteCloudPath (Cloud environment path) -e envIdCopy the code

Viewing the File List

Use the following command to deploy files in the display static web site storage space

cloudbase hosting list -e envId
Copy the code

Path specification

  • localPathIs the path of a local file or folder, in the form of a directory/file name, as shown in./index.js,static/css/index.css 等
  • cloudPathIs the relative root directory path of a cloud storage file or folder, and is in the format of a directory/file name, as shown inindex.js,static/css/index.jsEtc.

Pay attention to

In Windows, localPath is a localPath that can be identified by the system and is usually delimited with \. CloudPath is the cloud file path, which must be separated by /

Pay special attention to the path when uploading files

Matters needing attention

⒈ If an initialization environment is created using wordpress, CynosDB of its cloud database TencentDB is charged

⒉ If there is no deployment of any application in the environment, you can delete the cynosDB, do not delete, will always occupy resources, every hour will deduct fees, tuhao, optional

⒊ Static web hosting is also charged, it is by the amount of deducting fees, if you want to fully use the free hosting, you can choose to use Github Pages, but access speed, may not be guaranteed.

conclusion

In general, using static web hosting sites is very convenient, fast, this cloud development CloudBase is very powerful, can deploy a lot of applications

Like Express app,Vue app,Nuxt SSR app,React app,Koa app. Nodejs cloud hosting applications, or even build an environment on top of it, can be.

One-click deployment, no perception, no need to worry about docker containers and environment confusion, which eliminates operation and maintenance operations, weakens back-end and operation and maintenance capabilities, and enables developers to focus on their own business development, to quickly go online and realize their desired capabilities

Static web hosting itself is dependent on cloud development cloudBase, now, the market of technical framework services, basically covered, have to admit

Tencent yunyun development is advanced in this respect

Related reference documents

  • Static Web hosting
  • Use cli static web hosting
  • Source: https://coder.itclan.cn/