Question

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

以下是该方案。

我有一个角度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

查看

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

127.0.0.1       localhost
192.168.10.11   my.site

虚拟机已运行apache2并已全部配置。现在我可以同时启动和运行两个系统，没有问题，但是我被要求通过iframe将旧遗留系统的一部分放入新的应用程序中。从技术上讲，这是有效的，但是因为两个系统都有不同的域，所以我对旧系统的处理方式非常有限，而旧系统则被设置为新系统。例如，由于iframe的安全问题，我甚至无法更改基本的CSS（这几乎就是我需要做的）。

我的问题是，有没有办法可以让两个系统在相同的IP或域名下运行并在一个iframe中以安全问题被淘汰的方式在另一个内部？

因此，例如，我可能有localhost：4200是托管在主机上的新角度应用程序，其内部有localhost：80指向虚拟机上的站点。

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

1）我能否将流量从一个端口转发到虚拟机，从另一个端口（在同一个IP上）转发到本地计算机？

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

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

附录：

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

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

使用它可以将我的api请求发送到运行api的主机上的另一个端口。该api是从本地流明代码库运行的。我怀疑这与我的核心问题没有关系，但因为ng serve命令包含它，我想在此明白这一点。

Answer 1

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

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

到目前为止，它总是让我感到困惑，为什么需要以任何特殊的方式提供前端应用程序。为什么我不能把文件放在一个盒子上然后指向它们的apache？事实证明，你可以做到这一点。 ng build命令使你的角度应用程序成为一个简单的文件集，你可以把它放在你想要托管的任何地方，所以对我来说，我只是将这些文件放在托管旧系统的虚拟机上（我将旧系统移动到子系统） - 文件夹）和wholla！没有交叉原点问题了。

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

1 个答案: