ローカルでビルドしたcreatReactAppのフォルダがHeroku上でビルドされず空になっており、アプリを開くとNotFoundと表示されてしまします。
こちらのサイトを参考にデプロイしました。
こちらがサーバーからReactを表示するためのパスです。
app.use(express.static(path.join(__dirname, "../client/build"))); app.get("*", (req, res) => { res.sendFile(path.join(__dirname, "../client/build/index.html")); });
ディレクトリのpackage.jsonです
"name": "*****", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server/server.js", "heroku-postbuild": "cd client && npm install && npm run build" }, "repository": { "type": "git", "url": "git+https://github.com/*****/*****.git" }, "keywords": [], "author": "", "license": "ISC", "bugs": { "url": "https://github.com/*****/*****/issues" } }
serverフォルダのpackage.jsonです
{ "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "devStart": "nodemon server.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "body-parser": "^1.19.0", "cors": "^2.8.5", "express": "^4.17.1", "mysql": "^2.18.1", "nodemon": "^2.0.7" } }
creatReactAppのpackage.jsonです
{ "name": "****", "version": "0.1.0", "private": true, "proxy": "http://localhost:3001", "dependencies": { "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", "axios": "^0.21.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }
Heroku上にcreatReactAppをビルドするにはどうすればいいでしょう?
上記の参考サイトにある対応としてcreatReactAppの.gitフォルダを削除し、add,commitしましたがビルドされませんでした。
ご教示いただけると幸いです。
package.json の scripts のところに heroku-postbuild を追加しましたか?
hoshi-takanoriさん、コメントありがというございます!
はい|ディレクトリのpackage.jsonのスクリプトに記載しております!
ディレクトリのpackage.jsonのコードを追加させていただきました!!
package.json の dependencies に express がありませんが、express 使ってます?
あとは、git push した時のメッセージや、heroku log で出力されるログを確認してみては。
https://qiita.com/yuichisan65/items/3154d5365a3e3fe6004c
express使用しております!
サーバーのディレクトリのpackage.jsonに記入しております。
heroku logを確認すると以下のエラーがあります。
Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'
heroku run bashでcreatReactApp(フロントフォルダ)の中身を調べると空でビルドされていません><
あなたの回答
tips
プレビュー