Skip to content
Chen

Command Palette

Search for a command to run...

腾讯云托管部署 Nuxt 3 架构网站blog使用 CloudBase 云托管和云数据库搭建一个基于 Nuxt 3 的 SSR 网站

本网站就是基于 腾讯云开发 CloudBase 和 Nuxt 3 开发。借助腾讯云开发的云数据库和云函数，可以在较低成本的情况下持续运行。并实现 CMS 后台管理和 App 后端接口等以往我使用 Spring 实现的功能。

开发环境

  • Node JS v16.13.0
  • Nuxt 3
  • Vue 3

安装

腾讯云开发提供了 SDK 可以让我们在 Web 端（如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 Cloudbase 服务和资源。

1#npm
2npm install @cloudbase/js-sdk -D
3# yarn
4yarn add @cloudbase/js-sdk

配置

Nuxt 3 使用了 Native ES Modules 为了使 @cloudbase/js-sdk 可以正常在 Nuxt 3 下进行使用，我们需要手动指定使用 CommonJS 的版本。

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt3'
3
4// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
5export default defineNuxtConfig({
6    alias: {
7        '@cloudbase/js-sdk': '@cloudbase/js-sdk/dist/index.cjs.js'
8    }
9})

插件

在 Nuxt 3 中，在 plugins 目录下的插件可以被自动加载，并且可以使用 *.server.ts 和 *.client.ts 后缀分别让服务端和客户端执行不同的内容。利用该特性，我们在 Nuxt 3 中初始化 CloudBase 并且添加实例到 nuxtApp 中。

1// plugins/cloudbase.client.ts
2import { defineNuxtPlugin } from '#app'
3
4import cloudbase from '@cloudbase/js-sdk'
5
6export default defineNuxtPlugin(nuxtApp => {
7    nuxtApp.provide('cloudbase', cloudbase.init({
8        env: 'env-id'
9    }))
10})
11
12declare module '#app' {
13    interface NuxtApp {
14        $cloudbase: cloudbase.app.App
15    }
16}

由于 JS SDK 默认情况下依赖部分浏览器环境的内容，所以要想让 JS SDK 可以在服务端使用，我们需要使用 Node JS Adapter 使其兼容 Node 环境。这里我们需要使用安装这个适配器。

1# npm
2npm install cloudbase-adapter-node -D
3# yarn
4yarn add cloudbase-adapter-node

安装完成后，我们还有一个步骤需要配置。由于腾讯云开发的限制，在终端应用(如APP、小程序等)中使用云开发的身份验证服务，您需要将授权的应用加入白名单，并在SDK使用时传入分配的凭证信息。所以我们需要在后台安全配置页面添加一个应用，并在服务端插件初始化时使用对应的内容

1// plugins/cloudbase.server.ts
2import { defineNuxtPlugin } from '#app'
3
4import cloudbase from '@cloudbase/js-sdk'
5import { adapter } from 'cloudbase-adapter-node'
6
7export default defineNuxtPlugin(nuxtApp => {
8    cloudbase.useAdapters(adapter)
9
10    nuxtApp.provide('cloudbase', cloudbase.init({
11        env: '环境ID',
12        appSign: '应用标识',
13        appSecret: {
14            appAccessKeyId: '版本',
15            appAccessKey: '密钥'
16        }
17    }))
18})
19
20declare module '#app' {
21    interface NuxtApp {
22        $cloudbase: cloudbase.app.App
23    }
24}

访问资源

至此，我们的 Nuxt 已经可以正常的访问腾讯云开发的相关服务了。如果无法访问，一般问题可能出在安全配置上。要注意的是，在不进行登陆认证的情况下，数据库的默认的4个权限都无法访问！详细配置方法可以查看腾讯云官方文档。

1<template>
2{{ data._id }}
3</template>
4
5<script setup>
6const { $cloudbase } = useNuxtApp()
7
8const { data } = (await useAsyncData('test', () => {
9  return $cloudbase.database().collection('test')
10      .limit(1)
11      .get()
12      .then(res => res.data[0])
13}))
14</script>

Docker 镜像

最后一步是将我们的服务部署到云托管之中，云托管使用的是 Docker，所以我们需要添加一个Dockerfile。

1# 使用官方 Node.js 16 轻量级镜像.
2# https://hub.docker.com/_/node
3FROM node:16-slim
4
5# 定义工作目录
6WORKDIR /usr/src/app
7
8# 将依赖定义文件拷贝到工作目录下
9COPY package*.json ./
10
11# 安装依赖
12RUN npm install
13
14# 将本地代码复制到工作目录内
15COPY . ./
16
17RUN npm run build
18
19# 启动服务
20CMD [ "node", ".output/server/index.mjs" ]

同时添加一个 .dockerignore 避免部分不需要的文件打包进镜像之中。

1Dockerfile
2.dockerignore
3.output
4.nuxt
5node_modules
6npm-debug.log

至此，我们的所有基本工作都已完成，可以将我们的整个项目部署到云托管中。具体配置说明可以参考腾讯云官方文档。