时间戳

首页 > 解决方案 > Elastic Beanstalk：从 SPA 中删除 hashbang url

angularjs - Elastic Beanstalk：从 SPA 中删除 hashbang url

问题描述

我有一个使用 Elastic Beanstalk 托管的 AngularJS 应用程序，我想从 url 中删除 hashbangs (#!)，但是在使用配置文件对 Apache 服务器进行必要的修改时遇到了麻烦。

我在我的 Angular 应用程序中启用了 html5mode，我目前在我的 .ebextensions 目录中有以下配置文件

files:
  "/etc/httpd/conf.d/wsgirewrite.conf":
    mode: "000644"
    owner: root
    group: root
    content: |
        RewriteEngine On  
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
        RewriteRule ^ - [L]

        RewriteRule ^ /index.html

在我重新加载页面并且我得到一个 404 指示重写规则不起作用之前，没有 hashbangs 一切正常。

如果可能的话，我想避免任何涉及 ssh、复制和修改默认配置之一的解决方案，因为如果 AWS 在未来更改任何默认配置，这可能会使维护成为一场噩梦

标签： angularjsapacheamazon-web-servicesamazon-elastic-beanstalk

解决方案

Hashbang 是旧浏览器的后备机制，不支持 HTML5。检查插图：

Hashbang 回退

您可能正在寻找的是如何在 AngularJS 中配置“漂亮的 URL”。除了启用 HTML5 模式（您似乎已经这样做了：）之外$locationProvider.html5Mode(true)，您还需要<base href="/">在您的 中配置标签<head>，为文档中的所有相对 URL 指定基本 URL/目标。

注意：对于不支持 HTML5 History API 的浏览器，$location 服务将自动回退到 hashbang 方法。

根据 Angular 的文档，没有 #，url 看起来更好，但它也需要服务器端重写。这是httpd.conf他们为Apache服务器提供的示例：

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

由于您使用的是Beanstalk，因此您需要httpd.conf通过ebextensions进行配置。Apache 有两个可用的选项：

  • 要完全覆盖Elastic Beanstalk 默认 Apache 配置，请在源包中包含一个配置，位于.ebextensions/httpd/conf/httpd.conf.
  • 要扩展Elastic Beanstalk 默认 Apache 配置，请将 .conf 配置文件添加到.ebextensions/httpd/conf.d应用程序源包中命名的文件夹（例如.ebextensions/httpd/conf.d/port5000.conf）。

我会推荐扩展选项。

参考：

https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/java-tomcat-proxy.html

https://docs.aws.amazon.com/pt_br/elasticbeanstalk/latest/dg/ebextensions.html

推荐阅读