web-dev-qa-db-ja.com

HerokuへのCreate-React-Appのデプロイが `react-scripts：notfound`で失敗しました

Create-React-Appを使用してReactJSアプリケーションを開発しています。これは、APIも提供するNode/Expressサーバーから提供されます。 node/JSビルドパックを使用してサーバー全体をHerokuにデプロイし、@ marsが提案するようにノードnpm run buildファイルからpostinstallスクリプトでCRAビルドステップpackage.jsonを取得しようとします この号では 。

問題は、Herokuのデプロイがこのエラーで失敗することです。このエラーはローカルで発生することがありますが、web_appのnpm installが問題を解決していますが、Herokuで実行した場合は解決しないことに注意してください。関連する質問が2つあります。

  1. APIとCreate-React-Appアプリケーションの両方を提供するNode/ExpressアプリをHerokuにデプロイするにはどうすればよいですか？ビルドディレクトリをコミットすることはできますが、これは実際には正しい方法ではありません。
  2. なぜreact-scriptsが消えて、npm installを複数回実行する必要があるのですか。
expressherokucreate-react-app
6
Philippe Cohen

@ johnnycon-

これはまさに問題であり、私は 火星 から回答を受け取りました github問題の投稿 ：

@ philjoseph、react-scriptsは（デフォルトで）CRAアプリのdevDependencyですが、Heroku Node buildpackには環境NODE_ENV = productionがあり、npmインストールでdevDepsがスキップされます。

これらのdevDepsもインストールするには：

npm install --only = dev && npm install && npm run build

彼はまた、この優れたリポジトリを指摘しました： https://github.com/mars/heroku-cra-node

私はこれに従いました、そしてそれは魅力のように働きます:)

23
Philippe Cohen

開発と本番の両方で「react-scripts」が必要なので、「react-scripts」：「1.0.16」を「devDependencies」から "dependencies"なので、herokuはそれを無視しません。

9
Alexander Cherednichenko

React-scriptsはpackage.jsonでdevDependencyまたは通常の依存関係として宣言されていますか？ Herokuをベースに構築していて、herokuがenv変数を本番環境として読み取っているため（ここでは想定しています）、react-scriptsはインストールされません。通常の依存関係としてreact-scriptsを移動して、再試行してください。

他のクラウドプロバイダーでは、このパスをたどらない可能性がありますが、Herokuでは、これが私が見つけた最も抵抗の少ないパスです。この記事では、シナリオについてもう少し詳しく説明します。 https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851

1
johnnycon

Package.jsonファイルのスクリプトがどのように見えるかを共有できますか？昨日実際にHerokuにデプロイしましたが、問題なく動作しているようです。

依存関係がpackage.jsonに正しく追加されていない可能性があります。

これが私のスクリプトの外観です（scss/less/sassがない場合は、最初の2つのスクリプトを無視してください）：

"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "npm run start:server",
"watch": "npm-run-all --parallel watch-css start:*",
"start:server": "node server/server.js",
"start:client": "react-scripts start",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"}

Hotrealodingを利用するために開発で実行しているとき、私は実行します

npm run watch

そしてPRODの場合は実行します

npm run build

そして、Herokuにデプロイします。別のターミナルウィンドウでHerokuのログを確認して、展開の問題点を確認してください。

heroku logsを使用するだけで、ログの最後の100行が表示されます。

または、ログをリアルタイムで追跡するには：heroku logs -t。

0
Jaime Rosales

私はまったく同じことを試みていましたcreate-react-appプロジェクトをherokuにデプロイし、react-scripts not found something...を取得していました。

Herokuはscriptsをpackage.jsonに読み込み、実行できません。

この問題を克服するための鍵は、「scripts」フォルダを「作成/公開」することです。これはデフォルトでですcreate-react-appは、物事を単純にするために、それを作成しません。

したがって、ejectコマンド$npm run ejectを実行すると、scriptsフォルダーがconfigフォルダーと同じ長さで作成されます。

その後、herokuスクリプトを再度実行できます。 $ git Push heroku masterそしてうまくいけばHerokuにすべてをデプロイします。

create-react-appドキュメント のejectスクリプトに関する詳細情報

これがお役に立てば幸いです。

0
Theo Itzaris

Specify Node Environment使用するherokuのバージョンをherokuに指示します。デフォルトでは、herokuはアプリをクラッシュさせる古いバージョンを使用します。2つのpackage.jsonファイルがあります。 1つはクライアントにあり、もう1つはエクスプレスサーバー側にあります。エクスプレスサーバー側では、これをpackage.jsonに追加します。

"engines": {
    "node": "12.9.1",
    "npm": "6.10.2" },

開始スクリプトを指定

 Instruct heroku what command it should run to start up our server. Add this to the server side package.json

"start"： "node index.js"、

INSTALL HEROKU CLI

HerokuCliをインストールする

Sudo apt-get update
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh  or Sudo snap install heroku

Macosでは

brew install heroku cli

デフォルトでは、herokuはgitベースのデプロイメント手順またはワークフローを使用します。

Git init
Git add . 
Git commit -m “initial commit”

Heroku login
Heroku create nameOfTheApp

 https://git.heroku.com/nameOfTheApp.git

このリンクが展開ターゲットです。これは、ローカルサーバーをプッシュできるgitリポジトリです。

Git remote add heroku https://git.heroku.com/nameOfTheApp.git

Git Push heroku master
0
Yilmaz