如何在开发区中一起运行Angular2(前端)和Symfony3(后端API)?

问题描述 投票:0回答:2

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

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

为了与我的MYSQL数据库进行通信,我在名为'/ api'的目录中使用了单个php文件。我在angular-cli.json文件中将此文件夹添加到我的资源中,因此在运行app local时,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)。

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

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

我想保持这个项目文件夹结构保持干净: - projectname(root)--- frontend -----(所有目录/文件来自angular)---后端-----(来自api的所有目录-platform / symfony3)

此致

着陆器

apache angular symfony nginx
2个回答
1
投票

在同一个域(f.ex. localhost)上运行这两个应用程序没问题,但是它们需要在不同的端口上运行。在你的情况下,angular运行在4200,你的PHP应用程序运行在8000.你可以使用代理配置角度,代理将请求传递给http://localhost:4200/apihttp://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有一个devprod环境,在.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.用于测试,测试版等)。在angular中,您可以通过导入来使用环境:

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

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.