SSR 生产导出 | Quasar 框架

带有 Webpack 的 Quasar CLI - @quasar/app-webpack

SSR 生产导出

警告

您需要运行 “@quasar/app-webpack” v3.2+ 才能使用此功能。
此文件仅用于生产构建，而不是在开发过程中。

请注意，您生成的 /src-ssr 包含一个名为 production-export.js 的文件。此文件定义了您的 SSR 服务器如何提供服务。您可以开始监听端口或为您的无服务器基础设施提供处理程序。由您决定。

此函数返回的内容（如果有）将从您的构建的 dist/ssr/index.js 中导出。

解剖学

文件 /src-ssr/production-export.[js|ts] 是一个简单的 JavaScript 文件，用于启动您的 SSR 服务器并定义服务器导出内容（如果有）。

// import something here (serverless packages?)

export default ({
  app, port, isReady, ssrHandler,
  resolve, publicPath, folders, render, serve
}) => {
  // something to do with the server "app"
  // return whatever you want your webserver to export (handler for serverless function?)
}

提示

请记住，此函数返回的内容（如果有）将从您构建的 dist/ssr/index.js 文件中导出。

您可以使用 ssrProductionExport 助手包装返回的函数，以获得更好的 IDE 自动完成体验（需要 Quasar v2.3.1+）。

import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({
  app, port, isReady, ssrHandler,
  resolve, publicPath, folders, render, serve
}) => {
  // something to do with the server "app"
  // return whatever you want your webserver to export (handler for serverless?)
})

参数

这里指的是 production-export 文件默认导出函数接收到的参数对象。

export default ({
  app, port, isReady, ssrHandler,
  resolve, publicPath, folders, render, serve
}) => {

对象详情

{
  app,     // Expressjs app instance

  port,    // process∙env∙PORT or quasar.config file > ssr > prodPort

  isReady, // Function to call returning a Promise
           // when app is ready to serve clients

  ssrHandler, // Prebuilt app handler if your serverless service
              // doesn't require a specific way to provide it.
              // Form: ssrHandler (req, res, next)
              // Tip: it uses isReady() under the hood already

  // all of the following are the same as
  // for the SSR middlewares (check its docs page);
  // normally you don't need these here
  // (use a real SSR middleware instead)
  resolve: {
    urlPath(path)
    root(arg1, arg2),
    public(arg1, arg2)
  },
  publicPath, // String
  folders: {
    root,     // String
    public    // String
  },
  render(ssrContext),
  serve: {
    static(path, opts),
    error({ err, req, res })
  }
}

默认内容

以下是您在 Quasar CLI 项目中添加 SSR 支持时 /src-ssr/production-export.js 的默认内容。

import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({ app, port, isReady }) => {
  return isReady().then(() => {
    app.listen(port, () => {
      console.log('Server listening at port ' + port)
    })
  })
})

用法

警告

如果您从 node_modules 中导入任何内容，请确保该包在 package.json > “dependencies” 中指定，而不是在 “devDependencies” 中指定。
通常，这里不是添加中间件的地方（但您也可以这样做）。请使用 SSR 中间件添加中间件。您还可以配置 SSR 中间件，使其仅在开发模式或生产模式下运行。

监听端口

这是您在 Quasar CLI 项目中添加 SSR 支持后获得的默认选项。它开始监听配置的端口（process.env.PORT 或 quasar.config 文件 > ssr > prodPort）。

// src-ssr/production-export.[js|ts]

import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({ app, port, isReady }) => {
  // we wait for app to be ready (including running all SSR middlewares)
  return isReady().then(() => {
    // then we start listening on a port
    app.listen(port, () => {
      // we're ready to serve clients
      console.log('Server listening at port ' + port)
    })
  })
})

无服务器

如果您有无服务器基础设施，则通常需要导出处理程序而不是开始监听端口。

假设您的无服务器服务要求您

module.exports.handler = __your_handler__

那么您需要做的是

// src-ssr/production-export.[js|ts]

import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({ ssrHandler }) => {
  // "ssrHandler" is a prebuilt handler which already
  // waits for all the middlewares to run before serving clients

  // whatever you return here is equivalent to module.exports.<key> = <value>
  return { handler: ssrHandler }
})

请注意，提供的 ssrHandler 是一个形式为 (req, res, next) => void 的函数。如果您需要导出形式为 (event, context, callback) => void 的处理程序，则您可能需要使用 serverless-http 包（见下文）。

示例：serverless-http

// src-ssr/production-export.[js|ts]

import serverless from 'serverless-http'
import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({ ssrHandler }) => {
  return { handler: serverless(ssrHandler) }
})

示例：Firebase 函数

// src-ssr/production-export.[js|ts]

import * as functions from 'firebase-functions'
import { ssrProductionExport } from 'quasar/wrappers'

export default ssrProductionExport(({ ssrHandler }) => {
  return {
    handler: functions.https.onRequest(ssrHandler)
  }
})

发现错误？在浏览器中编辑此页面

1. 简介

2. 结构

3. 参数

4. 默认内容

5. 用法

5.1. 监听端口

5.2. 无服务器