herokuで404エラーとなる

□解決したいこと

vueCLI + rials でアプリケーションを作成しております。

herokuにデプロイしたら、フロント側（vue.js側）は起動するのですが、投稿などの処理ができません。

デベロッパーツールでコンソールを確認すると、Failed to load resource: the server responded with a status of 404 (Not Found)となります。

何かご存知の方がいらしたらご教示いただきたくお願い申し上げます。

□アプリケーション

vueCLIを用いいたvue.js＋railsで構成しております。
APIはaxiosを用いております。
rails側はrailsAPIを用いて、DBから取得した値をAPI（axios）に返すおよび、axiosからデータを受け取るのみとなっております。
フロント側(vue側)はaxiosから受け取った値を処理して表示しております。
開発時のポート
vue-cli : localhost:8080
rails : localhost3000
環境

rails 6.0.0

ruby 2.6.6

vue/cli 5.0.4

vue 2x

□エラーの詳細

bash
1Failed to load resource: the server responded with a status of 404 (Not Found)
2
3s
4code: "ERR_BAD_REQUEST"
5config:
6adapter: ƒ (t)
7baseURL: "https://xxxxx.herokuapp.com/v1"
8data: undefined
9env: {FormData: null}
10headers: {Accept: 'application/json, text/plain, */*'}
11maxBodyLength: -1
12maxContentLength: -1
13method: "get"
14timeout: 0
15transformRequest: [ƒ]
16transformResponse: [ƒ]
17transitional: {silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
18url: "/coffee_beans"
19validateStatus: ƒ (t)
20xsrfCookieName: "XSRF-TOKEN"
21xsrfHeaderName: "X-XSRF-TOKEN"
22[[Prototype]]: Object
23message: "Request failed with status code 404"
24name: "AxiosError"
25request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
26response:
27config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
28data: "<html>\r\n<head><title>404 Not Found</title></head>\r\n<body>\r\n<center><h1>404 Not Found</h1></center>\r\n<hr><center>nginx</center>\r\n</body>\r\n</html>\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n"
29headers: {connection: 'keep-alive', content-encoding: 'gzip', content-type: 'text/html; charset=UTF-8', date: 'Mon, 22 Aug 2022 22:07:36 GMT', server: 'nginx', …}
30request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
31status: 404
32statusText: "Not Found"
33[[Prototype]]: Object
34[[Prototype]]: Error

□仮説及び調べたこと

code: "ERR_BAD_REQUEST"とあることから、APIのaxiosからのリクエストURLが間違っているのではないかと考えました。

baseurlを以下のように、デプロイしたheroku の urlとしました。
なお、開発環境では'http://localhost:3000'を指定しております。

VUE_APP_API_ORIGIN='https://xxxxxx.herokuapp.com'

しかし、何の値を入れれば良いか検討がつきませんでした。

追記

こちらのシーケンス図を参考にさせていただきましたが、

ここで言うところの2.リクエストに失敗しているものと思われます。

そもそも、ローカルではrailsサーバーとvueサーバーを別々に起動しておりましたが、1つのherokuアプリで２つを起動することができるのでしょうか？（図のバックエンドAとバックエンドBを１つのherokuアプリで起動できるか）

お分かりになる方いらっしゃいましたら、ご教示ください。

□実装したコード

bash
1import axios from 'axios'
2
3export default () => {
4  return axios.create({
5    baseURL: `${process.env.VUE_APP_API_ORIGIN}/v1`,
6  })
7}

bash
1NODE_ENV='development'
2VUE_APP_API_ORIGIN='http://localhost:3000'

bash
1NODE_ENV='production'
2VUE_APP_API_ORIGIN='https://xxxxxx.herokuapp.com'

bash
1Rails.application.configure do
2
3  config.cache_classes = true
4
5  config.consider_all_requests_local       = false
6
7  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
8
9  config.active_storage.service = :local
10
11  config.log_level = :debug
12
13  # Prepend all log lines with the following tags.
14  config.log_tags = [ :request_id ]
15
16  config.action_mailer.perform_caching = false
17
18  config.active_support.deprecation = :notify
19
20  # Use default logging formatter so that PID and timestamp are not suppressed.
21  config.log_formatter = ::Logger::Formatter.new
22
23  if ENV["RAILS_LOG_TO_STDOUT"].present?
24    logger           = ActiveSupport::Logger.new(STDOUT)
25    logger.formatter = config.log_formatter
26    config.logger    = ActiveSupport::TaggedLogging.new(logger)
27  end
28
29  # Do not dump schema after migrations.
30  config.active_record.dump_schema_after_migration = false
31
32end

bash
1
2max_threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
3min_threads_count = ENV.fetch("RAILS_MIN_THREADS") { max_threads_count }
4threads min_threads_count, max_threads_count
5
6# Specifies the `port` that Puma will listen on to receive requests; default is 3000.
7#
8port        ENV.fetch("PORT") { 3000 }
9
10# Specifies the `environment` that Puma will run in.
11#
12environment ENV.fetch("RAILS_ENV") { "development" }
13
14# Specifies the `pidfile` that Puma will use.
15pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
16
17plugin :tmp_restart

□参考

https://zenn.dev/atsushi101011/articles/60f2e01ebe2e94

https://cli.vuejs.org/guide/deployment.html#heroku

https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9

退会済みユーザー

2022/08/23 14:02 編集

> フロントは稼働しているので、rails側に接続できないことで、エラーが生じていると思います。 404 応答が返ってきているということは、要求は Web サーバーまで届いていて、Web サーバ内には要求された url に指定されているリソースが見つからないと言っているのですが？

denisov

2022/08/23 23:18

ご指摘ありがとうございます。説明に不備があり申し訳ございません。フロント（vue）からAPI（axios）を通じてrails側の値を取得、更新しております。そのため、APIからrails側へのリクエストが失敗しているものと想定しております。ご指摘の件、本文に修正させていただきました。また、質問の意図と異なる回答をしておりましたら、大変お手数ですがご指摘いただければ幸いです。

退会済みユーザー

2022/08/24 00:11

> APIからrails側へのリクエストが失敗しているものと想定しております。質問者さんが言う「リクエストが失敗している」というのは具体的にどういうことか分かりませんが・・・とにかく何にせよ 404 応答が返って来るのですよね？であれば、先に書いたように、要求は Web サーバーまで届いていて、Web サーバ内には要求された url に指定されているリソースが見つからないと Web サーバーが言っているということになります。なので、要求 url が間違っているか、その url のリソースが Web サーバーに存在しないと言うことになるのですが？

denisov

2022/08/24 22:46

ご回答ありがとうございます。勘違いをしておりました。「リクエストが失敗している」ではなく、Web サーバーまで届いておりその結果404エラーとなる旨、理解いたしました。 > なので、要求 url が間違っているか、その url のリソースが Web サーバーに存在しないと言うことになるのですが？ありがとうございます。その点注意してもう一度、確認してみます。

hoshi-takanori

2022/08/25 06:02

vue と rails が別々の heroku アプリとして動いてるってことでしょうか？その場合、API は vue のサーバー経由で rails にアクセスしてる (cors 対策？) ってこと？

denisov

2022/08/25 22:05

ご回答ありがとうございます。 > vue と rails が別々の heroku アプリとして動いてるってことでしょうか？ vueとrails２つのサーバーを１つのherokuアプリ内で動かしたいと考えております。私の理解不足でしょうが、そもそも`２つのサーバーを１つのherokuアプリ内で動かせるのか`について調査不足でした。逆に2つのサーバーを起動させる場合、別々のherokuアプリを用意する必要があると言うことでしょうか？

hoshi-takanori

2022/08/25 23:18

heroku は基本的に 1 アプリ 1 サーバーだと思いますが、それ以前に、(vue はあまり詳しくありませんが) ビルドするとたぶん静的な js ファイルになるので、デプロイ時にはサーバー不要というか、rails の public フォルダあたりに置くだけでは…。 (開発時に使われるサーバーは、ソースをいじったら自動的にビルドし直してブラウザがそれを再読み込みするためですが、デプロイ時にはそんなものは不要なので。)

denisov

2022/08/27 00:33

ご回答ありがとうございます。確かにその通りだと思います。私の理解不足でしたので、ご意見参考に再度調査、確認いたします。