Astro+Vue3+NestJS+TS搭建服务端渲染SSR

环境准备

• Node.js - v18.14.1 或更高版本
• 安装 pnpm npm i -g pnpm
• 文本编辑器（这里用 VS Code，安装官方扩展 Astro）

Astro 安装

命令行创建 Astro 模板工程

pnpm create astro@latest

如果依赖安装失败可在工程根目录下重试

pnpm i

集成 Vue3 和 Nodejs

pnpm astro add vue node

生成以下 astro.config.mjs 默认配置：

export default defineConfig({
  integrations: [vue()],
  output: "server",
  adapter: node({
    mode: "standalone"
  })
});

启动

npm run dev

启动成功后，访问 http://localhost:4321 打开首页

集成 Nestjs

pnpm i @nestjs/core @nestjs/common @nestjs/platform-express --save
pnpm i source-map-support --save-dev

在工程根目录下创建 nest-cli.json 和 tsconfig.nest.json

nest-cli.json

{
  "sourceRoot": "server",
  "compilerOptions": {
    "deleteOutDir": true,
    "tsConfigPath": "tsconfig.nest.json"
  }
}

tsconfig.nest.json

{
  // 模板来自nestjs模板工程的tsconfig.json
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "nodenext", // 加载commonjs模块
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ESNext",
    "sourceMap": true,
    "outDir": "./dist/nestServer",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
  },
  "exclude": ["src"]
}

设置 astro.config.mjs 中 node 适配器的 mode 为 middleware，将 astro 作为中间件加载到 Nestjs 服务

import { handler as ssrHandler } from '../server/entry.mjs'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  // 添加全局验证管道
  app.useGlobalPipes(new ValidationPipe({ transform: true }))
  // 将astro ssr处理器作为中间件添加到应用中（包括前端src/pages自动生成的路由）
  app.use(ssrHandler)
  await app.listen(3000)
  console.log('server open at 3000...')
}

启动

1. 在 package.json 的 scripts 中添加 "nest:start": "nest start"
2. npm run build 打包 astro
3. npm run nest:start 启动 nestjs

启动成功后，访问 http://localhost:3000 将打开 astro 的首页路由

后面会更新一篇《Astro 与使用》和一篇《Nestjs 与使用》

工程目录结构

/
├── public/
│   └── favicon.svg
├── server/
│   ├── filter/
│   │   └── *.filter.ts
│   ├── common/
│   │   ├── dto/
│   │   │   └── *.dto.ts
│   │   └── *.ts
│   ├── user/
│   │   ├── dto/
│   │   │   └── *User.dto.ts
│   │   └── user.*.ts
│   ├── app.module.ts
│   └── main.ts
├── src/
│   ├── components/
│   │   └── *.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       ├── api/
│       │   └── artile.ts
│       ├── article/
│       │   └── [...id].astro
│       └── index.astro
└── package.json

src/server/ 目录下放服务端文件。

src/pages/ 目录下，api 子目录在未开启 SSR 时放静态文件端点，在开启 SSR 时放服务器端点（API 路由），非 api 下的 .astro or .md 文件生成相应的静态路由或动态路由。

src/components/ 放组件，可以是 Astro、React、Preact、Svelte、Vue、SolidJS、AlpineJS、Lit、Markdown。

public/ 放静态资源。

结束语

因个人知识面的局限性，如有不正确或异议的地方，望大家指正。

以后的学习笔记和实践示例将持续添加到《Remy 学习与应用》。

感兴趣的同学可以订阅专栏，关注博主，一起学习进步。

如若转载，请注明出处：https://blog.csdn.net/remy0817/article/details/132921241

参考

《前端服务框架调研：Next.js、Nuxt.js、Nest.js、Fastify》

《如何评价最近新出现的前端框架 Astro？》

《Astro DOCS》