web-dev-qa-db-ja.com

「本番」のブラウザでURLに直接アクセスすると、GatsbyJsクライアントのみのパスが404ページに移動する

Gatsbyアプリを作成して設定しましたgatsby-node.js作成クライアントのみのパス。これらはすべて、開発では正常に機能し、パスのURLに直接アクセスしますが、本番環境では機能しません。

例：

if(page.path.match(/^\/sample/)){
     page.matchPath = "/sample/:value1/:value2/:value3";
     createPage(page)
  }

アプリのデプロイにherokuを使用しています

gatsby
11
NavaneethaKrishnan Palanisamy

理由

クライアント側ルーターはこのパスを認識していますが、対応するHTMLファイルはありません。ブラウザがサイトを見ると、最初に、クライアント側ルーターを含むgatsbyによって生成された404.htmlファイルが読み込まれます。ルーターが初期化を完了すると、パスを読み取り、正しいページを読み込みます。あなたが正しい場所に行くことを意味しますが、間違ったページに着陸する0.5秒があります。

修正方法

一般的な解決策は、/sample/パスを/sample/index.htmlfileにリダイレクトするようサーバーに指示することです。これを行う方法はホストによって異なりますが、調べたい場合に備えて、さまざまなホストの手法の名前を提供します。これは通常、URL書き換えと呼ばれ、すべての主要なホスティングプラットフォームでサポートされます。

Heroku

gatsby deploy documentation のHerokuセクションでは、「カスタムルート」のサポートが組み込まれている heroku-buildpack-static モジュールを使用することを推奨しています。このような構文：

{
  "routes": {
    "/sample/**": "sample/index.html",
  }
}

AWS Amplify

AWS Amplifyコンソールでリダイレクトを追加する必要があります。この例では、パラメーターは次のとおりです。

  • ソースURI：/sample/<*>
  • ターゲットURI：/sample/index.html
  • タイプ：200
14
Jamund Ferguson

パブリックフォルダーを調べて、作成したクライアントルートのインデックスファイルを見つけました

netlifyの場合、ルートのnetlify.tomlファイルに以下を追加しました。


[[redirects]]
  from = "/user/dashboard/"
  to = "/user/index.html"
  status = 200
0
Stefan T