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

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

新規登録して質問してみよう
ただいま回答率
85.83%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Heroku

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

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

Q&A

解決済

Herokuでビルド成功するがアクセスすると503エラーとなる

Linkey
Linkey

総合スコア77

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Heroku

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

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。

1回答

0グッド

0クリップ

3101閲覧

投稿2020/12/08 02:49

編集2020/12/09 01:08

Herokuを勉強しているものです。
nuxt.jsアプリケーションをherokuにデプロイしてページにアクセスしようとしたところ503エラーとなってしまいます。
herokuのログを確認すると以下の出力がありました。

2020-12-08T02:19:17.060560+00:00 heroku[run.6557]: Awaiting client 2020-12-08T02:19:17.078968+00:00 heroku[run.6557]: Starting process with command `bash` 2020-12-08T02:19:17.111914+00:00 heroku[run.6557]: State changed from starting to up 2020-12-08T02:20:21.046290+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sample.herokuapp.com request_id=f1faa7ae-cc2d-4a0f-8d75-4a9f5cfccdaa fwd="124.213.91.62" dyno= connect= service= status=503 bytes= protocol=https 2020-12-08T02:20:21.298077+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=sample.herokuapp.com request_id=f5890550-bd60-4034-a7e5-90684fc6db30 fwd="124.213.91.62" dyno= connect= service= status=503 bytes= protocol=https 2020-12-08T02:21:02.123256+00:00 heroku[run.6557]: Process exited with status 130 2020-12-08T02:21:02.160651+00:00 heroku[run.6557]: State changed from up to complete

実行した手順は以下です。

【1】 herokuアプリ作成
heroku create

【2】 herokuのアプリ名を変更する
heroku apps:rename sample --app XXXX-XXXX-XXXX

【3】 herokuのpush先を変更する
git remote set-url heroku https://git.heroku.com/sample.git

【4】 push先が変更されたことを確認する。
$ git remote -v
heroku https://git.heroku.com/sample.git (fetch)
heroku https://git.heroku.com/sample.git (push)

【5】 コミットとプッシュを行う
git commit -m 'first commit'
git push heroku master

【6】「Two different lockfiles found: package-lock.json and yarn.lock」という
エラーが発生したので以下のコマンドを実行する
$ rm -rf package-lock.json
$ yarn install
$ git add yarn.lock
$ git commit -m "Updated Yarn lockfile"
$ git push heroku master

【7】 Heroku画面からビルドが成功したことを確認する
イメージ説明

【8】アクセスすると503エラーとなる。
イメージ説明

heroku 503で参考になる情報を調べていますが、今のところ解決できておりません。
herokuのアプリ名を変更してしまったのがいけないのでしょうか?

ちなみにherokuにpushしたアプリの構成は以下となっております。
イメージ説明

package.jsonの中身は以下となっています。

json

1{ 2 "name": "sample", 3 "version": "1.0.0", 4 "private": true, 5 "scripts": { 6 "dev": "nuxt", 7 "build": "nuxt build", 8 "start": "nuxt start", 9 "generate": "nuxt generate", 10 "heroku-postbuild": "npm run build" 11 }, 12 "dependencies": { 13 "core-js": "^3.6.5", 14 "lodash": "^4.17.20", 15 "markdown-it": "^12.0.2", 16 "nuxt": "^2.14.6", 17 "nuxt-basic-auth-module": "^1.3.3" 18 }, 19 "devDependencies": { 20 "eslint": "^7.15.0", 21 "eslint-plugin-vue": "^7.2.0" 22 } 23}

Herokuに詳しい方がいましたらご回答いただけないでしょうか
よろしくお願いいたします。

追記 --

herokuアプリを作成しなおしてビルドを行ってからサイトにアクセスした時のログが以下となりました。

