如何正确启动 Angular Universal 到实时服务器

Posted 2023-03-07

【中文标题】如何正确启动 Angular Universal 到实时服务器

【英文标题】：How to properly launch Angular Universal to live server

【发布时间】：2018-04-17 15:19:31

【问题描述】：

我通过修改此处找到的通用启动器种子来设置和工作我的网站：https://github.com/angular/universal-starter 并且我的网站在 localhost 节点服务器上工作（呈现 html），现在我安装了 SSH 连接和节点，现在我在这里：

我不确定我将 /dist 文件等放在哪里，然后启动 nodejs 服务器。

此处显示已安装的 NodeJS/npm：

【参考方案1】：

编辑（21 年 3 月 23 日）：使用 Universal 时需要注意的事项

您确实需要考虑专门为浏览器或服务器编写代码块。例如：

您可以使用外部 SAAS 解决方案（如 SharpSpring 或 Google Tag Manager）来帮助您的团队跟踪潜在客户并生成自动工作流。

其中一些服务要求您将对象写入窗口或文档对象。因为您的服务器没有运行 javascript，所以当在服务器上运行您的应用程序时，无法让这些对象表现得像本机那样。你将需要真正搞砸这些事情。 我发现一篇非常有用的文章是this demo of real app problems using Angular Universal。

您还需要动态地将导入的脚本添加到您的 index.html 标头中。我在几个不同的地方看到过同样的概念，但here 也是一个。可能有一个堆栈溢出答案具有相同的想法。

但是，在某些情况下，您将需要使用库或其他东西（如 Postscribe）将脚本动态添加到您的一个 html 模板文件中的单个组件。 Postscribe 通过允许我们在其中一个组件的表单前动态导入特定脚本，极大地帮助了我们。我强烈推荐使用 Postscribe。

因此，长话短说，您需要确保您正在导入脚本并将它们附加到您的 index.html 文件中仅当您的应用程序在浏览器中运行时。对所有外部 JS 文件以及您正在导入应用程序并直接使用的所有外部 JS 文件执行此检查。首先将 PLATFORM_ID 注入到您需要进行此签入的任何组件中，然后以这种方式使用它

这适用于各种事物，如动画（可能正在监听窗口滚动事件）等。

原帖如下：

@Cacoon 我希望这就是你所做的。

第一部分是 m98 在this Github issue 上的现有答案。为了清楚起见，只是在这里发布

构建您的应用程序：npm run build:s-s-r 将 dist 移到您的服务器上 安装PM2npm install pm2 -g 在您的服务器上，使用 PM2 运行服务器捆绑的应用程序pm2 start dist/server.js 如果您使用的是 nginx 或其他 Web 服务器，请确保将请求重定向到以 PM2 启动的应用正在侦听的端口。

更新（2020 年 2 月 7 日）

对于 Apache，请确保您的文档根目录被指定为您的 dist/browser 文件夹，例如

    DocumentRoot "$SRVROOT/htdocs/dist/browser"
    <Directory "$SRVROOT/htdocs/dist/browser">

然后在你的 httpd.conf 文件的底部试试这个：

<Location />
 RewriteEngine On
 # If an existing asset or directory is requested go to it as it is
 RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
 RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
 RewriteRule ^ - [L]

 RewriteRule ^ /index.html
</Location>

<VirtualHost *:80>
 ServerName localhost
 ServerAlias localhost
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / http://localhost:4000/
 ProxyPassReverse / http://localhost:4000/
</VirtualHost>

<VirtualHost *:443>
 ServerName localhost
 ServerAlias localhost
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/
</VirtualHost>

您必须在 httpd.conf 中设置虚拟主机，而不是在 .htaccess 文件中。您可以在 .htaccess 文件中将 Mod_rewrite 设置为与索引文件相同的级别，但不能在该级别设置虚拟主机。

另外，请确保启用代理模块，例如 httpd.conf 文件中的 mod_proxy_express

这是用于本地开发的。部署到产品时将 localhost 更改为您的域。

【讨论】：

听起来和我做的差不多，谢谢你发布这个！

【参考方案2】：

这实际上比看起来更容易，我只需要使用 npm 安装 pm2，这样我就可以使 nodejs 进程保持不变，然后使用 .htaccess 文件中的 RewriteEngine 设置来渲染我的 Angular 通用应用程序（它是在子域文件夹中）并确保端口正确并且完美链接并在源中加载 html 以允许正确的 SEO 和索引

【讨论】：

嗨，Cacoon，你能用命令和步骤更多地解释你的答案吗？我不是服务器极客，并且与您的问题保持一致。

@VivekSinha 很抱歉回复太晚了，但是很高兴写下来，你能@我或在接下来的几天内再次回复吗？我很快就开始工作，记性不好

@Cacoon 我知道这是一个古老的 SO 问题，但如果您还记得，您能否在答案或评论中添加您的步骤？我也被困在这里了。

是的，我给自己一个提醒，今晚试着写下步骤