EC2 访问上的 Angular 4200 是 localhost - Javascript

在 EC2 实例上部署 Angular 应用并访问时，经常会遇到 localhost 的问题。本文将介绍如何解决这个问题。

问题描述

部署 Angular 应用至 EC2 实例，并使用 ng serve 命令启动服务时，服务默认运行在 localhost:4200 地址下。然而，当我们通过浏览器访问该应用时，由于 EC2 实例的网络配置，我们无法访问 localhost 地址。因此，我们需要修改应用的配置使其可以在公网上访问。

解决方案

我们可以按照以下步骤来解决该问题。

1. 在 EC2 实例上安装 Nginx

我们可以通过以下命令安装 Nginx：

sudo apt-get update
sudo apt-get install nginx

2. 配置 Nginx 服务器

在 Nginx 的配置文件中添加以下内容：

server {
  listen 80;
  server_name <your_domain_name>;

  location / {
    proxy_pass http://localhost:4200;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

其中，<your_domain_name> 为我们自定义的域名或者 IP 地址。

这样，Nginx 将会代理其监听的 80 端口，将请求发送至 Angular 应用监听的 4200 端口。

3. 启动 Nginx 服务器

完成配置后，我们需要启动 Nginx 服务器：

sudo service nginx start

4. 在浏览器中访问应用

现在，我们可以在浏览器中通过设定的域名或 IP 地址来访问 Angular 应用了。

补充说明

完整的 Nginx 配置还需要考虑负载均衡、HTTPS 等因素。上述仅为简单示例，实际情况需要结合具体的场景进行配置。

参考链接

• Nginx 官方文档
• 部署 Nginx 服务器教程