AWS EC2 Angular 5 ng服务未通过浏览器连接答案

【问题标题】：AWS EC2 Angular 5 ng serve not connecting via browserAWS EC2 Angular 5 ng服务未通过浏览器连接
【发布时间】：2019-01-29 00:26:31
【问题描述】：

我设法让我的 Angular 5 应用程序在 AWS EC2 Ubuntu 上运行...

启动标准 Ubuntu 实例，使用 PuTTy 进行 shell，安装节点，进入接下来的 4 条“魔法线”...

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.profile

创建了我的公司目录，为@angular/cli 进行了全局npm 安装，克隆了我的git，将目录更改为项目子文件夹，为@angular/cli 进行了本地npm 安装，然后为我的项目运行了npm install。此时，我能够在上述任何步骤中运行 ng serve 而没有出现严重错误！哇！

它显示它在端口 4200 上运行良好。我什至用 netstat -anp | 进行了检查。 grep 4200 以及 telnet 127.0.0.1 4200。是的，一切正常。

然后我进入 AWS 控制面板，为我的实例创建了一个安全组，使用默认值打开 HTTP 和 HTTPS，然后为端口范围 4200 添加一个自定义 TCP 规则，向任何地方开放，并保存。但是，当我在浏览器中输入 http://xx.xx.xx.xx:4200（其中 x 是 AWS 分配给我的实例的公共 IP）时，我收到“无法与服务器建立连接”错误。

我错过了什么？

【问题讨论】：

标签： node.js amazon-ec2 npm-install angular5

【解决方案1】：

首先，请注意，ng-cli 中的内置网络服务器不打算用于生产环境。如果这是用于生产，我强烈建议您找到更好的解决方案。

为了从其他设备/通过 Internet 访问该站点，您必须指示 ng-cli 在正确的 IP 地址提供它。你可以通过运行ng serve --host x.x.x.x来做到这一点。

如果您输入您的服务器 LAN-IP（取决于您的设置），它可能会起作用。您可以通过运行ifconfig 找到它。

但是，由于您托管的是静态网站，因此另一种解决方案是在 S3 上简单地托管应用程序。为此，请运行 ng build --prod 并将 dist 文件夹上传到 AWS S3。他们有一个关于 here 的教程。

或者，您可以使用 Apache 或 nginx 之类的工具从您的 EC2 实例中为您编译的应用程序提供服务。

【讨论】：

我会检查你的答案是否正确，即使后半部分不适合我们的最终解决方案。在我们的案例中，我们最终使用了 Elastic Beanstalk 而不是 S3，因为我们的站点不是静态的，并且我们最终没有使用 EC2 来设置所有内容。诀窍在于不选择 node.js 作为我们的服务器，而是使用 Tomcat。对于其他这样做的人，您可以在此 [post] (stackoverflow.com/questions/48693139/…) 中阅读更多内容。
是的，那可能是一个更好的解决方案。 :-)
@AppDreamer，我想在 EC2 或 Beanstalk 中托管我的 Angular 5 动态应用程序。你能帮我分享你尝试过的事情吗？

【解决方案2】：

您需要先检查 EC2 实例中的几件事

首先检查端口 4200 或您要用于 Angular 的任何端口是否已添加到安全组中以接受流量。
在允许端口运行 ng 服务后，使用正确的域名或 EC2 实例中显示的公共 DNS，例如

“ec2-xx-xx-xx-xx.eu-west-1.compute.amazonaws.com”

热修复：

如果您在使用 localhost:4200 时遇到此错误，您可以尝试 ng serve --host 0.0.0.0

添加特定端口可以执行如下命令：ng serve --host 0.0.0.0 --port 4200

希望这能解决您的问题。

【讨论】：

【解决方案3】：

使用

ng serve  --port 4202 --host 0.0.0.0 --publicHost ec2-your-public-host-link.com

【讨论】：

当我在 AWS EC2 实例中部署时遇到类似错误时，这对我有用。谢谢！