In the past, we deployed Nuxt to the server, which required PM2 process management, as well as a series of operation and maintenance issues such as server performance, load balancing and network security. Often what we do is not optimal, so why don’t we hand it over to the professional operations people to configure?

We only care about the application layer of business logic, to care about the user interaction experience, this is what we should do ~

So, cloud development is coming!! It can perfectly help us solve the above problems, improve our development efficiency, and focus all our energy on business logic and user interaction.

Next, let’s look at how to run nuxt. js SSR in cloud development ~

Development environment requirements

Node. Js environment

Both nuxt.js and cloud functions are based on Node.js, so Node.js is an essential underlying dependency.

create-nuxt-app

We will use create-Nuxt-app to create a NuxT project, so it will also need to be installed in advance

Installation command:

npm i create-nuxt-app -g
Copy the code

@cloudbase/cli

The CLOUD development Cli is used to quickly and conveniently deploy projects and manage cloud development resources.

Installation command:

npm i @cloudbase/cli -g
Copy the code

Build a cloud development project

First login authorization TCB login, in the pop-up window for authorization 👇

Create a cloud environment 👇

In the popup window new, we select charge by volume and turn on the free resources TAB

Note: Each account can only create one cloud environment that opens free resources

After clicking Open now, the cloud environment will be initialized automatically. (This process lasts about 2-3 minutes.) Just wait

After we complete the initialization, use the command TCB init to select the cloud environment for association

$TCB init √ Select Associated Environment · NUxT - [NUxT-1A3208: empty] √ Please enter project name · nuxtSSR √ Select development language · Node √ Select cloud development template · Hello World √ Create project nuxtSSR Success!Copy the code

After creating the cloud environment, run the TCB env:list command to view the cloud environment information and copy the cloud environment ID ~

It then goes to the cloud development project directory, NUxT

The directory structure is 👇

. ├ ─ ─functions├─ ├─ ├─ ├─ // Project Config ├─ readme.md // ├─.editorConfig ├─.├ ─Copy the code

Change envID to your cloud environment ID in CloudBaserc.js

We go to Functions to create a new cloud function. In the Functions folder, each folder is a cloud function.

cd functions
Copy the code

Next we will build the NUxT project under functions

Build the Nuxt project

Create a project

npx create-nuxt-app nuxt
Copy the code

NPM is automatically installed when node is installed and NPX is automatically added after NPM5.2.0, so this command does not need to be installed separately

$NPX create-nuxt-app nuxt create-nuxt-app v2.15.0 ✨ Generating nuxt.js projectin nuxt
? Project name nuxt # Project name
? Project description My badass Nuxt.js project # Project description
? Author name dxd   # Author's name
? Choose programming language JavaScript We chose JavaScript
? Choose the package manager Npm  # Select package management tool We choose NPM
? Choose UI framework None Because I will not use it in this demo, I will select None
? Choose custom server framework None (Recommended) # Server framework, ditto
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) # Select modules
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)  # Select the JS inspection tool
? Choose test framework None # Select the test framework
? Choose rendering mode Universal (SSR) Select Universal to enable SSR server rendering
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
Copy the code

Created successfully 👇

Here we create a new cloud function called nuxt ~

So where is the entry file for this function?

We need to create a new index.js entry file for it.

And write in there

//index.js
const {Nuxt} = require('nuxt')
const serverless = require('serverless-http')
let config = require('./nuxt.config.js') const nuxt = new Nuxt(config) exports.main = async (... args) => { console.log(config.dev) await nuxt.ready();returnserverless((req,res) => { nuxt.render(req,res) })(... args) }Copy the code

In the above code, we use serverless-HTTP

Therefore, we need to install it ~

The installation command is as follows:

npm i serverless-http --save
Copy the code

Configuration items

We added dev:false to nuxt.config.js

Otherwise, the following error message 👇~ is displayed after the cloud function is deployed

{
"errorCode": 1,"errorMessage":"user code exception caught"."stackTrace":"EROFS: read-only file system, rmdir '/var/user/.nuxt'\n
Error: EROFS: read-only file system, rmdir '/var/user/.nuxt'"
}
Copy the code

Packaging project

We package NPM run Build in the NuxT project (functions/nuxt) to generate the.nuxt folder

After the package is complete, go back to the cloud development root directory and run the TCB functions:deploy nuxt command to upload the file

$ tcb functions:deploy nuxt ? Yes √ [nux] The cloud function is successfully deployed!Copy the code

Then we need to create a new HTTP connection for the cloud function TCB service:create -f nuxt -p /nuxt

$ tcb service:create -fNuxt -p /nuxt √ HTTP Service created successfully! Click access > https://xxxx.service.tcloudbase.com/nuxtCopy the code

Click on the link returned above to see the page we deployed ~👇

Edge case processing

If an error timeout is reported like 👇~

{"errorCode":-1,"errorMessage":"Task timed out after 3 seconds"}
Copy the code

We can extend the timeout a little bit (default timeout is 3s)

Select the corresponding cloud function and click Edit in the function configuration to modify the timeout period of the function

Finally, let’s conclude

NuxtSSR is deployed in three steps

  1. Build the cloud development project for subsequent deployments
  2. Build and configure the NUXT project in the cloud function
  3. Deploy the cloud function and create a new HTTP connection for it so that specific connections can be accessed

Cloud development official account: Tencent Yunyun Development

Cloud development technical document: Cloudbase.net

Cloud development technology exchange plus Q group: 601134960

Win more wonderful scan QR code to learn more