我想用ssr部署angular应用程序。我最近发现,有一些 Angular nestjs示意图可以自动添加ssr功能,但是我没有找到有关如何部署此项目的任何教程或说明,因此可以得到ssr。

我的步骤是:

  • 使用cli创建一个新的 Angular 应用程序。
  • 通过“ng add @ nestjs/ng-universal
  • 添加nestjs
  • 添加云功能并使用Firebase cli托管oji
  • 构建一切
  • 我将如何部署它,以便该应用程序将位于托管功能上,而nestjs服务器位于云功能上,并将被调用以进行预渲染。
  • 最佳答案

    使用webpack转换firebase deploy文件后,您只需点击index.js。同样,您可以为此建立管道。

    处理函数应如下所示:

    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设置所有其他工具。在其他情况下,请检查此演示存储库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.
    

    关于angular - 在Firebase云功能中部署NestJS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57081132/

    10-08 21:47