Question

我一直在寻找在启用“服务器端呈现”的服务器上托管Angular 4应用程序大约3个小时。注意 - 我有一台安装了Apache的AWS服务器（Ubuntu）。

首先，我已经知道如何托管Angular 4应用程序（没有服务器端渲染）。但是我的主要担心是我想启用我的应用程序 - 服务器端渲染。

在我的本地，我使用http://localhost:4000命令，该命令自动为应用程序提供服务（启用服务器端呈现） - package.json

我的... "scripts": { "serve": "ng serve", "prestart": "ng build --prod && ngc && webpack", "start": "node dist/server.js", "build": "ng build" }, ...文件如下所示：

npm start

这些命令都运行正常。但我很困惑，我应该再次运行

node_modules

在生产服务器上，因此还需要安装{{1}}。这对我来说似乎不是正确的方法？

任何人都可以帮助我在启用“服务器端渲染”的情况下托管我的应用程序。

Answer 1

任何人都可以帮助我在启用“服务器端渲染”的情况下托管我的应用程序。

是。不幸的是，我使用的是Nginx。但是，这种方法在Apache或其他方面不应该有任何不同。

所以这就是我在生产中托管服务器端渲染角色应用程序的方式（我在DO上）。我写了一篇关于它的文章on my blog：

在构建SSR之后，你应该有这样的东西：

设法将dist/文件夹中的所有内容发送到远程服务器后，使用pm2（我用来运行节点应用程序）运行它

运行pm2 start path/to/dist/server.js --name name_of_process

它应该在localhost:4000

上运行

下面的Nginx虚拟服务器块应该通过您的Nginx将所有请求代理到服务器端呈现角色应用程序。

下面的nginx conf实际上既可以提供角度SSR的静态，也可以在请求不是静态文件时回退到代理。

upstream ssr_khophi_nodejs {
    server 127.0.0.1:4000;
}

server {
    listen 443 ssl http2;

    server_name staging.khophi.com; # <--- Change this part

    include /etc/nginx/ssl/ssl-params.conf;# <--- Ignore this part if not using SSL
    include /etc/nginx/ssl/khophi.com.ssl;# <--- Ignore this part if not using SSL

    root /home/khophi/khophi.com/ssr/dist/browser; # <-- Notice where we're point to

   location / {
        try_files $uri $uri @backend; # <--- This looks for requests (statics i.e js/css/fonts)
                                      # in /ssr/dist/browser folder. If nothing found, calls @backend
    }

    location @backend {
        # NOTE THERE IS NO TRAILING SLASH AT THE END. NO TRAILING SLASH. NO SLASH. NO!
        proxy_pass http://ssr_khophi_nodejs; # <--- THIS DOES NOT HAVE A TRAILING '/'
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name staging.khophi.com;
    return 301 https://$server_name$request_uri?;
}

我希望这会对你有所帮助。

Answer 2

好的，对不起，我想念你的问题:)。

首先，Apache不再需要为您的应用程序提供服务。这是因为node.js将为您服务。

因此，如果您的服务器上不需要apache服务，则应针对安全性问题禁用它，并可能避免应用程序之间的端口冲突。

需要修改角度应用程序的服务器渲染。让我们开始吧。

1）转到角度项目并安装这些包：

npm i -S @angular/platform-server @angular/animations express

2）打开 src / app / app.module.ts ，然后使用您的应用名称修改下面的注释行。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'your-angular-app-name' }), // You just have to change this line
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

3）现在，我们将在您的应用中设置服务器。为此，请创建文件 app / src / app.server.module.ts ，并在以下代码中创建。

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
imports: [
    ServerModule, // Load the servermodule
    AppModule     // Load the modules of AppModule
],
bootstrap: [AppComponent]
})
export class AppServerModule { }

4）创建文件 src / server.ts 并添加以下代码。这是节点服务器。

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';
const PORT = 4000;
enableProdMode();
const app = express();
let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();
app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };
  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});
app.set('view engine', 'html');
app.set('views', 'src');
app.get('*.*', express.static(join(__dirname, '..', 'dist')));
app.get('*', (req, res) => {
  res.render('index', { req });
});
app.listen(PORT, () => {
  console.log(`Listening on http://localhost:${PORT}...`);
});

5）打开 src / tsconfig.app.json 并将文件 server.ts 添加到exclude json变量。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "server.ts", # Just here !
    "test.ts",
    "**/*.spec.ts"
  ]
}

6）打开 tsconfig.json 找到项目的根目录，然后添加 angularCompilerOptions ，如下所示：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "angularCompilerOptions": { 
    "genDir": "./dist/ngfactory",
    "entryModule": "./src/app/app.module#AppModule"
  }  
}

7）现在，修改 package.json ，让您的生活更轻松。

{
  "scripts": {
    "prestart": "ng build --prod && ngc",
    "start": "ts-node src/server.ts", 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
}

8）现在您可以使用以下方法测试您的应用：

npm start

我希望这会对你有所帮助。

注意：如果你的项目已经存在，你可能会遇到一些像Angular Material这样的模块的问题，因为node.js不知道，window对象，文档对象。

所以，你必须：

创建 app.common.module.ts ，其他模块加载文件将继承。并收集通用模块（客户端+服务器）。

最后将困扰我们的模块放在 app.module.ts 中。

Cdly。

Answer 3

实际上这很简单。

使用shell转到angular 4项目的目录。并这样做：

$ ng build --prod

这将编译应用程序，结果位于角度应用程序根目录的 dist 文件夹中。

现在您只需将 dist 文件夹的内容放在HTTP服务器中，然后吃爆米花。

Cdly， Jerry Yong-busson。

Answer 4

no 7 package.jsno脚本有重复的启动脚本。

此外，我们还需要服务器支持，但不包含在共享主机帐户中。

如何在prod服务器上部署带有服务器端呈现的Angular 4应用程序

4 个答案: