Elastic Beanstalk：从 SPA 中删除 hashbang url
Posted
技术标签:
【中文标题】Elastic Beanstalk：从 SPA 中删除 hashbang url【英文标题】：Elastic Beanstalk: remove hashbang urls from SPA 【发布时间】：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 中工作是当务之急，所以只是没有投入时间 【参考方案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 有两个可用的选项：
.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刷新页面。请参阅：***.com/questions/16569841/… 和 ***.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/…以上是关于Elastic Beanstalk：从 SPA 中删除 hashbang url的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Amazon Elastic Beanstalk 中删除一些 Apache 设置？
从 AWS Elastic Beanstalk 实例中获取有关部署的信息
如何从 Elastic Beanstalk 环境中删除 RDS 数据层