Elastic Beanstalk：从 SPA 中删除 hashbang url答案

【问题标题】：Elastic Beanstalk: remove hashbang urls from SPAElastic Beanstalk：从 SPA 中删除 hashbang url
【发布时间】：2019-02-11 05:19:41
【问题描述】：

我有一个使用 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

在没有 hashbang 的情况下一切正常，直到我重新加载页面并收到 404 指示重写规则不起作用。

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

【问题讨论】：

您是如何部署应用程序的？ eb cli？还是通过控制台？
使用 eb cli 部署
并且您已更改本地开发环境的配置以删除 hastags ？
不，我也不知道该怎么做。我在本地使用 Python Flask 的开发服务器，因此修改它与修改 prod apache 服务器不同，让它在 prod 中工作是当务之急，所以只是没有投入时间

标签： angularjs apache amazon-web-services amazon-elastic-beanstalk

【解决方案1】：

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

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

注意：对于不支持 HTML5 History 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

【讨论】：

问题不是从 url 中删除 hashbang - 我能够做到这一点，因为我已经启用了 html5 模式并设置了基本 href - 问题是我尝试时得到的 404刷新页面。请参阅：stackoverflow.com/questions/16569841/… 和 stackoverflow.com/questions/17895675/…
不走运，我去了扩展路线并在 .ebextensions 下创建了目录 httpd/conf.d/。一切都很好，没有#！但是当我重新加载时，我得到相同的 404
您确定您使用的是 Apache 吗？你用什么语言写你的代码？ php？ Python？爪哇？推荐因服务器而异：github.com/angular-ui/ui-router/wiki/…
另外，请确保您共享您找到的所有日志。以下是从 Beanstalk 的 EC2 请求日志的方法：docs.aws.amazon.com/elasticbeanstalk/latest/dg/…
肯定我正在使用 Apache - 我在 Python 2.7 环境中使用 Flask 应用程序，这意味着根据这些文档，服务器是带有 mod_wsgi 3.5 的 Apache 2.4.33。 docs.aws.amazon.com/elasticbeanstalk/latest/dg/…