Elastic Beanstalk：从SPA中删除hashbang网址

问题描述 投票：4回答：1

我有一个使用Elastic Beanstalk托管的AngularJS应用程序，我想从url中删除hashbangs（＃！），但是在使用配置文件对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

在我重新加载页面之前，一切正常，没有hashbang，我得到一个404，表明重写规则不起作用。

如果可能的话，我想避免任何涉及ssh，复制和修改其中一个默认配置的解决方案，因为如果AWS改变了任何默认设置，这可能会使维护成为一场噩梦

angularjs apache amazon-web-services elastic-beanstalk
1个回答
0
投票

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

Hashbang fallback

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

注意：$ location服务将自动回退到不支持HTML5 History API的浏览器的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，因此需要通过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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.