Skip to main content
Supported Regions:上海

Guide to Rapidly Building Cloud Development Applications

Learn About Cloud Development Applications​

Cloud development applications refer to applications running in a cloud development environment. For example, a service encompassing capabilities such as frontend, backend, and databases can be deployed directly in the cloud development environment with one-click deployment. It utilizes various Serverless resources underlying cloud development, benefiting from the advantages of elasticity and Ops-free operations.

A cloud development application can be broken down into three components, including code, declarative configuration, and environment variables.

Below we will demonstrate how to develop a real-time dashboard cloud development application. The backend capabilities are built on Cloud Development, leveraging the Mini Program's customer service messaging feature to send messages that are displayed in real time on the WEB dashboard page.

This application enables one-click deployment to the user's cloud development environment, eliminating the need to manage servers or Ops. It can be used out-of-the-box for various scenarios such as live interactions.

Project Demo URL:​

f.cloudbase.vip

Try One-Click Deployment​

Click the deploy button below to one-click deploy the webpage, Mini Program, and backend services. You need to fill in the Mini Program AppId and the Base64-format Mini Program deployment private key (you can use the Mini Program Deployment Key Conversion Tool to convert to Base64).

Note: After one-click deployment, you need to download the code and select the text type in the Mini Program Cloud Development Console under [Settings - Global Settings - Add Message Push] to integrate with the contact cloud function.

How to Develop a Cloud Development Application​

So how we can build such a cloud development application that supports one-click deployment?

The overall process is divided into 3 steps, primarily consisting of development, configuration, and deployment verification. This document will primarily cover the configuration and deployment verification phases.

Development​

The development phase will not be covered in detail. You can get the source code to understand the specific implementation. The following section describes the overall code structure.

Project Source Code​

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

https://github.com/TCloudBase/WXAPP-WEB-ShowMess

Project Structure​

The overall project structure is as follows:

WXAPP-WEB-ShowMess
├── README.md // Project Introduction Document
├── cloudbaserc.json // Cloud Development configuration file
├── cloudfunctions // cloud function directory
├── miniprogram // Mini Program directory
├── project.config.json // Mini Program configuration file
└── webview // Web Directory

Used Cloud Development Resources​

  • Static Website
  • Cloud Function
  • Database (and real-time data push capability)
  • Cloud Development Anonymous Login

Configuration​

With the project code ready, how can we build this application into a cloud development application that supports one-click deployment?

The following will introduce step by step how to build a cloud development application through configuration.

Configuring Application Basic Information​

First, create a cloudbaserc.json configuration file. The content of the file is as follows.

{
  "envId": "{{env.ENV_ID}}",
  "version": "2.0",
  "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  "framework": {
    "name": "techo-show",
    "plugins": {}
  }
}
Key Points​
  1. envId specifies the environment in which the application is deployed. Here, we use the template variable env.ENV_ID to read the ENV_ID environment variable.
  2. framework.name is the English name of the application, supporting only A-Z, a-z, 0-9, -, and _, with a length of 1-32 characters. In this example, we use techo-show as the application name.
  3. framework.plugins contains the plugin information used by the application. This section is initially left empty and will be filled based on the resources and application type below.
  4. To learn more about project information configuration, please refer to the Application Project Information Documentation.

Using the Cloud Function Plugin​

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

Add a field fn under framework.plugins, where the value 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
        }
      ]
    }
  }
}
Key Points​
  1. The name of the fn field can be customized and only serves as an alias; the same applies below.
  2. "use": "@cloudbase/framework-plugin-function" indicates the use of the @cloudbase/framework-plugin-function cloud function plugin for deploying and managing cloud functions.
  3. inputs is used to set the parameters received by the plugin. Here, we specify the function root directory as ./cloudfunctions, with three cloud functions: contact, delete, and inituser, all requiring cloud-based dependency installation.
  4. The Cloud Function plugin also supports configuring http access addresses, runtime languages, scheduled triggers, timeout settings, security rules, and more. For detailed configuration instructions, refer to the Cloud Function Plugin Configuration Documentation.

Use the Database Plugin​

In this step, we need to use the database plugin to automate the creation of database collections and the configuration of security rules.

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

{
  "use": "@cloudbase/framework-plugin-database",
  "inputs": {
    "collections": [
      {
        "collectionName": "mess",
        "aclTag": "READONLY"
      },
      {
        "collectionName": "user",
        "aclTag": "ADMINONLY"
      }
    ]
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-database database plugin
  2. Two database collections are configured within inputs.
  3. The mess collection has read access for all users and write access only for the creator and administrators.
  4. The user collection has read access for all users and write access only for administrators.
  5. The Database plugin also supports configuring indexes, custom security rules, and more. For detailed configuration instructions, refer to the Database Plugin Configuration Documentation.

Using the Static Website Plugin​

In this step, we need to use the static website plugin to automate the deployment of static web pages in the application.

Add a field web under framework.plugins, where the value is a JSON object.

{
  "use": "@cloudbase/framework-plugin-website",
  "inputs": {
    "outputPath": "webview",
    "cloudPath": "/mess",
    "envVariables": {
      "ENV_ID": "{{env.ENV_ID}}"
    }
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-website static website plugin
  2. In inputs, we specify that the local source directory (outputPath) for the static website is the webview directory, which needs to be deployed under the /mess path of the cloud-based static website.
  3. Additionally, we inject the application's environment id ENV_ID into the static website's configuration. This allows pages to retrieve the current deployment environment's id by requesting /cloudbaseenv.json at the root directory of the static website. This approach enables the same codebase to be deployed across different environments without modifications. If using webpack for building, environment variables can also be bundled into the page code.
  4. The Static Website plugin also supports configuring npm dependency installation, custom build commands, files to ignore, and more. For detailed configuration instructions, refer to the Static Website Plugin Configuration Documentation.

Using the Login Authentication Plugin​

In this step, we need to use the login authentication plugin to automate the configuration of login methods for the application.

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

{
  "use": "@cloudbase/framework-plugin-auth",
  "inputs": {
    "configs": [
      {
        "platform": "ANONYMOUS",
        "status": "ENABLE"
      }
    ]
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-auth login authentication plugin
  2. In inputs, we configured to enable anonymous login, which will automatically enable this login method for users.
  3. The Login Authentication plugin also supports configuring other login methods such as unauthenticated access. For detailed configuration instructions, refer to the Login Authentication Plugin Configuration Documentation.

Using the Mini Program Plugin​

In this step, we need to use the Mini Program plugin to automate the building and deployment of Mini Programs.

Add a field mp under framework.plugins, where the value 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
      }
    }
  }
}
Key Points​
  1. Here we use the @cloudbase/framework-plugin-mp Mini Program plugin.
  2. In inputs, we configured the Mini Program's appid and the private key required for deployment. Here, template variables are filled in, which requires user input. Subsequently, we need to obtain these values from the application parameters.
  3. In the inputs configuration, we also defined the deployment mode as preview mode and specified the preview options.
  4. The Mini Program plugin also supports additional configurations during preview and upload. For detailed configuration instructions, refer to the Mini Program Plugin Configuration Documentation

Configuring Application Parameters and Dependencies​

When deploying the application, users may also need to input business parameters, such as their Mini Program APPID and deployment key. We need to declare the required parameters for the application next.

First, we add the following JSON configuration in framework.requirement.

{
  "environment": {
    "WX_APPID": {
      "description": "Please enter the WeChat Mini Program APPID",
      "required": true,
      "default": "",
      "validation": {
        "rule": {
          "type": "RegExp",
          "pattern": "^wx.*",
          "flag": "g"
        },
        "errorMessage": "Must be the APPID of a Mini Program"
      }
    },
    "WX_CI_KEY": {
      "description": "Please enter the BASE64 upload key for the WeChat Mini Program",
      "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 a key in BASE64 format"
      }
    }
  }
}
Key Points​

  1. WX_APPID and WX_CI_KEY are the keys for the environment variables we need to receive. We can reference them within the template using env.WX_APPID, or retrieve these values via environment variables in Cloud Functions and CloudBase.

  2. Each environment variable is described using JSON to specify the field description, whether it is required, default value, and validation rules to verify 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, including persistent file storage, MySQL databases, etc. For details, refer to the Application Dependencies documentation.

Local Deployment Validation​

After configuring the plugin information, we can automatically build and deploy all CloudBase resources required by the application.

Next, we need to create a .env file locally.

ENV_ID=Environment id
WX_APPID=WeChat Mini Program appid
WX_CI_KEY=WeChat Mini Program deployment private key (needs to be converted to base64)

Then run in the command line

tcb framework deploy

All resources included in the application, such as static websites, Mini Programs, databases, cloud functions, login authentication, and more, can be deployed.

The command line displays the web portal URL and the preview QR code for the Mini Program after successful deployment.

image-20210112220441078

Generate Deployment Button​

After local deployment validation, we can upload the code to Git and then generate a one-click deployment button.

Open the one-click deployment button generation URL:

https://docs.cloudbase.net/framework/deploy-button.html

Enter the project's Git URL, configuration file directory, and branch information on the page to generate the following deployment button code snippet.

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

  • Markdown code is suitable for scenarios such as READMEs, blog posts written in Mardkown, and others.

  • HTML code is suitable for scenarios such as Official Accounts, websites/blog posts written in HTML, and others.

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

Summary​

In this article, we explored what cloud development applications are. Using a full-stack application (including frontend pages, backend services, databases, and a Mini Program) for a real-time dashboard as an example, we demonstrated how to quickly build a cloud development application that supports one-click deployment.

Through practical implementation, we have also gained an understanding of CloudBase and the usage of CloudBase Framework. By completing development, configuration, and deployment validation, applications can be quickly transformed into distributable programs. Users can automate application deployment without manually setting up environments or configurations.

Reference Documentation​