web-dev-qa-db-ja.com

githubページにデプロイされたcreate-react-appのリンクに対して404を取得する

カスタムドメインを使用して、GitHubページの相対パスにcreate-react-appをデプロイしようとしています。例えば。 www.example.com/myproject

react-router-domreact-router-reduxreact-router-bootstrapを使用しています

ホームページをhttp://www.example.com/myprojectpackages.jsonに設定し(homepage = "."も試しました)、履歴のベース名も設定しました:

...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

デプロイされたアプリはwww.mydomain.com/myprojectで動作し、アプリのリンクからナビゲートできます。

しかし、パスを直接入力しようとすると(例:www.example.com/myproject/account)、またはサブページでブラウザを更新すると、404が発生しました。

長期的な目標は、開発環境と製品環境に異なる相対パスを設定することです この答え で説明されていますが、最初に展開で機能させる必要があります。

10
szerte

問題:URLがサーバー側で評価される

ブラウザーのアドレスバーに新しいURLを入力するか、ページを更新すると、ブラウザーはそのURLのサーバー(この場合はGitHubページサーバー)を要求します。この時点では、クライアント側ルーター(react-router)はまだそのページに読み込まれていないため、アクションを実行できません。これで、サーバーは/accountsに一致するルートを検索します(ルーティングはクライアント側で行われるため)見つからず、404を返します。

解決

サーバーを制御できた場合は、すべてのルートにindex.htmlを提供できます。これはcreate react appのドキュメント クライアント側のルーティングでアプリを提供する で説明されています。 GitHubページの場合はそのコントロールがないため、これらを試すことができます。

簡単なソリューション

browserHistoryからhashHistoryに切り替えますこの変更により、URLは次のようになります

www.example.com/myproject/account

www.example.com/myproject/#/account

だから少し厄介です。

難しいソリューション

すべてのリクエストでGitHubページを取得してindex.htmlにリダイレクトします。基本的に、404.htmlにリダイレクトするコードを含むindex.htmlをビルドディレクトリに追加する必要があります。 その方法の詳細

作成Reactアプリには GitHubページのクライアント側ルーティングに関するドキュメント も含まれています

15
sudo bangbang

その理由は、ブラウザーがまだルーティングコードをキャッシュしていない可能性があるため、インデックス以外のルートに移動すると404エラーが発生するためです。

誰かがZEIT Nowを使用してデプロイしている場合の注意点(ghページは似ていますが)。私は(しばらくして)なんとかそれを修正する方法を考え出すことに成功しました。少し苦労したので、行き詰まった人のために記事を書くことにしました。

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb

0
Jack