Question

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

此时我正在开发一个Angular4应用程序。我正在使用“ng build --watch”运行我的应用程序，并且本地PHP Web服务器指向我的角度应用程序的'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上运行，而我的角度应用程序在localhost：4200上运行。

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

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

具体：是否可以在开发区运行一个debug-webserver，我的角色应用程序在eq localhost上运行，而我的symfony3 / api-platform同时在同一个localhost / api上运行，相同的域和相同的端口？ / p>

我想保留此项目文件夹结构以保持其清洁： - projectname（root） - - 前端 -----（角度的所有目录/文件） ---后端 -----（来自api-platform / symfony3的所有目录）

此致

兰德

Answer 1

在同一个域（f.ex. localhost）上运行这两个应用程序没问题，但是它们需要在不同的端口上运行。在你的情况下，angular运行在4200，你的PHP应用程序运行在8000.你可以使用代理配置角度，代理将请求传递到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
}

现在使用npm start而不是ng serve

运行webpack服务器

就个人而言，我git忽略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'
};

您可以根据需要添加任意数量的环境（f.ex.用于测试，测试版等）。在角度中，您可以通过导入来使用环境：

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

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

Answer 2

我最后使用了另一个后端。就我而言，nodeJS服务器是最好，最快速，最简单的解决方案。

如何在开发区中一起运行Angular2（前端）和Symfony3（后端API）？

2 个答案: