【问题标题】:How to properly launch Angular Universal to live server如何正确启动 Angular Universal 到实时服务器
【发布时间】:2018-04-17 15:19:31
【问题描述】:

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

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

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

【问题讨论】:

    标签: node.js angular angular-universal


    【解决方案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 上的现有答案。为了清楚起见,只是在这里发布

    1. 构建您的应用程序:npm run build:ssr
    2. 将 dist 移到您的服务器上
    3. 安装PM2npm install pm2 -g
    4. 在您的服务器上,使用 PM2 运行服务器捆绑的应用程序pm2 start dist/server.js
    5. 如果您使用的是 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 问题,但如果您还记得,您能否在答案或评论中添加您的步骤?我也被困在这里了。
    • 是的,我给自己一个提醒,今晚试着写下步骤
    猜你喜欢
    • 2021-06-11
    • 2020-02-21
    • 2020-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-21
    • 2017-04-05
    相关资源
    最近更新 更多