[Fun with Tencent Cloud] Cloud development WEB entry practice

[Fun with Tencent Cloud] Cloud development WEB entry practice

Project Introduction:

This project was developed when I participated in the Tencent Cloud Cloud Development Camp [web cloud development track-FILES storage]. Because there are few actual web cloud development web battles, I organized the code and uploaded it to GitHub and wrote this article. In this project you will learn the following features:

  1. Custom login on web
  2. Web-side operation database
  3. Upload, download and delete files on the web
  4. Temporary address of converted file in cloud function
  5. Cloud function http trigger

Technology use:

  • Back-end services use integrated solutions provided by Tencent Cloud Cloud Development, including cloud functions, cloud databases, and cloud storage capabilities
  • The front-end uses native JavaScript and layui front-end framework, and cooperates with the JS-SDK provided by Tencent Cloud Cloud to complete the docking of the back-end services
  • Front-end static resources are deployed on the static website hosting service developed by Tencent Cloud Cloud

Deployment steps:

1. Create a cloud development environment

Visit Tencent Cloud Cloud Development Console , create a new [ Pay-As-You-Go Cloud Development Environment], remember the cloud development environment ID, we need to use the cloud development website hosting service, currently only the Pay-As-You-Go environment supports static hosting.

Enter the website hosting control page , open the static website hosting service

Enter the database control page, add 2 collections; the collection names are files, files_old

2. Install and log in to CloudBase CLI

Install Cloud Development CLI

npm install -g @cloudbase/cli

Sign in

tcb login

3. download and configure the project

First clone this project to the local (or download the compressed package directly)

git clone https://github.com/hzjsj/files.git

Open the project directory with a code tool, and replace the [cloud development environment ID] in the following files with your own cloud development environment ID -/cloudbaserc.js line 2 - webviews/js/index.js line 1- -function/getTempFileURL/index.js line 5

Enter the environment setting control page , you can see the environment ID under the environment configuration

Enter the environment setting control page, under the login mode, find the custom login, click the private key to copy, and configure it to the functions/login/config.js file

4. upload and deploy cloud functions

After logging in with the CloudBase CLI tool, in the files/directory, run the following command to deploy the cloud function getTempFileURL, and replace envID with your own cloud development environment ID

tcb functions:deploy -e envID getTempFileURL

Similarly, run the following command to deploy the cloud function login

tcb functions:deploy -e envID login

Run the following to create an HTTP service for the login cloud function

tcb service:create -e envID -p/login -f login

5. local operation, deployment

Deploy to web hosting

# Deploy all files in the webviews directory to the root directory
tcb hosting:deploy webviews -e envId

Enter the website hosting control page , you can see the deployed files, click the settings option, you can see the default domain name, we need to add this domain name to the environment settings control page , the list of authorized domain names under the security configuration. If it already exists, you can also add localhost:5000 to debug locally when running.

Now you can see the deployed project by visiting the default domain name. Just enter a pop-up window, you can enter it for custom login, and then you can operate this page. The first time you upload a file, you may report a cross-domain error. This is a solution The method is to delete the security domain name configured in the figure above and add it again.

Run the project locally, execute the following command

cd webviews
npx serve

After running successfully, open a local static server, and then visit http://localhost:5000

summary:

When deploying cloud function, I use the cloud-dependent installation, you can refer to the official documentation online dependent on the installation , note that I saved reliance to be installed in package.json file, dependent on local installation may encounter a small problem, we all Can try

I wrote a function in webviews/js/index.js file, almost all comments can also refer to the official documentation to understand

This article is written carefully and suitable for beginners. Students with basics can also directly read the README.md file on GitHub

If you encounter problems during the operation, you can comment and leave your problem

Reference: https://cloud.tencent.com/developer/article/1607709 [Fun with Tencent Cloud] Introduction to Cloud Development WEB Practice-Cloud + Community-Tencent Cloud