如何在单个服务器上提供多个前端（AngularJS）应用程序和 1 个后端（Laravel）应用程序？

Posted 2023-03-04

【中文标题】如何在单个服务器上提供多个前端（AngularJS）应用程序和 1 个后端（Laravel）应用程序？

【英文标题】：How to serve multiple front-end (AngularJS) Apps and 1 back-end (Laravel) App on single server?

【发布时间】：2016-07-13 04:28:07

【问题描述】：

假设我想用 Laravel 构建一个 API，（不提供任何 html 内容），它的域是 http://api.whatever.com

另一方面，我希望 2 个不同的前端 AngularJS 应用程序使用该 API（一个用于普通用户，一个用于管理员）

用户应用托管在http://whatever.com，管理员应用托管在http://admin.whatever.com和http://whatever.com/admin

我的 2 个问题是：

1) 在 Laravel 内部（使用 nginx）和在 Laravel 外部（因为独立的应用程序可能使用 NodeJS 托管）构建和服务这 2 个不同的前端应用程序有哪些优点和缺点？

2) 而且我强烈认为这些应用程序应该在 Laravel 之外构建和提供服务，原因有很多。如何在单个服务器上提供多个前端 (AngularJS) 应用程序和 1 个后端 (Laravel) 应用程序？？？我应该用 NodeJS 配置 NGINX 吗？！这里有什么诀窍？

【问题讨论】：

没有问题，你可以在不同的文件夹中创建两个angular应用。你需要设置 nginx

首先，我不确定您是否需要 2 个 Angular 应用程序。其实为什么？您可以制作 1 个应用程序，该应用程序将根据用户角色改变外观。通常你不需要保护 admin.html 模板，你只需要保护数据。其次，从服务器的角度来看，单页角度路由、状态变化等都不是什么——你停留在同一页面上，通常是 index.html。所以你可能在服务器上有 index1.html、index2.html，它们没有任何关系，它们的 js-objects 是完全独立的。对于 html5mode=false 你甚至不需要为此配置任何东西。

听起来您在考虑如何提供 html 文件。并不复杂

@PetrAveryanov 我需要单独的 Angular 应用程序的唯一原因是因为我可以让 2 个不同的开发人员在自己的应用程序上并行工作，每个人都有自己的依赖项和版本等。我什么也没看到两个应用程序之间相似，因为一切都不同，也可能在不同的时间构建。那为什么要将它们合并为 1 个项目作为单个 Angular 应用程序！

@charlietfl 没有想太多！我知道有很多选择可以实现这一目标。我试图从这个问题中得到的是最好的现代可信方式。我只是想确保我的做法是正确的。

【参考方案1】：

结果是最好的方法是配置你的服务器（在我的例子中是 NGINX）指向你所有的应用程序，这些应用程序可以放在你喜欢的任何地方。

它是这样工作的：

文件夹结构可以如下：

- 项目根 -- 客户 --- 网络 - - 行政 ---- 用户 - 服务器 --- Laravel 安装在这里

使用 Homestead 的 NGINX 配置：

- map: whatever.pro
  to: /path-to-project-root/clients/web/user
- map: api.whatever.pro
  to: /path-to-project-root/server/public
- map: admin.whatever.pro
  to: /path-to-project-root/clients/web/admin/public