$ heroku logs --tail 2020-12-09T00:55:25.690892+00:00 app[api]: Initial release by user xxx@yyy.com 2020-12-09T00:55:25.690892+00:00 app[api]: Release v1 created by user xxx@yyy.com 2020-12-09T00:55:25.936038+00:00 app[api]: Enable Logplex by user xxx@yyy.com 2020-12-09T00:55:25.936038+00:00 app[api]: Release v2 created by user xxx@yyy.com 2020-12-09T00:56:22.000000+00:00 app[api]: Build started by user xxx@yyy.com 2020-12-09T00:57:32.131755+00:00 app[api]: Release v3 created by user xxx@yyy.com 2020-12-09T00:57:32.131755+00:00 app[api]: Deploy 709afb99 by user xxx@yyy.com 2020-12-09T00:57:32.149495+00:00 app[api]: Scaled to web@1:Free by user xxx@yyy.com 2020-12-09T00:57:37.000000+00:00 app[api]: Build succeeded 2020-12-09T00:57:38.225770+00:00 heroku[web.1]: Starting process with command `npm start` 2020-12-09T00:57:40.510930+00:00 app[web.1]: 2020-12-09T00:57:40.510951+00:00 app[web.1]: > sample@1.0.0 start /app 2020-12-09T00:57:40.510951+00:00 app[web.1]: > nuxt start 2020-12-09T00:57:40.510952+00:00 app[web.1]: 2020-12-09T00:57:41.162722+00:00 app[web.1]: ℹ Register basic auth module to server middleware 2020-12-09T00:57:42.328173+00:00 app[web.1]: ℹ Listening on: http://localhost:49163/ 2020-12-09T00:58:38.593139+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch 2020-12-09T00:58:38.608593+00:00 heroku[web.1]: Stopping process with SIGKILL 2020-12-09T00:58:38.684549+00:00 heroku[web.1]: Process exited with status 137 2020-12-09T00:58:38.727025+00:00 heroku[web.1]: State changed from starting to crashed 2020-12-09T00:58:38.733132+00:00 heroku[web.1]: State changed from crashed to starting 2020-12-09T00:58:44.197169+00:00 heroku[web.1]: Starting process with command `npm start` 2020-12-09T00:58:46.538104+00:00 app[web.1]: 2020-12-09T00:58:46.538151+00:00 app[web.1]: > sample@1.0.0 start /app 2020-12-09T00:58:46.538152+00:00 app[web.1]: > nuxt start 2020-12-09T00:58:46.538152+00:00 app[web.1]: 2020-12-09T00:58:47.110118+00:00 app[web.1]: ℹ Register basic auth module to server middleware 2020-12-09T00:58:48.489510+00:00 app[web.1]: ℹ Listening on: http://localhost:52544/ 2020-12-09T00:59:25.285136+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=sample.herokuapp.com request_id=f7bf45e1-68bd-4330-8620-5af47b5c8389 fwd="124.213.91.62" dyno= connect= service= status=503 bytes= protocol=https 2020-12-09T00:59:44.883640+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch 2020-12-09T00:59:44.907961+00:00 heroku[web.1]: Stopping process with SIGKILL 2020-12-09T00:59:44.935326+00:00 app[web.1]: Error waiting for process to terminate: No child processes 2020-12-09T00:59:45.003280+00:00 heroku[web.1]: Process exited with status 22 2020-12-09T00:59:45.050395+00:00 heroku[web.1]: State changed from starting to crashed 2020-12-09T00:59:47.690115+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sample.herokuapp.com request_id=6be05ff0-a870-487f-8cc4-c60bb0a34b01 fwd="124.213.91.62" dyno= connect= service= status=503 bytes= protocol=https 2020-12-09T00:59:48.009833+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=sample.herokuapp.com request_id=8999f523-a238-44be-a429-836a15934bf4 fwd="124.213.91.62" dyno= connect= service= status=503 bytes= protocol=https

Web process failed to bind to $PORT within 60 seconds of launchというエラーが発生しており
index.jsのポート設定をするようなのですが、nuxtアプリでどのように設定するか現在、確認中です。

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

以下のコマンドを実行したところ、ページ表示ができました。
heroku config:set HOST=0.0.0.0

投稿2020/12/09 03:28

Linkey

総合スコア77

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

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

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Heroku

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

GitHub

GitHubは、Gitバージョン管理システムを利用したソフトウェア開発向けの共有ウェブサービスです。GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供しています。