Vuepressのサイトをherokuにデプロイすると404エラーがでる

Question

Vuepressで作ったサイトをherokuにデプロイしようとしましたがheroku openすると404 Not Found nginxと画面に表示されます。

公式サイトの手順にしたがってデプロイしてみたのですが原因がわかりません。
https://vuepress.vuejs.org/guide/deploy.html#heroku

heroku logsを実行した結果は以下の通りです。（メールアドレスとサイト名は変更してあります。）
何が原因かわかる方がいらっしゃったらご教授いただけると助かります。

$ heroku logs
2019-12-09T15:17:25.342434+00:00 app[api]: Release v1 created by user [e-mail]
2019-12-09T15:17:25.342434+00:00 app[api]: Initial release by user [e-mail]
2019-12-09T15:17:25.636153+00:00 app[api]: Enable Logplex by user [e-mail]
2019-12-09T15:17:25.636153+00:00 app[api]: Release v2 created by user [e-mail]
2019-12-09T15:18:56.000000+00:00 app[api]: Build started by user [e-mail]
2019-12-09T15:19:03.746382+00:00 app[api]: Scaled to web@1:Free by user [e-mail]
2019-12-09T15:19:04.000000+00:00 app[api]: Build succeeded
2019-12-09T15:19:03.724961+00:00 app[api]: Deploy 43bbcf11 by user [e-mail]
2019-12-09T15:19:03.724961+00:00 app[api]: Release v3 created by user [e-mail]
2019-12-09T15:19:08.964910+00:00 heroku[web.1]: Starting process with command `bin/boot`
2019-12-09T15:19:11.844687+00:00 heroku[web.1]: State changed from starting to up
2019-12-09T15:19:11.701271+00:00 app[web.1]: Starting log redirection...
2019-12-09T15:19:11.701694+00:00 app[web.1]: Starting nginx...
2019-12-09T15:19:16.761597+00:00 heroku[router]: at=info method=GET path="/" host=mysite.herokuapp.com request_id=59f518a1-a977-41d8-b2ab-f9602f95fc7a fwd="101.140.226.52" dyno=web.1 connect=1ms service=7ms status=404 bytes=403 protocol=https
2019-12-09T15:19:16.762342+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:16 +0000] "GET / HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
2019-12-09T15:19:17.226535+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=mysite.herokuapp.com request_id=552ac645-f983-4413-9b5b-87277bee4aa9 fwd="101.140.226.52" dyno=web.1 connect=0ms service=2ms status=404 bytes=403 protocol=https
2019-12-09T15:19:17.228721+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:17 +0000] "GET /favicon.ico HTTP/1.1" 404 191 "https://mysite.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
2019-12-09T15:19:21.446865+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:21 +0000] "GET / HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
2019-12-09T15:19:21.441228+00:00 heroku[router]: at=info method=GET path="/" host=mysite.herokuapp.com request_id=1bb8d45c-bd61-436c-a9a0-f55a7cb154d5 fwd="101.140.226.52" dyno=web.1 connect=2ms service=3ms status=404 bytes=403 protocol=https
2019-12-09T15:19:24.830688+00:00 heroku[router]: at=info method=GET path="/" host=mysite.herokuapp.com request_id=a837f433-7142-48cd-b42d-c75fd39b2649 fwd="101.140.226.52" dyno=web.1 connect=0ms service=5ms status=404 bytes=403 protocol=https
2019-12-09T15:19:24.840719+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:24 +0000] "GET / HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
2019-12-09T15:19:26.865743+00:00 heroku[router]: at=info method=GET path="/" host=mysite.herokuapp.com request_id=b12f0f45-f310-4e47-a0e3-c8cb160ac79b fwd="101.140.226.52" dyno=web.1 connect=0ms service=4ms status=404 bytes=403 protocol=https
2019-12-09T15:19:26.876713+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:26 +0000] "GET / HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"
2019-12-09T15:19:27.990380+00:00 heroku[router]: at=info method=GET path="/" host=mysite.herokuapp.com request_id=c90fe336-7659-4f0d-af09-3f41862617bc fwd="101.140.226.52" dyno=web.1 connect=0ms service=3ms status=404 bytes=403 protocol=https
2019-12-09T15:19:27.992783+00:00 app[web.1]: 10.109.140.73 - - [09/Dec/2019:15:19:27 +0000] "GET / HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"

Comments

[rubytomato]

プロジェクトルートディレクトリ下のディレクトリ／ファイルの配置について教えてください。
詳細は結構ですが、最低でも.vuepress、README.MD、package.json、static.json、docsの位置関係と、これらの中で存在しないものがあれば、それも知りたいです。

それとstatic.jsonがあれば、その内容も教えてください。

[Khy]

ご連絡ありがとうございます。
ディレクトリ構成は以下の通りです。

PROJECT
├ docs
│ ├ .vuepress
│ └ readme.md
├ package.json
└ static.json

またstatic.jsonの中身は
```
{
"root": "./docs/.vuepress/dist"
}
```
となっております。

Answer 1

ご確認ありがとうございます。ディレクトリ構成に問題は無いようです。
現時点で考えられる可能性が3つありますのでご確認ください。

1. ビルドされていない

下記コマンドでビルドをされたでしょうか?

> npm run docs:build

また、ビルド結果は/docs/.vuepress/distへ出力されますので、ビルド後に少なくともindex.htmlが生成されていることをご確認ください。

PROJECT-ROOT
  |
  `--- /docs
         |
         `--- /.vuepress
                |
                `--- /dist
                       |
                       +--- index.html

また、/docs/.vuepress/distに出力されたコンテンツが正常に動作することを確認してください。
たとえば、Chrome拡張機能の『Web Server for Chrome』などを使うとローカルでwebサーバーを立ち上げて簡単な動作確認が行えます。

1. Gitで管理されていない

.gitignoreで/docs/.vuepress/distがGitで管理されていないということはないでしょうか?

1. Herokuのbuildが成功していない

Herokuのダッシュボードでアクティビティを確認してbuildが成功していることを確認してください。
下図は私の環境でVuePressの簡単なアプリケーションをデプロイしたときのアクティビティのスクリーンショットです。

Comments

[Khy]

お世話になっております。
詳細なご回答ありがとうございます。
ビルドが上手くいっておりませんでした、、再度ビルドしてアップしたところ正常にデプロイできました。
初歩的なミスですみません、ありがとうございました！