我可以在一个端口上托管角度应用程序并在另一个端口上托管旧应用程序（在虚拟机中）

Question

我很难弄清楚如何正确地问这个问题，如果我做错了，请原谅（或建议我）。

这是场景。

我有一个 Angular 4 应用程序，其中文件存在于我的主机操作系统（ubuntu 16.04）上，我使用 npm start 命令提供文件。据我了解（我没有编写应用程序），当我运行 npm start 时，它运行位于我的 package.json 中的这个命令：

ng serve --sourcemap --extract-css --host 0.0.0.0 --proxy-config proxy.config.json

不知何故，这导致网站可以在 localhost:4200 上查看

我在虚拟机（也是 ubuntu 16.04）上有另一个旧的 php5 风格的应用程序。虚拟机由 Vagrant 管理，并从 Virtualbox 运行。我的主机上的主机文件设置如下：

127.0.0.1       localhost
192.168.10.11   my.site

虚拟机正在运行 apache2 并且已全部配置完毕。现在我可以毫无问题地同时启动和运行两个系统，但是我被要求通过 iframe 将旧遗留系统的一部分放入新应用程序中。从技术上讲，这是可行的，但是因为这两个系统具有不同的域，所以我对于将 iframe 装入新系统的旧系统可以做什么非常有限。例如，由于 iframe 的安全问题，我什至无法更改基本的 CSS（这几乎是我需要做的所有事情）。

我的问题是，有没有一种方法可以让两个系统在相同的 IP 或域名下启动并运行，并在 iframe 中将一个系统置于另一个系统中，从而消除安全问题？

因此，例如，我可能将 localhost:4200 作为托管在主机上的新 Angular 应用程序，其中 localhost:80 指向虚拟机上的站点。

这个问题涉及一些不同的事情。

1) 我可以将流量从一个端口转发到虚拟机，然后从另一个端口（在同一 IP 上）转发到本地计算机吗？

2) 即使我能做到。如果域/IP 相同但端口不同，iframe 规则是否允许我控制 iframe 中的内容？

或者...如果有更好的方法来做到这一点，我也愿意听到。

附录：

不确定这是否重要，但在 Angular 应用程序中还有一个 proxy.config.json 文件，如下所示：

{
    "/api/*": {
        "target": "http://localhost:8001",
        "changeOrigin": true,
        "pathRewrite": {"^/api" : ""},
        "secure": false,
        "logLevel": "debug"
    }
}

这是为了让我的 api 请求可以发送到运行 api 的主机上的另一个端口。该 api 从本地流明代码库运行。我怀疑这与我的核心问题无关，但因为 ng serve 命令包含它，所以为了清楚起见，我想在这里。

Answer 1

我终于想出了一个更好的方法来做到这一点，它不涉及一些复杂的反向代理。答案其实很简单。

当有人问我如何将 Angular 应用程序部署到生产环境时，答案就出来了，而我不知道这实际上是如何完成的。在我们的开发阶段，我们只是使用 npm start 命令为应用程序提供服务，但事实证明还有一个名为“ng build --prod”的命令，当您想要部署到生产环境时使用它。

到目前为止，我一直很困惑为什么需要以任何特殊方式提供前端应用程序。为什么我不能将文件放在一个盒子上，然后将 apache 指向它们？事实证明，你完全可以做到这一点。 ng build 命令使您的 Angular 应用程序成为一组简单的文件，您可以将它们放在您想要托管的任何位置，所以对我来说，我只是将这些文件放在托管旧系统的 vm 上（我将旧系统移动到 sub -文件夹）和哇！不再有跨源问题。