首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在开发区域内一起运行Angular2 (前端)和Symfony3 (后端API)?

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

Stack Overflow用户
提问于 2017-09-29 15:53:56
回答 2查看 1.7K关注 0票数 0

这是我的第一个问题。我已经花了好几个小时阅读话题,但从来没有发过问题。

此时,我正在开发一个Angular4应用程序。我运行我的应用程序与"ng构建-手表“和本地PHP网络服务器指向'dist‘文件夹的我的角度应用程序。(当使用内置生动型服务器'ng serve‘时,没有可用的PHP服务器,所以我用'ng内置监视’和本地PHPStorm内建服务器修复了这个问题。)

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

在这种情况下,我能够使用相对路径来指向我的http请求。(就像POST操作到‘/api/intert.php’)。因此,在发布我的应用程序时,没有必要修改HTTP请求的路径。

但是现在我想使用一个后端框架,经过一些研究,我发现了http://api-platform.com,一个构建在Symfony3上的PHP框架。当我运行这个API时,它运行在localhost:8000上,而我的角鼓掌运行在localhost:4200上。

因此,这意味着我必须对HTTP请求使用绝对路径。(eq http://localhost:8000/api/insert.php而不是/api/intert.php)。

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

具体:是否有可能在开发区域运行调试-webserver,在eq localhost上运行我的角应用程序,在eq localhost/api上运行我的symfony3 3/api-平台,同时运行相同的域和相同的端口?

我想保持这个项目文件夹结构保持干净:- projectname (root) --前端--(所有目录/文件都是角的)--后端--( api-platform /symfony3中的所有目录)

由衷地,

着陆器

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-23 20:50:46

在同一域中运行两个应用程序(f.ex )。没有问题,但它们需要在不同的端口上运行。在您的示例中,角运行在4200上,PHP应用程序运行在8000上。您可以使用代理配置角,该代理将请求传递给http://localhost:4200/apihttp://localhost:8000/api

在您的角根目录(您的proxy.conf.json )中,创建一个文件package.json

代码语言:javascript
运行
复制
{
    "/api": {
        "target": "http://localhost:8000",
        "secure": false
    }
}

然后将package.json更改为使用此代理:

代码语言:javascript
运行
复制
"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-cli.json中指定的devprod环境。

代码语言:javascript
运行
复制
"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

在这些文件中,指定API路径:

environment.ts

代码语言:javascript
运行
复制
export const environment = {
    production: false,
    apiUrl: '//localhost:8000'
};

environment.prod.ts

代码语言:javascript
运行
复制
export const environment = {
    production: true,
    apiUrl: '//my-api-domain.tld'
};

您可以添加任意数量的环境(f.ex )。用于测试、测试等)。在角度上,您可以通过导入环境来使用它:

代码语言:javascript
运行
复制
import {environment} from '../environments/environment';

但是我建议在下面创建一个配置服务:https://stackoverflow.com/a/43193574/7933618

票数 1
EN

Stack Overflow用户

发布于 2017-10-01 20:44:26

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46492654

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档