如何在开发区同时运行 Angular2（前端）和 Symfony3（后端 API）？答案

【问题标题】：How run Angular2 (front-end) and Symfony3 (back-end API) together in development zone?如何在开发区同时运行 Angular2（前端）和 Symfony3（后端 API）？
【发布时间】：2018-03-11 14:02:23
【问题描述】：

这是我在这里的第一个问题。我已经花了几个小时阅读主题，但之前从未发布过问题。

此时我正在开发一个 Angular4 应用程序。我正在使用“ng build --watch”运行我的应用程序，并且本地 PHP 网络服务器指向我的 Angular 应用程序的“dist”文件夹。（当使用内置 liveload 服务器 'ng serve' 时，没有可用的 PHP 服务器，所以我使用 'ng build --watch' 和 PHPStorm 的本地 PHP 内置服务器修复了这个问题）

为了与我的MYSQL 数据库进行通信，我使用了一个名为'/api' 的目录中的单php 文件。我在 angular-cli.json 文件中将此文件夹添加到我的资产中，因此在本地运行应用程序时，API 文件夹也被推送到“dist”文件夹。

在这种情况下，我能够使用相对路径来指向我的 http 请求。（就像对 '/api/insert.php' 的 POST 操作）。因此，在发布我的应用程序时，无需修改我的 HTTP 请求的路径。

但是现在我想使用一个后端框架，经过一番研究，我找到了http://api-platform.com，一个基于 Symfony3 构建的 PHP 框架。当我运行这个 API 时，它会在 localhost:8000 上运行，而我的 angular applciation 会在 localhost:4200 上运行。

所以，这意味着我必须为我的 HTTP 请求使用绝对路径。（eq http://localhost:8000/api/insert.php 而不是 /api/insert.php）。

目前我有 2 个项目：一个前端和一个后端。为了使开发更快、更容易、更简单，我想把这两个项目放在一起。我知道有些开发人员不喜欢这种架构方式，但就我而言，这是最好的解决方案，一个项目，包括前端和后端。

具体：是否可以在开发区运行调试网络服务器，我的 Angular 应用程序在 eq localhost 上运行，我的 symfony3/api-platform 在 eq localhost/api 在同一时间、同一域和同一端口上运行？

我想保持这个项目文件夹结构保持干净： - 项目名称（根） - - 前端 -----（来自角度的所有目录/文件） --- 后端 -----（来自 api-platform / symfony3 的所有目录）

此致，

着陆器

【问题讨论】：

标签： apache angular symfony nginx

【解决方案1】：

在同一个域（例如本地主机）上运行这两个应用程序没有问题，但它们需要在不同的端口上运行。在您的情况下，Angular 在 4200 上运行，您的 PHP 应用程序在 8000 上运行。您可以使用代理配置 Angular，它将请求传递给 http://localhost:4200/api 到 http://localhost:8000/api

在您的 angular 根目录（您的 package.json 所在的位置）中，创建一个文件 proxy.conf.json

{
    "/api": {
        "target": "http://localhost:8000",
        "secure": false
    }
}

然后更改您的 package.json 以使用此代理：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    // other scripts
}

现在使用 npm start 而不是 ng serve 运行 webpack 服务器

就个人而言，我忽略了proxy.conf.json，因为有些同事在不同的端口上运行他们的后端。因此，我们在 git 中创建了一个 proxy.conf.dist.json 并包含上述内容。如果你想使用不同的端口，你可以复制它并更改端口，而那些想要使用默认端口的人可以简单地符号链接到它。

更新：

我们最近改用另一种方法，即使用环境配置。

默认情况下，Angular 有一个 dev 和 prod 环境，在 .angular-cli.json

中指定

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

在这些文件中，指定 API 路径：

environment.ts

export const environment = {
    production: false,
    apiUrl: '//localhost:8000'
};

environment.prod.ts

export const environment = {
    production: true,
    apiUrl: '//my-api-domain.tld'
};

您可以根据需要添加任意数量的环境（例如，用于测试、测试版等）。在 Angular 中，您可以通过导入来使用环境：

import {environment} from '../environments/environment';

但我建议按照这个答案创建一个配置服务：https://stackoverflow.com/a/43193574/7933618

【讨论】：

【解决方案2】：

我最终使用了另一个后端。在我的例子中，nodeJS 服务器是最好、快速和最简单的解决方案。

【讨论】：