How to build cloud development applications quickly

Understand cloud development applications

A cloud development application can be defined as an application running in the cloud development environment. For example, a service that contains the front and back ends and database capabilities can be deployed in the cloud development environment with one click. It uses Serverless resources at the bottom of the cloud development to enjoy the advantages of flexible o&M.

A cloud development application can be broken down into three parts, including code, declarative configuration, and environment variable information.

Below we will demonstrate how to develop a real-time dashboard cloud development application. The back-end capability is based on cloud development, while using the customer service messaging capability of the applet to send messages, which can be displayed in real time on the WEB panel page.

This application can achieve one-click deployment, deployed in the user’s cloud development environment, no need to care about server management and operation and maintenance, can be used immediately out of the box for a variety of gameplay scenarios such as on-site interaction.

Project Demo Address:

f.cloudbase.vip

Experience one-click deployment

Click the deploy button below to one-click deploy web pages, applets, and back-end services. You need to fill in the applets AppId and Base64 applets deployment private key (you can use the Applets Deployment Key Conversion tool to convert to Base64)

Note: After one-click deployment, you need to download the code and select the Text pair to connect to the Contact cloud function in the Applet Cloud Development Console [Settings – Global Settings – Add Notification Push]

How to develop a cloud development application

So how do we build a cloud development application that can be deployed with one click?

The whole process is divided into three steps, including development, configuration and deployment verification. This document will focus on configuration and deployment validation.

The development of

Part of the development process is not focused on, you can obtain the source code to understand the specific implementation, the overall code structure will be introduced below.

Program source code

The source code of this project can be viewed and obtained on Github:

Github.com/TCloudBase/…

The project structure

The overall project structure is as follows:

Wxapp-web-showmess ├─ Readme.md // ├─ CloudBaserc.json // CloudFunctions // CloudFunctions Directory ├─ MiniProgram / / small program directory ├ ─ ─ project. Config. The json / / small application configuration file └ ─ ─ the webview / / Web site directoryCopy the code

Cloud development resources used

  • A static web site
  • Cloud function
  • Cloud database (and real-time data push capability)
  • Cloud development anonymous login

configuration

Once you have the code for your project, how do you turn this into a one-click cloud development application?

Here’s a step-by-step guide to configuring cloud development applications.

Configure basic application information

Start by creating a CloudBaserc.json configuration file with the following contents.

{
  "envId": "{{env.ENV_ID}}"."version": "2.0"."$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json"."framework": {
    "name": "techo-show"."plugins": {}}}Copy the code
The main points of
  1. envIdTo specify the environment in which the application will be deployed, we use template variablesenv.ENV_IDSaid to readENV_IDThe environment variable
  2. framework.nameIs the name of the application. It can contain only A-z, A-z, 0-9 -, and _. The length is 1 to 32 characterstecho-showAs an application name
  3. framework.pluginsIs the information about the plug-in used by the application, which is left blank. Next, fill in the information according to the resource and application type
  4. For more information about project configuration, see the application project Information Description document

Use the cloud function plug-in

In this step, we need to use the cloud function plug-in to automate batch deployment and configuration of cloud functions.

Add a field fn under framework.plugins, the value of which is a JSON object.

{
  "fn": {
    "use": "@cloudbase/framework-plugin-function"."inputs": {
      "functionRootPath": "./cloudfunctions"."functions": [{"name": "contact"."installDependency": true
        },
        {
          "name": "delete"."installDependency": true
        },
        {
          "name": "inituser"."installDependency": true}]}}}Copy the code
The main points of
  1. fieldfnThe name can be customized and only serves as an alias
  2. "The use" : "@ cloudbase/framework - the plugin - function"It’s used here@cloudbase/framework-plugin-functionThis cloud function plug-in is used to deploy and manage cloud functions
  3. inputsUsed to set the parameters received by the plug-in, where we specify that the root directory of the function is./cloudfunctions, and there are three cloud functions, respectivelycontact,delete 和 inituser, all require cloud installation dependency
  4. The cloud function plug-in also supports the configuration of HTTP access addresses, RUtime, timing triggers, timeout duration, and security rules. For details, see the cloud function plug-in configuration description

Use the cloud database plug-in

In this step, we need to use the cloud database plug-in to automate the creation of cloud database collections and set security rules.

Add a db field under framework.plugins, and the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-database"."inputs": {
    "collections": [{"collectionName": "mess"."aclTag": "READONLY"
      },
      {
        "collectionName": "user"."aclTag": "ADMINONLY"}}}]Copy the code
The main points of
  1. Here we use@cloudbase/framework-plugin-databaseThis cloud database plug-in
  2. ininputsThere are two database collections configured
  3. messThe permissions of the collection are readable by all users, but written by creators and administrators only
  4. userThe permissions of the collection are readable by all users and writable by administrators only
  5. The cloud database plug-in also supports index configuration and user-defined security rules. For details, see the cloud database plug-in Configuration description

Use static web plugins

In this step we need to use the static web plugin to automatically publish the static web pages in the application.

Add a field web under Framework.plugins, and the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-website"."inputs": {
    "outputPath": "webview"."cloudPath": "/mess"."envVariables": {
      "ENV_ID": "{{env.ENV_ID}}"}}}Copy the code
The main points of
  1. Here we use@cloudbase/framework-plugin-websiteThis static site plugin
  2. ininputsWhere we specify static site local source directory (outputPath) iswebviewDirectories that need to be deployed in the cloud for static websites/messUnder the path
  3. We also injected the application’s environment ID into the configuration information of the static siteENV_IDSo that the page can be static by requesting the website root directory/cloudbaseenv.jsonTo get the environment ID of the current deployment environment. This allows a set of code to be deployed in another environment without modification. If you build with WebPack, you can also package environment variables into the page code.
  4. Static website plug-in also supports configuration of NPM dependent installation, custom build commands, and files to be ignored. For details, see the configuration description of static website plug-in

Use the login authentication plug-in

In this step we need to use the login authentication plug-in to automatically set the login mode for the application.

Add a field auth under framework.plugins, and the value of the field is a JSON object.

{
  "use": "@cloudbase/framework-plugin-auth"."inputs": {
    "configs": [{"platform": "ANONYMOUS"."status": "ENABLE"}}}]Copy the code
The main points of
  1. Here we use@cloudbase/framework-plugin-authThis login authentication plug-in
  2. ininputsIn, we have configured enabling anonymous login, which will automatically enable this login mode for users.
  3. The login authentication plug-in also supports other login modes, such as no login. For details, see the Login authentication plug-in Configuration description

Use applets

In this step we need to use the applet plug-in to automate the building and publishing of the applet.

Add a field mp under framework.plugins, and the value of the field is a JSON object.

{
    "use": "@cloudbase/framework-plugin-mp"."inputs": {
      "appid": "{{env.WX_APPID}}"."privateKey": "{{env.WX_CI_KEY}}"."localPath": ". /"."ignores": ["node_modules/**/*"]."deployMode": "preview"."previewOptions": {
        "desc": "One-click preview"."setting": {
          "es6": false
        },
        "qrcodeOutputPath": "./qrcode.jpg"."pagePath": "pages/index/index"."searchQuery": ""."scene": 1011}}}}Copy the code
The main points of
  1. Here we use@cloudbase/framework-plugin-mpThis applet plug-in
  2. ininputsIn, we configured the appID of the small program and the private key needed for deployment. Here, we filled in the template variable, which is the information that needs to be input by the user. Next, we need to obtain it in the application parameters.
  3. inputsIn the configuration, we also specify deployment mode as preview mode and options for preview.
  4. The applets also support other configurations for preview and upload. For detailed configuration instructions, please refer to the wechat applets configuration instructions

Configure application parameters and dependencies

When deploying the application, the user may also be required to enter some business parameters, such as the user’s own applets APPID and applets deployment key. We then need to declare the parameters required by the application.

First we add the following JSON configuration in Framework.requirement.

{
  "environment": {
    "WX_APPID": {
      "description": "Please fill in wechat mini program APPID"."required": true."default": ""."validation": {
        "rule": {
          "type": "RegExp"."pattern": "^wx.*"."flag": "g"
        },
        "errorMessage": "Must be the APPID of the applet."}},"WX_CI_KEY": {
      "description": "Please fill in the wechat applet to upload the key BASE64"."required": true."default": ""."validation": {
        "rule": {
          "type": "RegExp"."pattern": "^ (? :[A-Za-z0-9+/]{4})*(? :[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)? $"."flag": "g"
        },
        "errorMessage": "Must be BASE64 format key"}}}}Copy the code
The main points of

  1. WX_APPID and WX_CI_KEY are the keys of the environment variables we need to receive, which can be used in the template via env.wx_appID, or in cloud functions and cloud hosting via environment variables

  2. For each environment variable, we use JSON descriptions to indicate the field’s description, whether it is required, default values, and validation rules to check user input

  3. In addition to declaring dependencies on environment variables, you can also declare dependencies on external resources, such as external cloud resources used during application deployment, such as persistent file storage and MySQL database. For details, see the application dependency documents.

Local Deployment Verification

After configuring the plug-in information, we can now automate building and deploying applications that rely on all cloud development resources.

Next we need to create a.env file locally

ENV_ID= Environment ID WX_APPID= Applet appID WX_CI_KEY= Applet deployment private key (to be converted to Base64)Copy the code

Then run it from the command line

tcb framework deploy
Copy the code

You can deploy the static website, applets, databases, cloud functions, login authentication, and all the resources contained in the application.

You can see that the command line displays the preview QR code of the web portal and the applet after the successful deployment.

Generate deployment buttons

After local deployment verification, we can upload code to Git to generate a one-click deployment button.

Open the one-click deployment button to generate the address:

Docs.cloudbase.net/framework/d…

Enter the project’s Git address, configuration file location, and branch information into the page to generate the following deployment button snippet.

Several code snippets are generated for the deployment button, which can be embedded in different scenarios to allow users to deploy your application

  • Markdown code is suitable for scenarios such as README, blog posts written by Mardkown, etc

  • HTML code is suitable for use in public accounts, HTML-written websites/blog posts, etc

  • The URL link can be used on any page that supports hyperlinks. You can copy the link below and paste it into the corresponding page

conclusion

In this article, we learned what a cloud development application is, how to quickly build a one-click deployment of a cloud development application based on a real-time display board full stack application (including front-end pages, back-end services, databases, and applets).

Through actual practice, we have also learned about cloud development and the use of CloudBase Framework. You only need to complete development, configuration, and deployment verification to turn applications into applications that can be quickly distributed. You can automatically deploy applications without manually setting up and configuring the environment.

Reference documentation

  • Cloud development official website: www.cloudbase.net/
  • Cloud application development center: www.cloudbase.net/marketplace…
  • CloudBase Framework:github.com/Tencent/clo…
  • CloudBase Framework document: docs.cloudbase.net/framework/
  • A key deployment button generator: docs.cloudbase.net/framework/d…
  • Cloud development application template: github.com/TencentClou…
  • WeChat applet key tools: framework-1258016615.tcloudbaseapp.com/mp-key-tool…