Quick Deployment of a Full-stack Application (vue.js + express.js)

Last updated: 2020-02-25 14:32:59

    Operation scene

    The full-stack component (Vue.js+Express.js) is used to deploy Serverless full-stack applications over multiple Serverless Components. It can help developers deploy Serverless applications more easily and quickly, such as using scenarios such as the combination of back-end API and front-end Vue.js.

    This project is based entirely on Tencent Cloud Serverless server, which can greatly reduce the cost of use. If you are looking for a low-cost, convenient and lightweight Serverless services management framework, full-stack components (Vue.js+Express.js) will be a good choice.

    The Template includes:

    • Serverless Express.js backend Related capabilities are provided by Tencent Cloud Servelress Cloud Function (Cloud function SCF) and Tencent Cloud API Gateway, and support the express.js framework to help developers build their own projects and routes.
    • Serverless Vue.js front end Related storage capacity is provided by Tencent Cloud Cloud Object Storage (Cloud Object Storage COS), which is passed to the front end through the back-end API and rendered using Vue.js.

    The architecture of the full-stack Web application is as follows:
    Architecture Diagram

    Operation step


    1. Install with the following command Serverless Framework :
    $ npm i -g serverless
    1. Create a local folder, using the create --template-url To install the relevant template. You can also download the file directly to your local location:
    serverless create --template-url https://github.com/serverless/components/tree/master/templates/tencent-fullstack-vue-application

    Use cd Command, enter templates\tencent-fullstack-application Folder, you can view the structure of Directory as follows:

    |- api
    |- dashboard
    |- serverless.yml      # Use the yml file in the project

    Respectively in dashboard and api Two files Directory performs the installation of NPM dependencies, as shown in the following command:

    $ cd dashboard
    $ npm i
    $ cd api
    $ npm i


    Back to tencent-fullstack-application Directory under, directly through serverless Command to deploy the application:

    $ serverless

    If you want to see the deployment details, you can use the debug mode command serverless --debug To deploy.

    If your account number is not Login or Sign in Tencent Cloud, you can log in and register with authorization directly through Wechat scanning the QR code on the command line.

    After the deployment is successful, you can directly view the effect of the full-stack Web App in the dashboard url address returned in Access's log in the browser:

        url: https://jcwm1l-myappid.cos-website.ap-guangzhou.myqcloud.com
          apiUrl: https://service-id-myappid.gz.apigw.tencentcs.com/release/
        region:              undefined
        functionName:        tencent-fullstack-api
        apiGatewayServiceId: service-id
        url:                 https://service-id-myappid.gz.apigw.tencentcs.com/release/
      15s » dashboard » done



    1. After the first deployment is successful, you can also use the following command to run the service locally and communicate with the backend Tencent Cloud service:
    $ cd dashboard && npm run start
    1. Currently, third-party npm sources such as Taobao are not supported, such as error reports. Component "@serverless/tencent-express" was not found on NPM nor could it be resolved locally. Please set up and use the npm official source experience:
    $ npm config rm registry
    $ npm set registry https://registry.npmjs.org/
    1. Tencent Cloud Component supports one-click login with QR code. If you want to log in by configuring a key, you can also refer to the following steps:
      In tencent-fullstack-application Folder root created by Directory .env File:
    $ touch .env # Tencent Cloud's configuration information

    In .env Configure Tencent Cloud's SecretId and SecretKey information in the file and save:

    # .env

    Was this page helpful?

    Was this page helpful?

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