Overview

This template can quickly deploy a full-stack serverless application based on Vue + Express + PostgreSQL. It mainly contains the following components:

• Serverless RESTful API: you can use the Express framework constructed by SCF and API Gateway to implement
  RESTful API.
• Serverless static website: the frontend hosts Vue.js static pages in COS.
• PostgreSQL Serverless: you can create a PostgreSQL database to provide database services for the full-stack website.
• VPC: you can create a VPC and subnet for communications between the SCF function and the database.

Prerequisites

• Node.js has been installed (starting from September 1, 2020, Serverless components no longer support Node.js versions below 10.0. Please upgrade if needed).
• The account has been configured with the QcloudPostgreSQLFullAccess policy. For the configuration method, please see Account and Permission Configuration.

Directions

Installation

Use npm to install Serverless Framework globally:

npm install -g serverless

If you have already installed Serverless Framework, you can run the following command to upgrade it to the latest version:

npm update -g serverless

After the installation is completed, run the serverless -v command to view the version information of Serverless Framework and make sure that the version information is as follows or displays higher versions. The returned result is as shown below:

$ serverless –v
Framework Core: 1.74.1 (standalone)
Plugin: 3.6.14
SDK: 2.3.1
Components: 2.31.6

Configuration

1. Create a local folder and run the serverless init command to download the relevant template.

   serverless init fullstack

2. Create a .env file in the project root directory and configure the corresponding Tencent Cloud SecretId, SecretKey, region, and AZ information in it.

   # .env
   TENCENT_SECRET_ID=xxx  // `SecretId` of your account
   TENCENT_SECRET_KEY=xxx // `SecretKey` of your account
   # Region and AZ configuration
   REGION=ap-guangzhou // Resource deployment region, which refers to the region where the function and static webpage are deployed
   ZONE=ap-guangzhou-2 // Resource deployment AZ, which refers to the AZ where the database is deployed

   Note：

   • If you don't have a Tencent Cloud account yet, please sign up first.
   • If you already have a Tencent Cloud account, please make sure that your account has been granted the AdministratorAccess permission. In addition, you can get SecretId and SecretKey in API Key Management.
   • ZONE currently can only be ap-beijing-3, ap-guangzhou-2, or ap-shanghai-2.

3. Install the required dependencies by running the following command:

   npm run bootstrap

Deployment

1. Deploy by running sls deploy --all. The returned information is as follows:

   $ sls deploy --all
   serverless ⚡ framework
   serverlessVpc:
   region:     ap-guangzhou
   zone:       ap-guangzhou-2
   vpcId:      vpc-xxx
   vpcName:    serverless
   subnetId:   subnet-xxx
   subnetName: serverless
   fullstackDB:
   region:         ap-guangzhou
   zone:           ap-guangzhou-2
   vpcConfig:
    subnetId: subnet-100000
    vpcId:    vpc-1000000
   dBInstanceName: fullstackDB
   dBInstanceId:   postgres-100000
   private:
    connectionString: postgresql://tencentdb_100000xxxxxxxxxxxxx@172.16.250.15:5432/tencentdb_1000000
    host:             172.16.250.15
    port:             5432
    user:             tencentdb_100000
    password:         xxxxxxxx
    dbname:           tencentdb_100000
   fullstack-api:
   region: ap-guangzhou
   apigw:
    serviceId:   service-100000
    subDomain:   service-100000-123456789.gz.apigw.tencentcs.com
    environment: release
    url:         https://service-100000-123456789.gz.apigw.tencentcs.com/release/
   scf:
    functionName: fullstack-api
    runtime:      Nodejs10.15
    namespace:    default
   fullstack-frontend:
   website: https://fullstack-serverless-db-123456789.cos-website.ap-guangzhou.myqcloud.com
   50s › tencent-fullstack › Success 

   After the deployment succeeds, you can use a browser to access the website link generated by the project to view the generated website.

   Note：

   The function in this project cannot directly access the public network due to VPC. If you need public network access, please see Network Configuration Management.

2. Run npm run info to view the deployment information, which includes vpc, db, api, and frontend (frontend website) for this project. The returned information is as follows:

   $ npm run info
   > tencent-fullstack@1.1.0 info /root/tencent-fullstack
   > npm run info:vpc && npm run info:db && npm run info:api && npm run info:frontend
   > tencent-fullstack@1.1.0 info:vpc /Users/yugasun/Desktop/Develop/@yugasun/tencent-fullstack
   > sls info --target=./vpc
   serverless ⚡ framework
   Status:       active
   Last Action:  deploy (5 minutes ago)
   Deployments:  1
   region:     ap-guangzhou
   zone:       ap-guangzhou-2
   vpcId:      vpc-xxx
   vpcName:    serverless
   subnetId:   subnet-xxx
   subnetName: serverless
   serverlessVpc › Info successfully loaded
   > tencent-fullstack@1.1.0 info:db /root/tencent-fullstack
   > sls info --target=./db
   serverless ⚡ framework
   Status:       active
   Last Action:  deploy (3 minutes ago)
   Deployments:  18
   region:         ap-guangzhou
   zone:           ap-guangzhou-2
   vpcConfig:
   subnetId: subnet-100000
   vpcId:    vpc-1000000
   dBInstanceName: fullstackDB
   dBInstanceId:   postgres-100000
   private:
   connectionString: postgresql://tencentdb_100000xxxxxxxxxxxxxxxxxxx@172.16.250.15:5432/tencentdb_100000
   host:             172.16.250.15
   port:             5432
   user:             tencentdb_1000000
   password:         xxxxxxxxx
   dbname:           tencentdb_1000000
   fullstackDB › Info successfully loaded
   > tencent-fullstack@1.1.0 info:api /root/tencent-fullstack
   > sls info --target=./api
   serverless ⚡ framework
   Status:       active
   Last Action:  deploy (2 minutes ago)
   Deployments:  10
   region: ap-guangzhou
   apigw:
   serviceId:   service-1000000
   subDomain:   service-1000000-123456789.gz.apigw.tencentcs.com
   environment: release
   url:         https://service-1000000-123456789.gz.apigw.tencentcs.com/release/
   scf:
   functionName: fullstack-api
   runtime:      Nodejs10.15
   namespace:    default
   fullstack-api › Info successfully loaded
   > tencent-fullstack@1.1.0 info:frontend /root/tencent-fullstack
   > sls info --target=./frontend
   serverless ⚡ framework
   Status:       active
   Last Action:  deploy (2 minutes ago)
   Deployments:  9
   website: https://fullstack-serverless-db-123456789.cos-website.ap-guangzhou.myqcloud.com
   fullstack-frontend › Info successfully loaded

3. You can run sls remove --all to remove the project. The returned information is as follows:

   $  sls remove --all
   serverless ⚡ framework
   38s › tencent-fullstack › Success