アプリケーションがS3でホストされている静的コンテンツである場合の角度コンポーネントへのルーティング

Question

現在、Angular4フロントエンドでアプリケーションを開発中です。私の生産目標は、フロントエンドをAWS S3バケットから静的コンテンツとして提供することです。

実際には、アプリケーションの大きな問題である1つの例外がすべて発生しています。ユーザーが登録すると、電子メールアドレスを確認するリンクが付いた電子メールが送信されます。フロントエンドとして

https://myhostname.com/user/userguid?token=tokenvalue

のみページのindex.htmlが実際に存在する、静的なコンテンツとして提供していますので、このリンクは今404

生成クリックすると、次のようにリンクの形式はいくつかの研究の後、私は次のステップを踏んだ。 S3では、私は次のルーティングルールを持っています。

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

また、すべての404エラーをindex.htmlにリダイレクトするCloudFrontルールがあります。

誰かがmyhostname.com/user/userguid?token=tokenvalueにナビゲートすると、URLはmyhostname.com/#!/user/userguid?token=tokenvalueに書き直されますが、ユーザーはリダイレクトされますmyhostname.com/home（別名index.html）。

ハングル/フラグメントの値を受け取り、実際にそのコンポーネントにルーティングするために、角度アプリにどのような変更を加えることができますか？（リダイレクトするだけで、ユーザーはindex.htmlに戻ります）

フロントエンドが 'npm start'経由で提供されているときの開発では、うまくいきます。皆さんありがとう。

Answer 1

LocationHashStrategyを使用している場合を除き、プレフィックスを#!に変更する必要はありません。これはあなたのケースではありません。

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

をそして、それは動作するはずです：だから、削除します。

Answer 2

これは最終的な解決策です。 Edmundoへの主要小道具。

S3バケットを設定するときは、[静的ウェブサイトホスティング] - > [プロパティ]で、インデックス文書とエラー文書の両方を 'index.html'にする必要があります。 リダイレクト規則が空白であることを確認してください！

CloudFlareでは、配布を有効にしてオンラインにした後、エラーページに移動してカスタムエラー応答を作成します。 404エラーの場合は、/index.htmlにリダイレクトして200 OKステータスコードを返します。

これは魅力的です！

Answer 3

ザック、あなたが選んだアプローチ（インデックスドキュメントとエラードキュメントはどちらも 'index.html'にする必要があります）は、残念ながら悪いアプローチです。

あなたのユーザーが404を取得してリダイレクトすると、あなたのSEOが傷つきます。あなたのサイトがフィッシングであると思ってChromeがペナルティを受け、Safariのサポートが打ちのめされています。

はるかに良いオプションがにある

：

1. S3バケットの前で
2. 入れCloudFrontは、クラウド前でカスタムエラー応答コードを設定し
3. をINDEX.HTMLするエラーページのリダイレクトを削除します（最も重要なこと！）/index.htmlにリダイレクトし、200 HTTP応答コード

を与えます

希望すること