Tencent Cloud Nuxt.js component uses Tencent Serverless Framework to implement "zero" configuration, convenient development, and rapid deployment of your webpage application in the Nuxt.js framework based on Tencent Cloud Serverless services (API Gateway, SCF, etc.). The Nuxt.js component supports a rich set of configuration extensions and provides easy-to-use, practical, and cost-effective development/hosting capabilities for webpage application projects.
Features:
Create a root directory and initialize a Nuxt.js project locally:
$ mkdir serverless-nuxtjs && cd serverless-nuxtjs
$ npx create-nuxt-app src
Note:
The Nuxt project in this tutorial is built with JavaScript and the npm installation package. Please select the appropriate options when initializing the project.
Note:
You are recommended to use Node.js 10.0 or above; otherwise, Component v2 may report errors during deployment.
Use npm to install Serverless CLI globally:
$ npm install -g serverless
Create a serverless.yml
file in the project root directory:
$ touch serverless.yml
Configure serverless.yml
as follows:
# serverless.yml
component: nuxtjs # Component name, which is required. `nuxtjs` is used in this example
name: nuxtjsDemo # Instance name, which is required
org: orgDemo # Organization information, which is optional. The default value is the `APPID` of your Tencent Cloud account.
app: appDemo # Nuxt.js application name, which is optional
stage: dev # Information for identifying environment, which is optional. The default value is `dev`
inputs:
src:
src: ./src
exclude:
- .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
- http
- https
environment: release
View more configurations and descriptions >>
Enter the Nuxt.js project directory and construct static resources:
$ cd src && npm run build
Go back to the project root directory where the serverless.yml
file is and run the following command for deployment:
# Enter the project directory `serverless-nuxtjs`
$ sls deploy
serverless ⚡ framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nuxtjsDemo"
region: ap-guangzhou
apigw:
serviceId: service-4v2jx72g
subDomain: service-4v2jx72g-1258834142.gz.apigw.tencentcs.com
environment: release
url: https://xxxxxx.gz.apigw.tencentcs.com/release/
scf:
functionName: nuxtjs_component_mm518kl
runtime: Nodejs10.15
namespace: default
139s › nuxtjsDemo › Success
Note:
If you want to view more information on the deployment process, you can run the
sls deploy --debug
command to view the real-time log information during the deployment process (sls
is an abbreviation for theserverless
command).
After the Nuxt.js application is deployed, the project can be further developed through the debugging feature to create an application for the production environment. After modifying and updating the code locally, you don't need to run the serverless deploy
command every time for repeated deployment. Instead, you can run the serverless dev
command to directly detect and automatically upload changes in the local code.
You can enable debugging by running the serverless dev
command in the directory where the serverless.yml
file is located.serverless dev
also supports real-time outputting of cloud logs. After each deployment, you can access the project to output invocation logs in real time on the command line, which makes it easy for you to view business conditions and troubleshoot issues.
In the directory where the serverless.yml
file is located, run the following command to check the deployment status:
$ serverless info
In the directory where the serverless.yml
file is located, run the following command to remove the deployed API gateway. After removal, this component will delete all related resources created during deployment in the cloud.
$ sls remove
Similar to the deployment process, you can run the sls remove --debug
command to view real-time log information during the removal process (sls
is an abbreviation for the serverless
command).
Currently, you can scan a QR code to log in to the CLI by default. If you want to configure persistent environment variables/key information, you can also create a local .env
file:
$ touch .env # Tencent Cloud configuration information
Configure Tencent Cloud's SecretId
and SecretKey
information in the .env
file and save it:
Note:
- If you don't have a Tencent Cloud account yet, please sign up first.
- If you already have a Tencent Cloud account, you can get
SecretId
andSecretKey
in API Key Management.
# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
Note:
When logging in with an IP outside Mainland China, you need to add
SERVERLESS_PLATFORM_VENDOR=tencent
in the.env
file to makesls
use thetencent
component by default.
You can view more component information in the repository of Serverless Components.
Why is an entry file no longer needed?
In the previous version, to use this component, you need to add an sls.js
file in the project root directory. In the current version, this is taken care of by the component, so you do not need to deal with it separately. For more information, please see the GitHub documentation.
Was this page helpful?