託管AWS S3存儲上的angularjs應用程序

我們正試圖在S3存儲上託管我們的angularjs應用程序，應用程序似乎在部署時沒有任何錯誤地正確呈現。我們使用的角度應用程序，運行html5mode啓用乾淨的URL。託管AWS S3存儲上的angularjs應用程序

我們添加下面的規則到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>

請指教？

來源

2015-05-09 Mo J. Mughrabi

這哪裏是'.htaccess'文件你指的是？ S3不使用'.htaccess'，所以如果它在S3中，它什麼都不會做。 –

首先，你應該改變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

來源

2015-11-26 14:29:09 ericluwj

託管AWS S3存儲上的angularjs應用程序

回答

相關問題