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

以下のサイトをもとにアプリをデプロイし、「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

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

kazto

2019/03/05 08:26

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

ShoSakata

2019/03/05 08: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件

ベストアンサー

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

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

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

投稿2019/03/05 09:05

kazto

総合スコア7196

ShoSakata

2019/03/05 09:44

ご回答ありがとうございます。ご回答の通り実施したところ、先ほどのエラーはなくなりましたが、別のエラーが発生しました。内容を確認すると、BrowserSyncのopenオプションをfalseにする必要があるという認識なのですが、そもそもopenオプションを記載すべきファイルがググってもわからない状況です。お手数をおかけして申し訳ないですが、ご回答頂けると助かります。 2019-03-05T09:15:44.458204+00:00 heroku[web.1]: Starting process with command `npm start` 2019-03-05T09:15:46.735659+00:00 app[web.1]: 2019-03-05T09:15:46.735688+00:00 app[web.1]: > tutorlinerweb@1.0.0 start /app 2019-03-05T09:15:46.735693+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-05T09:15:46.735695+00:00 app[web.1]: 2019-03-05T09:15:48.181234+00:00 app[web.1]: [Browsersync] Access URLs: 2019-03-05T09:15:48.187971+00:00 app[web.1]: -------------------------------------- 2019-03-05T09:15:48.187978+00:00 app[web.1]: Local: http://localhost:3000 2019-03-05T09:15:48.187979+00:00 app[web.1]: External: http://172.17.135.58:3000 2019-03-05T09:15:48.194585+00:00 app[web.1]: -------------------------------------- 2019-03-05T09:15:48.194853+00:00 app[web.1]: UI: http://localhost:3001 2019-03-05T09:15:48.195109+00:00 app[web.1]: UI External: http://localhost:3001 2019-03-05T09:15:48.195286+00:00 app[web.1]: -------------------------------------- 2019-03-05T09:15:48.195729+00:00 app[web.1]: [Browsersync] Serving files from: ./ 2019-03-05T09:15:48.242245+00:00 app[web.1]: [Browsersync] Watching files... 2019-03-05T09:15:48.290596+00:00 app[web.1]: [Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false) 2019-03-05T09:16:01.434696+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=fb152096-a730-4be8-9905-a0b40ac994a9 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https 2019-03-05T09:16:45.239712+00:00 heroku[web.1]: State changed from starting to crashed 2019-03-05T09:16:45.130872+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch 2019-03-05T09:16:45.130872+00:00 heroku[web.1]: Stopping process with SIGKILL 2019-03-05T09:16:45.224099+00:00 heroku[web.1]: Process exited with status 137 2019-03-05T09:16:45.707543+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=af53c72b-6938-4419-ba8f-4917146fc373 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https 2019-03-05T09:16:47.037924+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=623339e8-2acf-4535-8adf-8cd10b5c1449 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https 2019-03-05T09:16:47.938309+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=gentle-oasis-91150.herokuapp.com request_id=738f6f09-419c-47f5-95e0-027cb463aad6 fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https 2019-03-05T09:18:30.233549+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=gentle-oasis-91150.herokuapp.com request_id=7e077132-6e18-480e-99a5-6241a9e836db fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https 2019-03-05T09:18:30.513544+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=gentle-oasis-91150.herokuapp.com request_id=5048e073-adbc-433a-b285-aba0eab5f18c fwd="114.186.156.20" dyno= connect= service= status=503 bytes= protocol=https

kazto

2019/03/05 09:54

公式マニュアルを読みましょう。 https://www.browsersync.io/docs/command-line package.json内、以下の行に、 "start": "browser-sync start --server --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'" --no-openを追加してください。 "start": "browser-sync start --server --no-open --files='./*.html, ./*.css, ./js/tutor-search-client.js, ./node_modules/mysql/tutor-search-server.js'"

ShoSakata

2019/03/05 11: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

kazto

2019/03/05 12:49

https://qiita.com/kenju/items/1d61c9fb45496feed1bf 公開するポートを環境変数から読む必要があるようです。「--port $npm_package_config_PORT」をさらに追加してみてください。

ShoSakata

2019/03/06 14:44

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

行動規範の内容に同意します