Question

我有一个使用Elastic Beanstalk托管的AngularJS应用，我想从网址中删除哈希符号（＃！），但是在使用配置文件对Apache服务器进行必要的修改时遇到了麻烦。

我已在我的角度应用程序中启用了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指示重写规则无效为止。

如果可能的话，我想避免使用任何涉及ssh，复制和修改默认配置之一的解决方案，因为如果AWS改变了默认设置，这可能会使维护工作陷入噩梦

Answer 1

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

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

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

根据Angular的文档，如果没有＃，则该URL看起来要好得多，但它也需要服务器端重写。这是他们针对 Apache 服务器的httpd.conf示例：

<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 ，因此需要通过ebextensions配置httpd.conf。适用于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

Elastic Beanstalk：从SPA删除hashbang网址

1 个答案: