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)
- Execute on the command line
npm run generate
Generate static HTML files - 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