AWS EC2 Angular 5 ng 服务未通过浏览器连接 [英] AWS EC2 Angular 5 ng serve not connecting via browser

问题描述

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

I managed to get my Angular 5 app running on AWS EC2 Ubuntu...

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

Started standard Ubuntu instance, used PuTTy to shell in, installed node, entered the next 4 "magic lines"...

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 且没有出现严重错误！哇！

made my company dir, did a global npm install for @angular/cli, cloned my git, changed dir to project subfolder, did a local npm install for @angular/cli, and then ran npm install for my project. At this point, I was able to run ng serve with no serious errors during any of the above steps! whew!

它显示它很高兴地在端口 4200 上运行.我什至检查过 netstat -anp |grep 4200 和 telnet 127.0.0.1 4200.是的，一切正常.

It showed it was happily running on port 4200. I even checked with netstat -anp | grep 4200 and also with telnet 127.0.0.1 4200. Yep all working.

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

Then I went into the AWS dashboard, and created a security group for my instance, turning on HTTP and HTTPS with default values, and then adding one custom TCP rule for Port Range 4200 open to Anywhere, and saved. However, when I go to a browser and enter http://xx.xx.xx.xx:4200 (where the x's are the public IP that AWS assigned to my instance), I get a "can’t establish a connection to the server" error.

我错过了什么?

推荐答案

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

First of all, please note that the built-in webserver in ng-cli is not intended to be used in production. I strongly advise you to find a better solution if this is for production.

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

In order to access the site from other devices/ over the internet, you have to instruct ng-cli to serve it at the correct IP-adress. You can do that by running ng serve --host x.x.x.x.

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

It will probably work if you enter your servers LAN-IP (depending on your setup). You can find it by running ifconfig.

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

However, since you are hosting a static website, an alternative solution is to simply host the app on S3. To do that, run ng build --prod and upload the dist-folder to AWS S3. They have a tutorial for that here.

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

Alternatively, you can use something like Apache or nginx to serve your compiled app from your EC2-instance.

这篇关于AWS EC2 Angular 5 ng 服务未通过浏览器连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！