如何从 Symfony 应用程序为 Angular SPA 提供 index.html 文件？答案

【问题标题】：How to serve index.html file for an Angular SPA from a Symfony application?如何从 Symfony 应用程序为 Angular SPA 提供 index.html 文件？
【发布时间】：2017-02-27 22:56:23
【问题描述】：

我一直在研究几周前开始的单页应用程序项目。到目前为止，我们一直专注于项目的前端部分，它使用 AngularJS 构建，它允许验证预计的最终应用程序的许多方面。

我们现在正在设置网络服务和后端部分。由于我无法控制的原因，我与之签约的工作室选择了 Symfony。因此，如果我使用通常的 Java+Spring 引导设置，我会遇到我不会遇到的配置和设置问题。

现有应用程序具有以下文件夹结构：

root-client
|--bower_components
|--images
|--libs (dist files of bower_components)
|--scripts
|--styles
|--views
|--index.html

我已经按照https://jeremycurny.com/2016/03/27/symfony3-rest-api/ 初始化了 Symfony 项目，它工作正常，返回了我设置的测试 JSON 响应。文件夹结构：

root-rest-api
|--app
|--bin
|--src
|--tests
|--var
|--vendor
|--web
|--...

这两个部分都按预期工作。

当试图让这两个部分一起运行时，问题就出现了，也就是说，根据我在 Symfony 文档中读到的建议，静态文件将从 web 提供，我将 root-client 下的所有内容移到 @ 下987654328@.

问题是无法再从网络浏览器访问index.html。更清楚地说，http://localhost/ 用于启动应用程序。在移动web 下的“静态”文件后，我现在得到了这个 JSON 响应：

{"error":{"code":404,"message":"Not Found"}}

错误的原因很容易找出：没有控制器注册到'/'路径。因此，我写了这个：

namespace AppBundle\Controller;

use FOS\RestBundle\Controller\Annotations as Rest;
use FOS\RestBundle\Controller\FOSRestController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class DefaultController extends FOSRestController
{
    /**
     * @Rest\Get("/")
     */
    public function indexAction(Request $request)
    {
        return $this->render('index.html');
    }

此代码为“/”定义了一个特定的路由，这是 this answer 指向类似问题（在 Python 环境中而不是 PHP 或 Symfony 中）所指向的。

我收到 500 HTTP 错误代码，可能是由于我对 render 的使用不当：我在网上找到的所有示例都参考了 Twig 模板，例如 the documentation about rendering templates。对我来说更不受欢迎的是，这些示例将模板放置在 app/Resources/views。

有没有办法从web 文件夹中返回现有的index.html 文件？ 我试图避免将我们所有的 HTML 片段转换为 Twig 模板，从而重新定义 Angular 分隔符。也许有一个明显的答案，但这是我使用 Symfony 的第一个项目。

如果不可能，我会将客户端和服务器部分视为不同的项目，并将它们作为架构的不同层提供服务，而不是像 Java 和 Spring 引导项目或经典 Symfony 项目那样将两者混合。

【问题讨论】：

我强烈建议您将Angular Frontend 和Symfony Backend 定义为应用程序的两个独立部分。由于您已经计划通过 REST 在前端和后端之间进行通信，因此这是一种非常常见的方法。把它混在一起总会带来一些小麻烦。

标签： php angularjs symfony fosrestbundle

【解决方案1】：

在你的情况下（Symfony 4），你总是可以使用旧的file_get_contents($index_html_path)，并发送简单的字符串响应：

    /**
     * @Route("/", name="index_page")
     */
    public function indexAction(Request $request)
    {
        return new Response(file_get_contents($index_html_path));
    }

如何获取索引 html 的路径？控制器很简单：

    $index_html_path = $this->getParameter('kernel.project_dir') . '/public/index.html';

即使如此，如果您的 index.html 很简单且很少更改（只需将内容复制到您的控制器）：

    /**
     * @Route("/", name="index_page")
     */
    public function index() {
        ?>
        <!doctype html>
        <html lang="en">
        <head>
            <title></title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        </head>
        <body>
        <div id="root"></div>
        </body>
        </html>
        <?php
        return new Response("");
    }

【讨论】：