tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Serverless Application Center
    Documentation
    Download PDF

    Deploying Full-Stack Website with Vue + Express + PostgreSQL

    Last updated: 2024-12-02 11:16:20
    Download PDF

      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
      2. 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.
      3. 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.

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy