SSR 生產導出 | Quasar 框架

Quasar CLI 搭配 Webpack - @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 檔案的預設匯出函式接收為參數的 Object。

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

詳細說明 Object

{
  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. 無伺服器