Cloud Development Deploy Nuxt .js projects

The first thing I learned about Noxt was that it felt really fragrant after using it under the vue SSR. Y ou can save the time for routing, and Nuxt.js reads all the .vue files in the directory and automatically generates the corresponding routing configuration, further encapsulates Vuex, and so on. H ere's how to deploy Noxt to static hosting?

Tencent CloudBase (TCB) is an all-in-one back-end cloud service with a serverless architecture that eliminates the hassle of server build and operation in mobile application building. At the same time, cloud development provides static hosting, command-line tools (CLI), Flutter SDK and other capabilities greatly reduce the threshold for application development.

Environmental requirements

• node.js

Tool preparation

• Nuxt scaffolding: create-nuxt-app

• Cloud development command tool: cloudbase/cli

Installation

Install noxt scaffolding

npm i create-nuxt-app

Install the cloud development command tool CLI

npm i -g @cloudbase/cli

To test whether the cloudbase/cli was successfully installed, you can use the cloudbase or tcb command

cloudbase -v

Or

tcb -v

Create a Noxt project

npx create-nuxt-app demo

Immediately after entering the project directory (here is demo)

1. The npm run npm run generate file under the command line

1. A dist folder is generated in the project directory. The files under this folder are the static files that are generated

Host Nuxt static sites to cloud development

First we turn on cloud development

Choose or create your own cloud development environment

Note here that the selection is a metered model (static site hosting can only be opened on a metered bill).

The environment is automatically initialized after successful creation (this process takes approximately 2 to 3 minutes).

After the initialization was successful, we went into the corresponding environment to find static site hosting and started using it

Wait for the static website service to be initialized before you can use it

Next we can transfer the static site of noxt to the static site hosting of cloud development.

The login command is executed first

tcb login

Authorize on the pop-up page

Next, deploy static sites to cloud development static site hosting

Here we deploy all the files under the dist folder to static site hosting to execute commands

tcb hosting:deploy folder -e cloud environment ID

The folder here is where all the files under this folder are deployed to the root of the cloud development, and the cloud environment ID can be viewed under the environment ID

Because we want to deploy all the files under dist, the command above can be written

tcb hosting:deploy ./dist -e demo-1cdbae

After the successful upload, we will find that there are many more files in the static site hosting

So how do we browse?

Cloud development provides a default domain name corresponding to the environment that can be accessed through this default domain name.

So our Noxt is deployed successfully

However, the default domain name has a limit down speed of 10KB/S, and if used formally, you need to add a domain name that has already been filed

and add dns resolution to it

If you can ping through this CNAME can be accessed using their own domain name