実現したいこと
前提
Node.jsとReactでWebアプリを開発して、Herokuでデプロイを試みています。
HerokuでのDyno TypesはBasicを使用しています。
フロントエンドは、ルートディレクトリで
バックエンドは、serverディレクトリ配下にあります。
ディレクトリ構造は概ね以下のようになっています。
MyProjectRoot/
├── build/
├── node_modules/
├── package.json
├── package-lock.json
├── public/
├── Procfile
├── src/
│ ├── App.js
│ └── index.js
└── server/
├── node_modules/
├── package.json
├── package-lock.json
└── index.js
発生している問題・エラーメッセージ
2023-09-18T04:40:57.634875+00:00 heroku[web.1]: Starting process with command `node server/index.js` 2023-09-18T04:40:58.849630+00:00 app[web.1]: node:internal/modules/cjs/loader:1080 2023-09-18T04:40:58.849651+00:00 app[web.1]: throw err; 2023-09-18T04:40:58.849651+00:00 app[web.1]: ^ 2023-09-18T04:40:58.849651+00:00 app[web.1]: 2023-09-18T04:40:58.849651+00:00 app[web.1]: Error: Cannot find module 'cors' 2023-09-18T04:40:58.849651+00:00 app[web.1]: Require stack: 2023-09-18T04:40:58.849653+00:00 app[web.1]: - /app/server/index.js 2023-09-18T04:40:58.849656+00:00 app[web.1]: at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15) 2023-09-18T04:40:58.849657+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:922:27) 2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1143:19) 2023-09-18T04:40:58.849658+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:121:18) 2023-09-18T04:40:58.849658+00:00 app[web.1]: at Object.<anonymous> (/app/server/index.js:7:14) 2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1256:14) 2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) 2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:1119:32) 2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:960:12) 2023-09-18T04:40:58.849661+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) { 2023-09-18T04:40:58.849663+00:00 app[web.1]: code: 'MODULE_NOT_FOUND', 2023-09-18T04:40:58.849663+00:00 app[web.1]: requireStack: [ '/app/server/index.js' ] 2023-09-18T04:40:58.849663+00:00 app[web.1]: } 2023-09-18T04:40:58.853044+00:00 app[web.1]: 2023-09-18T04:40:58.853046+00:00 app[web.1]: Node.js v18.17.1 2023-09-18T04:40:58.966012+00:00 heroku[web.1]: Process exited with status 1 2023-09-18T04:40:58.998730+00:00 heroku[web.1]: State changed from starting to crashed 2023-09-18T04:51:25.065554+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=xxxxxxx.herokuapp.com request_id=fa84c2bb-1795-4c08-be57-c4cfd1a0dee3 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https 2023-09-18T04:51:25.371635+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=xxxxxxx.herokuapp.com request_id=3c078552-a36e-4cba-bc5f-aa1fdfe21750 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https``` ### 該当のソースコード --- index.js const he = require('he'); const express = require('express'); const path = require('path'); const cors = require('cors'); const axios = require('axios'); const database = require('./database'); const app = express(); app.use(cors()); app.use(express.json()); app.use(express.static(path.join(__dirname, '..', 'build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '..', 'build', 'index.html')); }); const PORT = process.env.PORT || 3001; app.listen(PORT, () => console.log(`Server listening on port ${PORT}`)); --- server配下のpackage.json { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node index.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "bcrypt": "^5.1.0", "cors": "^2.8.5", "date-fns-tz": "^2.0.0", "dotenv": "^16.3.1", "express": "^4.18.2", "firebase": "^10.3.0", "firebase-admin": "^11.10.1", "he": "^1.2.0", "jsonwebtoken": "^9.0.1", "pg": "^8.11.3", "sequelize": "^6.33.0", "sequelize-cli": "^6.6.1", "uuid": "^9.0.0" } } --- ルートディレクトリのpackage.json { "name": "myapp", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@hookform/resolvers": "^3.1.1", "@mui/icons-material": "^5.14.1", "@mui/material": "^5.14.2", "@reduxjs/toolkit": "^1.9.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.4.0", "dompurify": "^3.0.5", "firebase": "^10.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.45.2", "react-query": "^3.39.3", "react-quill": "^2.0.0", "react-router-dom": "^6.14.1", "react-scripts": "5.0.1", "redux": "^4.2.1", "redux-thunk": "^2.4.2", "uuid": "^9.0.0", "web-vitals": "^2.1.4", "yup": "^1.2.0" }, "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" ] } } --- Procfile web: node server/index.js --- .gitignore # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /server/node_modules /.pnp .pnp.js # testing /coverage # production /build # misc .DS_Store .env .env.local .env.development.local .env.test.local .env.production.local /server/.env npm-debug.log* yarn-debug.log* yarn-error.log*
試したこと
Procfileを下記のように書き換えました。
web: cd server && node index.js
また、ルートディレクトリのpackage.jsonにスクリプトを追加しましたが、事象は変わりませんでした。
"scripts": { "postinstall": "cd server && npm install" }
補足情報（FW/ツールのバージョンなど）
ローカル環境のver
Node v18.16.1
React v18.2.0
0 コメント