Deploying Full-Stack Website with Vue + Express + PostgreSQL

Last updated: 2020-08-28 09:28:01

    Operation Scenarios

    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

    • You have installed Node.js (v8.6 or above; v10.0 or above is recommended).
    • 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
    1. Find the .env.example file in the project template, rename it to .env, 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.
        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.
    1. 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.

    1. 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
    
    1. 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

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help