質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1029閲覧

herokuにReact + node.js + postgresqlのアプリをデプロイしたい。

2_34_koki

総合スコア67

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

PostgreSQL

PostgreSQLはオープンソースのオブジェクトリレーショナルデータベース管理システムです。 Oracle Databaseで使われるPL/SQLを参考に実装されたビルトイン言語で、Windows、 Mac、Linux、UNIX、MSなどいくつものプラットフォームに対応しています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/04/08 03:16

昨日からずっと、下記のエラーに苦しめられています。色々調べて考えられることは全てやりました。誰か助けてください。

2020-04-08T03:10:35.020938+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=heroku-with-todos.herokuapp.com request_id=c70b705b-15c5-4c15-a31c-20311149ef1e fwd="119.106.99.159" dyno= connect= service= status=503 bytes= protocol=https 2020-04-08T03:10:35.114771+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=heroku-with-todos.herokuapp.com request_id=4206bc2c-91b4-4ceb-9159-94965c3f45b2 fwd="119.106.99.159" dyno= connect= service= status=503 bytes= protocol=https

サーバーサイドのリッスンポートもprocess.env.port | 3000にしました。
一応、下記がpackage.jsonです。

{ "name": "react-todo-heroku", "version": "1.0.0", "engines": { "node": "^12.0.0" }, "description": "", "main": "index.js", "scripts": { "server": "node src/server/server.js", "client": "webpack-dev-server --config ./config/webpack.config.dev.js --open --mode development", "build": "webpack --config ./config/webpack.config.dev.js --mode development", "dev": "NODE_ENV=development concurrently \"npm run client\" \"npm run server\"", "start": "NODE_ENV=production npm run build && npm run server", "lint": "eslint src --fix -c .eslintrc.json 'src/**/*.js'" }, "dependencies": { "@material-ui/core": "^4.9.8", "axios": "^0.19.2", "dotenv": "^8.2.0", "express": "^4.17.1", "pg": "^8.0.0", "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-eslint": "^10.1.0", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "concurrently": "^5.1.0", "css-loader": "^3.4.2", "eslint": "^6.8.0", "eslint-config-prettier": "^6.10.1", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.19.0", "html-webpack-plugin": "^4.0.4", "husky": "^4.2.3", "lint-staged": "^10.1.1", "nodemon": "^2.0.2", "prettier": "^2.0.2", "style-loader": "^1.1.3", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3", "webpack-merge": "^4.2.2" }, "pre-commit": [ "lint-staged" ], "lint-staged": { "*.{js, jsx}": [ "eslint --fix" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } } }

Procifleでweb: npm startをしています。
あと、考えられるのはclientとserverの通信のさいのプロキシの設定が間違ってるかもしれません。

const merge = require("webpack-merge"); const webpackConfig = require("./webpack.config.js"); module.exports = merge(webpackConfig, { mode: "development", devServer: { host: "https://example.herokuapp.com", proxy: { "/api": { target: "https://example.herokuapp.com:" + process.env.PORT, }, }, }, });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

process.env.port | 3000じゃなくて、
process.env.port || 3000

投稿2020/04/08 05:59

2_34_koki

総合スコア67

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問