tencent cloud

Feedback

Deploying Full-Stack Website with Vue + Express + PostgreSQL

Last updated: 2022-06-13 15:10:22

    Overview

    This document introduces how to use a template to quickly deploy a full-stack serverless application based on Vue, Express, and PostgreSQL. The template mainly contains the following components:

    • Serverless RESTful API: You can use the Express framework constructed by SCF and API Gateway to implement
      RESTful APIs.
    • Serverless static website: The frontend hosts the 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 to enable the interconnection between the SCF and database networks.

    Prerequisites

    • Node.js has been installed (starting from September 1, 2020, SLS no longer supports Node.js versions below 10.0. Please upgrade if needed).
    • The QcloudPostgreSQLFullAccess policy has been configured for your account. For the configuration method, 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. Versions earlier than those listed below are not allowed.

    $ 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 related template.
      serverless init fullstack
      
    1. In the root directory of the project, create an .env file and configure the corresponding Tencent Cloud SecretId, SecretKey, region, and availability zone (AZ) information in the file.

      # .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, that is, the region for deploying SCF and static pages in this project
      ZONE=ap-guangzhou-2 // Resource deployment AZ, that is, the AZ for deploying DBs in this project
      
      Note:

      • If you don't have a Tencent Cloud account yet, please sign up first.
      • If you already have a Tencent Cloud account, ensure that your account is authorized with 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.
    2. Run the following command to install required dependencies:

      npm run bootstrap
      

    Deployment

    1. Run the sls deploy --all command to start deployment. 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 successful deployment, you can use a browser to access the website link generated by the project and see the generated website.

      Note:

      In this project, SCF is in a VPC and therefore cannot directly access a public network. To enable it to access a public network, configure the SCF network.

    2. 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
      
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support