【问题标题】:Deploy nestjs in firebase cloud functions在firebase云函数中部署nestjs
【发布时间】:2019-11-26 14:23:01
【问题描述】:

我想用 ssr 部署 Angular 应用程序。我最近发现有 nestjs 的原理图在 Angular 中自动添加了 ssr 功能,但我没有找到任何关于如何部署这个项目的教程或解释,所以我可以得到 ssr。

我的步骤是:

  1. 使用 cli 创建一个新的 Angular 应用程序。
  2. 通过“ng add @nestjs/ng-universal”添加nestjs
  3. 使用 firebase cli 添加云功能和托管
  4. 构建一切
  5. 如何部署此应用程序,以便应用程序位于云功能上的托管和 nestjs 服务器上,并被调用以进行预渲染。

【问题讨论】:

    标签: angular firebase google-cloud-functions nestjs


    【解决方案1】:

    一旦你使用 webpack 编译了你的 index.js 文件,你就可以简单地点击 firebase deploy。同样,您可以为此构建管道。

    处理函数应该是这样的:

    import * as express from 'express';
    import * as functions from 'firebase-functions';
    import { AppModule } from './app.module';
    import { Express } from 'express';
    import { ExpressAdapter } from '@nestjs/platform-express';
    import { NestFactory } from '@nestjs/core';
    
    const server: Express = express();
    
    // Create and init Nest server based on Express instance.
    const createNestServer = async (expressInstance: Express) => {
      const app = await NestFactory.create(
        AppModule,
        new ExpressAdapter(expressInstance)
      );
      app.listen(4048);
    };
    
    createNestServer(server);
    exports.angularUniversalFunction = functions.https.onRequest(server); // Export Firebase Cloud Functions to work on
    

    正如您所写,您一切正常,我假设您知道如何为 SSR 设置所有其他人。在其他情况下,请查看此演示 repo https://github.com/kamilmysliwiec/universal-nest

    编辑 20-1-2020

    基于@TayambaMwanza 的问题,我还添加了我的(与服务器相关的)webpack 配置:

    /* Custom webpack server properties. */
    const dotenv = require('dotenv-webpack');
    const nodeExternals = require('webpack-node-externals');
    const path = require('path');
    const webpack = require('webpack');
    const WebpackConfigFactory = require('@nestjs/ng-universal')
      .WebpackConfigFactory;
    
    // Nest server's bundle for SSR.
    const webpackConfig = WebpackConfigFactory.create(webpack, {
      server: './server/main.ts'
    });
    
    // Ignore all "node_modules" when making bundle on the server.
    webpackConfig.externals = nodeExternals({
      // The whitelisted ones will be included in the bundle.
      whitelist: [/^ng-circle-progress/, /^ng2-tel-input/]
    });
    
    // Set up output folder.
    webpackConfig.output = {
      filename: 'index.js', // Important in terms of Firebase Cloud Functions, because this is the default starting file to execute Cloud Functions.
      libraryTarget: 'umd', // Important in terms of Firebase Cloud Functions, because otherwise function can't be triggered in functions directory.
      path: path.join(__dirname, 'functions') // Output path.
    };
    
    // Define plugins.
    webpackConfig.plugins = [
      new dotenv(), // Handle environemntal variables on localhost.
      // Fix WARNING "Critical dependency: the request of a dependency is an expression".
      new webpack.ContextReplacementPlugin(
        /(.+)?angular(\\|\/)core(.+)?/,
        path.join(__dirname, 'apps/MYPROJECT/src'), // Location of source files.
        {} // Map of routes.
      ),
      // Fix WARNING "Critical dependency: the request of a dependency is an expression".
      new webpack.ContextReplacementPlugin(
        /(.+)?express(\\|\/)(.+)?/,
        path.join(__dirname, 'apps/MYPROJECT/src'), // Location of source files.
        {}
      )
    ];
    
    webpackConfig.target = 'node'; // It makes sure not to bundle built-in modules like "fs", "path", etc.
    
    module.exports = webpackConfig; // Export all custom Webpack configs.
    

    【讨论】:

    • 在运行 ng add @nestjs/ng-universal 并安装 firebase 工具后,这真的是您需要做的所有事情吗?我还需要弄乱 webpack.config 吗?
    • @TayambaMwanza 您需要为 SSR 部分使用 WebpackConfigFactory.create。
    • 好的,只是有一些错误,我正在使用这个配置:stackoverflow.com/questions/58447458/… 我已经发现你需要 this.externals = [/^firebase/] 而不是 externals:[/ ^firebase/ ] 但输出给了我问题,我应该打开另一个问题吗?
    • @TayambaMwanza 请查看编辑,希望对您有所帮助。这是我所有与服务器相关的 webpack 逻辑。我根本不需要处理externals 中的firebase 来让它工作。也许提出一个新问题会有所帮助。
    • 谢谢,“apps/MYPROJECT/src”我应该把它改成我的项目名称吗?
    猜你喜欢
    • 2021-05-06
    • 1970-01-01
    • 2020-03-26
    • 1970-01-01
    • 2020-04-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-19
    相关资源
    最近更新 更多