I first learned about Nuxt under VUE SSR, and I felt really fragrant after using it. Nuxt.js will read all.vue files in this directory and automatically generate the corresponding route configuration, further encapsulate Vuex, and so on. How do YOU deploy Nuxt to static hosting?

Cloud Development (TCB) is a cloud integrated back-end cloud service with serverless architecture, which eliminates the tedious server construction, operation and maintenance in mobile application construction. The static hosting, command-line tools (CLI), and Flutter SDK capabilities provided by Cloud development greatly reduce the barrier to application development.

Environmental requirements

  • node.js

Tools to prepare

  • Nuxt scaffolding: create-NUxT-app
  • Cloud development command tool: @cloudbase/ CLI

The installation

Install Nuxt scaffolding

npm i create-nuxt-app
Copy the code

Install the CLOUD development command tool CLI

npm i -g @cloudbase/cli
Copy the code

To test whether cloudBase/CLI is successfully installed, run the cloudbase or TCB command

cloudbase -v
Copy the code

or

tcb -v
Copy the code

Create the Nuxt project

npx create-nuxt-app demo
Copy the code

Then go to the project directory (demo in this case)

  1. Execute on the command linenpm run generateGenerate static HTML files
  2. A dist folder is generated in the project directory. The files in this folder are the generated static files

Nuxt static web hosting to cloud development

First we turn on cloud development

Choose or create your own cloud development environment

Pay attention to choose the pay-per-view mode (only pay-per-view can open static web hosting).

The system automatically initializes the environment (this process takes about 2 to 3 minutes).

After successful initialization, we go to the corresponding environment to find static web hosting and start using it

Wait until the static web service is initialized

Next we can upload nuxT’s static web site to the cloud development static web hosting.

First, execute the login command

tcb login
Copy the code

Grant authorization on the page that is displayed

Next, the static web site is deployed to the cloud to develop static web hosting

Here we deploy all the files in the dist folder into static web hosting and execute the command

TCB hosting:deploy folder -e Cloud environment IDCopy the code

All files in this folder are deployed to the root directory of cloud development. The cloud environment ID can be viewed under the environment ID

Since we want to deploy all the files under DIST, we can write the above command

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

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

So how do we browse?

By default, cloud development provides a default domain name corresponding to the environment, which can be accessed through the default domain name.

At this point our Nuxt has been deployed successfully

However, the default domain name has a downlink speed limit of 10KB/S. To use the domain name formally, you need to add a registered domain name

And add DNS resolution for it

If you can ping this CNAME, you can use your own domain name to access

Public account: Tencent Yunyun Development

Tencent Cloud development: Cloudbase.net

The development of cloud console: console.cloud.tencent.com/tcb?from=12…

Win more wonderful scan QR code to learn more