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

Question

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

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

具体：在开发区运行一个debug-webserver，我的angular应用程序运行在eq localhost上，而我的symfony3/api-平台运行在eq localhost/api上，在同一时间、同一域和同一端口上，是否可能？

我想保持这个项目文件夹结构以保持干净:-projectname（root）----frontend----（来自angular的所有目录/文件）----backend-----（来自api-platform/symfony3的所有目录）

Answer 1

在同一个域（例如localhost）上运行这两个应用程序没有问题，但它们需要在不同的端口上运行。在您的例子中，angular在4200上运行，而您的PHP应用程序在8000上运行。您可以使用代理来配置angular，代理将向http://localhost:4200/api发送的请求传递到http://localhost:8000/api

在您的角根目录(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
}

"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'
};

您可以根据需要添加任意多的环境（例如html" target="_blank">测试、beta等）。在angular中，您可以通过导入环境来使用它：

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

但我建议按照以下答案创建配置服务:https://stackoverflow.com/a/43193574/7933618