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

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

ただいまの
回答率

89.06%

HEROKUにてデプロイしたファィルを開くことができません。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 852

ShoSakata

score 20

以下のサイトをもとにアプリをデプロイし、「heroku open」をコマンドに叩いたところ、「Application error」の画面が開きました。
https://qiita.com/Arashi/items/b2f2e01259238235e187

herokuのログは以下となります。「browser-sync: not found」とログに記載されていますが、ローカルの環境では
「browser-sync start --server --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'」や「npm start」を叩くことで問題なく起動できます。

2019-03-05T07:50:29.685006+00:00 app[api]: Set NPM_CONFIG_PRODUCTION config vars by user sacashow@gmail.com
2019-03-05T07:50:36.677058+00:00 heroku[web.1]: Starting process with command npm start
2019-03-05T07:50:39.389527+00:00 heroku[web.1]: State changed from starting to crashed
2019-03-05T07:50:39.283409+00:00 app[web.1]: 
2019-03-05T07:50:39.283434+00:00 app[web.1]: > tutorlinerweb@1.0.0 start /app
2019-03-05T07:50:39.283437+00:00 app[web.1]: > browser-sync start --server --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'
2019-03-05T07:50:39.283438+00:00 app[web.1]: 
2019-03-05T07:50:39.288430+00:00 app[web.1]: sh: 1: browser-sync: not found
2019-03-05T07:50:39.293559+00:00 app[web.1]: npm ERR! file sh
2019-03-05T07:50:39.293852+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2019-03-05T07:50:39.294045+00:00 app[web.1]: npm ERR! errno ENOENT
2019-03-05T07:50:39.294225+00:00 app[web.1]: npm ERR! syscall spawn
2019-03-05T07:50:39.296681+00:00 app[web.1]: npm ERR! tutorlinerweb@1.0.0 start: browser-sync start --server --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'
2019-03-05T07:50:39.296794+00:00 app[web.1]: npm ERR! spawn ENOENT
2019-03-05T07:50:39.297031+00:00 app[web.1]: npm ERR!
2019-03-05T07:50:39.297190+00:00 app[web.1]: npm ERR! Failed at the tutorlinerweb@1.0.0 start script.
2019-03-05T07:50:39.297455+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2019-03-05T07:50:39.305630+00:00 app[web.1]: 
2019-03-05T07:50:39.305840+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2019-03-05T07:50:39.305958+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2019-03-05T07_50_39_299Z-debug.log
2019-03-05T07:50:39.372386+00:00 heroku[web.1]: Process exited with status 1
2019-03-05T07:50:40.565802+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=b4dd45ac-bab6-45d3-8d1d-5816629bf1fb fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
2019-03-05T07:50:40.913928+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=gentle-oasis-91150.herokuapp.com request_id=5b8239c8-9977-4bca-abc6-a9ca249e479b fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
2019-03-05T08:01:15.819079+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=bbe5f3de-c745-4825-9630-81e830fbd9b0 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
2019-03-05T08:01:16.092657+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=gentle-oasis-91150.herokuapp.com request_id=58c19053-bd1a-405a-8486-dc202a377d06 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https

お手数ですが、アドバイスをいただけると幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kazto

    2019/03/05 17:26

    package.jsonの内容はどのようになっていますでしょうか。追記をお願いします。

    キャンセル

  • ShoSakata

    2019/03/05 17:58

    以下がpackage.jsonの中身となります。
    {
    "name": "tutorlinerweb",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
    "express": "^4.16.4",
    "mysql": "^2.16.0",
    "nodemailer": "^5.1.1",
    "require": "^2.4.20"
    },
    "devDependencies": {},
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "browser-sync start --server --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'"
    },
    "author": "",
    "license": "ISC"
    }

    キャンセル

回答 1

checkベストアンサー

0

package.json内、dependenciesにbrowser-syncが入っていませんね。
おそらくnpm installした時に--saveオプションなしでインストールしてしまったことが原因かと思われます。

herokuではpackage.jsonの内容を元に必要なパッケージをインストールします。

npm i --save browser-syncでpackage.jsonを更新し、それをherokuにデプロイしてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/05 20:12

    ご回答ありがとうございます。 --no-openを追加することで、「Couldn't open browser」のエラーはログに出てこなくなりました。ただ依然として画面が開くことはなく、
    以下のログによると、「Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch」とあるため、portが原因で画面が開かない模様です。
    browserSyncに設定すべきportが不明のため、何をportに設定すべきかアドバイス頂けると助かります。

    2019-03-05T10:56:12.554740+00:00 heroku[web.1]: Starting process with command `npm start`
    2019-03-05T10:56:15.108025+00:00 app[web.1]:
    2019-03-05T10:56:15.108045+00:00 app[web.1]: > tutorlinerweb@1.0.0 start /app
    2019-03-05T10:56:15.108058+00:00 app[web.1]: > browser-sync start --server --no-open --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'
    2019-03-05T10:56:15.108061+00:00 app[web.1]:
    2019-03-05T10:56:16.104029+00:00 app[web.1]: [Browsersync] Access URLs:
    2019-03-05T10:56:16.105130+00:00 app[web.1]: ---------------------------------------
    2019-03-05T10:56:16.105851+00:00 app[web.1]: Local: http://localhost:3002
    2019-03-05T10:56:16.106103+00:00 app[web.1]: External: http://172.18.180.186:3002
    2019-03-05T10:56:16.109358+00:00 app[web.1]: ---------------------------------------
    2019-03-05T10:56:16.109555+00:00 app[web.1]: UI: http://localhost:3001
    2019-03-05T10:56:16.109822+00:00 app[web.1]: UI External: http://localhost:3001
    2019-03-05T10:56:16.109993+00:00 app[web.1]: ---------------------------------------
    2019-03-05T10:56:16.110371+00:00 app[web.1]: [Browsersync] Serving files from: ./
    2019-03-05T10:56:16.110901+00:00 app[web.1]: [Browsersync] Watching files...
    2019-03-05T10:56:31.707564+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=4e3ddb25-c3e7-4747-9c02-bf4b059d3901 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
    2019-03-05T10:57:12.683852+00:00 heroku[web.1]: State changed from starting to crashed
    2019-03-05T10:57:12.597152+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
    2019-03-05T10:57:12.597273+00:00 heroku[web.1]: Stopping process with SIGKILL
    2019-03-05T10:57:12.668726+00:00 heroku[web.1]: Process exited with status 137
    2019-03-05T10:57:14.345924+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=8c74daef-c2ec-4ad8-ad06-b69a05386a28 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
    2019-03-05T10:57:14.978155+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=ed3b2fa0-11fa-45ca-b314-032ba9832bfe fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https
    2019-03-05T10:57:16.191749+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=gentle-oasis-91150.herokuapp.com request_id=30c915c0-de74-4e32-8a22-8075d7b271b3 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https

    キャンセル

  • 2019/03/05 21:49

    https://qiita.com/kenju/items/1d61c9fb45496feed1bf

    公開するポートを環境変数から読む必要があるようです。

    「--port $npm_package_config_PORT」をさらに追加してみてください。

    キャンセル

  • 2019/03/06 23:44

    portが動的なんですね。
    無事画面を開くことができました。ありがとうございます。

    キャンセル

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る