Overview

This document describes how to quickly deploy a local Nuxt.js SSR project to the cloud through a web function.

Note：

This document mainly describes how to deploy in the console. You can also complete the deployment on the command line. For more information, please see Deploying Framework on Command Line.

Prerequisites

Before using SCF, you need to sign up for a Tencent Cloud account and complete identity verification first.

Directions

Template deployment - quick deployment of Nuxt.js project

1. Log in to the SCF console and click Function Service on the left sidebar.
2. Select the region where to create a function at the top of the page and click Create to enter the function creation process.
3. Select Template for Creation Method, enter webfunc in the search box to filter function templates, select Nuxt.js Framework Template, and click Next as shown below:
   
4. On the Configuration page, you can view and modify the specific configuration information of the template project.
5. Click Complete. After creating the web function, you can view its basic information on the Function Management page.
6. You can access the deployed Nuxt.js project at the access path URL generated by API Gateway. Click Trigger Management on the left to view the access path as shown below:
   
7. Click the access path URL to access the Nuxt.js project.

   Note：

   As the Nuxt.js framework needs to be rebuilt before each deployment, please be sure to update the code locally and run build again before deploying.

Custom deployment - quick migration of local project to cloud

Prerequisites

The Node.js runtime environment has been installed locally.

Local development

1. Refer to Installation to install and initialize your Nuxt.js project:

   npx create-nuxt-app nuxt-app
   

2. In the root directory, run the following command to directly start the service locally.

   cd nuxt-app && npm run dev
   

3. Visit http://localhost:3000 in a browser, and you can access the sample Nuxt.js project locally.

Deployment in cloud

Next, perform the following steps to make simple modifications to the initialized project, so that it can be quickly deployed through a web function. The project transformation here is usually divided into the following two steps:

• Add the scf_bootstrap bootstrap file.
• Change the listening address and port to 0.0.0.0:9000.

The specific steps are as follows:

1. Create the scf_bootstrap bootstrap file in the project root directory and add the following content to it (which is used to start services and specify the bootstrap port):
   #!/var/lang/node12/bin/node
   require("@nuxt/cli")
       .run(["start", "--port", "9000", "--hostname", "0.0.0.0"])
       .catch(error => {
       require("consola").fatal(error);
       require("exit")(2);
       });

   Note

   • Here is only a sample bootstrap file. Please adjust the specific operations according to your actual business scenario.
   • The sample uses the standard node environment path of SCF. When debugging locally, you need to change it to your local path.

2. After the creation is completed, you need to run the following command to modify the executable permission of the file. By default, the permission 777 or 755 is required for it to start normally. Below is the sample code:
   chmod 777 scf_bootstrap

3. Log in to the SCF console and click Function Service on the left sidebar.
4. Select the region where to create a function at the top of the page and click Create to enter the function creation process.
5. Select Custom Creation for Creation Method and configure the options as prompted as shown below:
   
   • Function Type: select Web function.
   • Function Name: enter the name of your function.
   • Region: enter your function deployment region, which is Guangzhou by default.
   • Runtime Environment: select Nodejs 12.16.
   • Deployment Method: select Code deployment and upload your local project.
   • Submitting Method: select Local folder.
   • Function Code: select the specific local folder where the function code is.
6. Click Complete.

   Note：

   When you access the URL, the access may fail due to frontend routing. Therefore, you need to remove the /release path when accessing.

Development management

After the deployment is completed, you can quickly access and test your web service in the SCF console and try out various features of SCF, such as layer binding and log management. In this way, you can enjoy the advantages of low cost and flexible scaling brought by the serverless architecture: