Question

我们正在尝试在S3存储上托管我们的angularjs应用程序，app似乎在部署时没有任何错误正确呈现。我们使用的角度应用程序运行时启用了html5mode以获得干净的URL。

我们在s3存储中添加了以下规则

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>example.com</HostName>
            <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

我们遇到的问题很奇怪，当访问着陆页时，它可以正常工作，当点击任何链接时，它会将您带到正确的目的地。但是，当刷新任何路径url时，它返回404

我尝试根据我在线阅读的几条建议更新.htaccess。添加以下

Options +FollowSymLinks

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
    RewriteRule ^(.*)       /index.html/#/$1
</IfModule>

请指教？

Answer 1

首先，您应该将example.com更改为您自己的域名。

其次，我不确定你是否这样做了，但你需要将哈希前缀设置为!：

angular.module(app, [])
  .config(function($locationProvider) {
    // this line is to be placed in your app config
    $locationProvider.html5Mode(true).hashPrefix('!');  
  });

要了解规则的工作原理，如果您尝试使用URL http://example.com/login/，AWS S3文件服务器将尝试在login文件夹中查找索引文件，但由于该文件不存在，它将返回404错误。

该规则将导致AWS S3捕获404错误，然后将请求重定向到http://example.com/#!login/。现在，AWS S3文件服务器将尝试在根目录中查找索引文件，因为文件服务器自然会忽略散列部分，因此它只能理解URL http://example.com/的一部分。因此，您的AngularJS应用程序文件index.html将被加载，AngularJS将解析URL并正确加载。

.htaccess文件实际上与此无关，并且不执行任何操作，因为当您部署到AWS S3上时，您使用的是AWS S3文件服务器，而不是您自己的服务器。

您可以在此处阅读更多内容：http://www.ericluwj.com/2015/11/10/angularjs-with-html5-mode-on-s3.html

在AWS S3存储上托管angularjs应用程序

1 个答案: