Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serverless-components/tencent-nuxtjs
Tencent Cloud Nuxt.js Serverless Component
https://github.com/serverless-components/tencent-nuxtjs
Last synced: 3 months ago
JSON representation
Tencent Cloud Nuxt.js Serverless Component
- Host: GitHub
- URL: https://github.com/serverless-components/tencent-nuxtjs
- Owner: serverless-components
- License: mit
- Created: 2020-03-01T03:00:19.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-10T08:54:03.000Z (almost 3 years ago)
- Last Synced: 2024-10-31T16:37:34.684Z (4 months ago)
- Language: JavaScript
- Size: 186 KB
- Stars: 13
- Watchers: 9
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-serverless-framework - @serverless/tencent-nuxtjs - (组件)
README
⚠️⚠️⚠️ 所有框架组件项目迁移到 [tencent-framework-components](https://github.com/serverless-components/tencent-framework-components).
[](http://serverless.com)
# 腾讯云 Nuxt.js Serverless Component
## 简介
**腾讯云[Nuxt.js](https://github.com/nuxt/nuxt.js)组件** - 通过使用[**Tencent Serverless Framework**](https://github.com/serverless/components/tree/cloud) , 基于云上 Serverless 服务（如 API 网关、云函数等），实现“0”配置，便捷开发，极速部署采用 Nuxt.js 框架的网页应用，Nuxt.js 组件支持丰富的配置扩展，提供了目前便捷实用，开发成本低的网页应用项目的开发/托管能力。
特性介绍：
- [x] **按需付费** - 按照请求的使用量进行收费，没有请求时无需付费
- [x] **"0"配置** - 只需要关心项目代码，之后部署即可，Serverless Framework 会搞定所有配置。
- [x] **极速部署** - 部署速度快，仅需几秒，部署你的整个应用。
- [x] **实时日志** - 通过实时日志的输出查看业务状态，便于直接在云端开发应用。
- [x] **云端调试** - 可在云端直接进行项目调试，从而避免本地环境的差异。
- [x] **便捷协作** - 通过云端控制台的状态信息和部署日志，方便进行多人协作开发。
## 快速开始
0. [**准备**](#0-准备)
1. [**安装**](#1-安装)
1. [**配置**](#2-配置)
1. [**部署**](#3-部署)
1. [**开发调试**](#4-开发调试)
1. [**查看状态**](#5-查看部署状态)
1. [**移除**](#6-移除)
更多资源：
- [**账号配置**](#账号配置)
- [**更多组件**](#更多组件)
- [**FAQ**](#FAQ)
### 1. 安装
通过 npm 全局安装 [serverless cli](https://github.com/serverless/serverless)
```bash
$ npm install -g serverless
```
### 2. 创建
通过如下命令和模板链接，快速创建一个 nuxtjs 应用：
```bash
$ serverless init nuxtjs-starter --name example
$ cd example
```
### 3. 部署
在 `serverless.yml` 文件所在的项目根目录，运行以下指令，将会弹出二维码，直接扫码授权进行部署：
```
serverless deploy
```
> **说明**：如果鉴权失败，请参考 [权限配置](https://cloud.tencent.com/document/product/1154/43006) 进行授权。
### 4. 配置
nuxtjs 组件支持 0 配置部署，也就是可以直接通过配置文件中的默认值进行部署。但你依然可以修改更多可选配置来进一步开发该 nuxtjs 项目。
以下是 nuxtjs 组件的 `serverless.yml`配置示例：
```yml
# serverless.yml
component: nuxtjs # (必填) 组件名称，此处为nuxtjs
name: nuxtjsDemo # (必填) 实例名称
org: orgDemo # (可选) 用于记录组织信息，默认值为您的腾讯云账户 appid
app: appDemo # (可选) 该 nuxt.js 项目名称
stage: dev # (可选) 用于区分环境信息，默认值是 dev
inputs:
src:
src: ./
exclude:
- .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
- http
- https
environment: release
```
- 点此查看[更多配置及说明](https://github.com/serverless-components/tencent-nuxtjs/tree/master/docs/configure.md)
### 4. 开发调试
部署了 Nuxt.js 应用后，可以通过开发调试能力对该项目进行二次开发，从而开发一个生产应用。在本地修改和更新代码后，不需要每次都运行 `serverless deploy` 命令来反复部署。你可以直接通过 `serverless dev` 命令对本地代码的改动进行检测和自动上传。
可以通过在 `serverless.yml`文件所在的目录下运行 `serverless dev` 命令开启开发调试能力。
`serverless dev` 同时支持实时输出云端日志，每次部署完毕后，对项目进行访问，即可在命令行中实时输出调用日志，便于查看业务情况和排障。
### 5. 查看部署状态
在`serverless.yml`文件所在的目录下，通过如下命令查看部署状态：
```
$ serverless info
```
### 6. 移除
在`serverless.yml`文件所在的目录下，通过以下命令移除部署通过以下命令移除部署的 API 网关，移除后该组件会对应删除云上部署时所创建的所有相关资源。
```bash
$ serverless remove
```
和部署类似，支持通过 `serverless remove --debug` 命令查看移除过程中的实时日志信息，`serverless`是 `serverless` 命令的缩写。
### 账号配置
当前默认支持 CLI 扫描二维码登录，如您希望配置持久的环境变量/秘钥信息，也可以本地创建 `.env` 文件
```bash
$ touch .env # 腾讯云的配置信息
```
在 `.env` 文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存
如果没有腾讯云账号，可以在此 [注册新账号](https://cloud.tencent.com/register)。
如果已有腾讯云账号，可以在 [API 密钥管理](https://console.cloud.tencent.com/cam/capi) 中获取 `SecretId` 和`SecretKey`.
```text
# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
```
> 注意：海外 ip 登录时，需要在`.env`文件中添加`SERVERLESS_PLATFORM_VENDOR=tencent` ，使 serverless 默认使用 tencent 组件
## 更多组件
可以在 [Serverless Components](https://github.com/serverless/components) repo 中查询更多组件的信息。
## 项目迁移
如果项目使用了自定义 Node.js 服务，比如 express 或者 koa，你需要做如下改造工作。
### 自定义 express 服务
如果你的 Nuxt.js 项目本身运行就是基于 `express` 自定义服务的，那么你需要在项目中自定义入口文件 `sls.js`，需要参考你的服务启动文件进行修改，以下是一个模板文件：
```js
const express = require('express')
const { loadNuxt } = require('nuxt')
async function createServer() {
// not report route for custom monitor
const noReportRoutes = ['/_nuxt', '/static', '/favicon.ico']
const server = express()
const nuxt = await loadNuxt('start')
server.all('*', (req, res, next) => {
noReportRoutes.forEach((route) => {
if (req.path.indexOf(route) === 0) {
req.__SLS_NO_REPORT__ = true
}
})
return nuxt.render(req, res, next)
})
// define binary type for response
// if includes, will return base64 encoded, very useful for images
server.binaryTypes = ['*/*']
return server
}
module.exports = createServer
```
### 自定义 koa 服务
如果你的项目使用的是 Koa 作为 Node.js 服务，需要在项目中自定义入口文件 `sls.js`，需要参考你的服务启动文件进行修改，以下是一个模板文件：
```js
const Koa = require('koa')
const { loadNuxt } = require('nuxt')
async function createServer() {
const server = new Koa()
const nuxt = await loadNuxt('start')
server.use((ctx) => {
ctx.status = 200
ctx.respond = false
ctx.req.ctx = ctx
nuxt.render(ctx.req, ctx.res)
})
// define binary type for response
// if includes, will return base64 encoded, very useful for images
server.binaryTypes = ['*/*']
return server
}
module.exports = createServer
```
## 自定义监控
> **目前仅支持自定义 `Express` 服务的项目**
当在部署 Nuxt.js 应用时，如果 `serverless.yml` 中未指定 `role`，默认会尝试绑定 `QCS_SCFExcuteRole`，并且开启自定义监控，帮助用户收集应用监控指标。对于为自定义入口文件的项目，会默认上报除含有 `/_nuxt`、`/static` 和 `/favicon.ico` 的路由。如果你想自定义上报自己的路由性能，那么可以自定义 `sls.js` 入口文件，对于无需上报的路由，在 express 服务的 `req` 对象上添加 `__SLS_NO_REPORT__` 属性值为 `true` 即可。比如：
```js
server.get('/no-report', (req, res, next) => {
req.__SLS_NO_REPORT__ = true
return nuxt.render(req, res, next)
})
```
那么用户在访问 `GET /no-report` 路由时，就不会上报自定义监控指标。
## 文件上传
[文件上传教程](https://github.com/serverless-components/tencent-nuxtjs/tree/master/docs/upload.md)
## License
MIT License
Copyright (c) 2020 Tencent Cloud, Inc.