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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

herokuデプロイ後のバックエンドの呼び出し

mymt658
mymt658

総合スコア15

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

178閲覧

投稿2022/07/03 06:06

実現したいこと

現在、バックエンドをrails(docker環境),フロントエンドをReactにてアプリの開発を行なっています。

フロント、バックエンド共に、herokuへのデプロイは完了したのですが、
フロント側から、バックエンドへの通信がうまくいきません。

Rails、Reactは別フォルダーで作成しています。
├── バックエンド
├── フロントエンド

発生している問題・エラーメッセージ

イメージ説明

上記画像のようなエラーが出てしまい、バックエンド側とうまく接続できていないようです。

バックエンドで呼び出す際のURLをherokuのURLにしてみましたがレスポンス404と出てきてしまい、うまくいきませんでした。

どなたか力添えお願いします。

app/controllers
├── api
│   └── v1
│   ├── auth
│   │   ├── registrations_controller.rb
│   │   └── sessions_controller.rb
│   ├── englishlists_controller.rb
│   ├── lists_controller.rb
│   ├── test_controller.rb
│   └── users_controller.rb
├── application_controller.rb

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do origins 'localhost:3000','https://englist-f.herokuapp.com' resource '*', headers: :any, expose: ["access-token", "expiry", "token-type", "uid", "client"], methods: [:get, :post, :put, :patch, :delete, :options, :head] end end

API呼び出し

const client = applyCaseMiddleware( axios.create({ baseURL:"http://localhost:3001/api/v1" }), options) export default client

参考サイト
(https://medium.com/@bruno_boehm/reactjs-ruby-on-rails-api-heroku-app-2645c93f0814)
(https://qiita.com/mayutakino/items/446512b12b84a07d3f4b)
(https://blap.blog/?p=863#toc13)

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。