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

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

新規登録して質問してみよう
ただいま回答率
86.12%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

解決済

バックエンド側とフロントエンド側に分けて開発する際のnginxのドキュメントルートとdocker-compose.ymlのvolumesの関係について

senseIY
senseIY

総合スコア277

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

1回答

0リアクション

1クリップ

357閲覧

投稿2022/08/27 01:53

編集2022/08/27 02:12

前提

現在こちらのサイトを参考にdocker-compose を使用してバックエンド側(Rails7系 APIモード)とフロントエンド側(React TypeScript)で開発したポートフォリオをAWSにデプロイしようとしています。現在サイトの通りに、一旦ローカル環境でRailsが本番環境で正常に作動するかチェックをしています。しかし、コンテナを起動した後にコンテナ同士の通信(React側で受け取った情報をRailsに送るなど)をすると、失敗してしまうで解決したいです。

また、以前の質問とやや趣旨が異なるので別に質問させていただきます。

発生している問題・エラーメッセージ(コンソール上のnginxコンテナで発生)

j

web_1 | 172.30.0.1 - - [26/Aug/2022:23:17:45 +0000] "GET /api/v1/users HTTP/1.1" 500 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"

docker-compose.yml(webのpublic-dataは調整中です。)

yml

version: "3.3" services: api: build: context: ./backend/ dockerfile: Dockerfile # command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" command: bash -c "rm -f tmp/pids/server.pid && bundle exec puma -C config/puma.rb -e production" volumes: - ./backend:/myapp - ./backend/vendor/bundle:/myapp/vendor/bundle - tmp-data:/myapp/tmp - log-data:/myapp/log # - public-data:/myapp environment: TZ: Asia/Tokyo RAILS_ENV: production # RAILS_ENV: development # ports: # - "3001:3000" depends_on: - db stdin_open: true tty: true env_file: - .env user: root front: build: context: ./frontend/ dockerfile: Dockerfile volumes: - ./frontend/app:/usr/src/app command: sh -c "yarn && yarn start" ports: - "4000:3000" environment: - WDS_SOCKET_PORT=0 db: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} command: --default-authentication-plugin=mysql_native_password volumes: - mysql-data:/var/lib/mysql - /tmp/dockerdir:/etc/mysql/conf.d/ ports: - "3306:3306" cap_add: - SYS_NICE web: build: context: backend/containers/nginx volumes: - public-data:/myapp - tmp-data:/myapp/tmp ports: - 80:80 depends_on: - api volumes: db: driver: local public-data: tmp-data: log-data: mysql-data:

nginx.conf

json

# プロキシ先の指定 # Nginxが受け取ったリクエストをバックエンドのpumaに送信 upstream myapp { # ソケット通信したいのでpuma.sockを指定 # server unix:/backend/tmp/sockets/puma.sock; server unix:/myapp/tmp/sockets/puma.sock; # server unix:///myapp/tmp/sockets/puma.sock; } server { listen 80; # ドメインもしくはIPを指定 # server_name localhost:4000; server_name localhost; # server_name .*; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # ドキュメントルートの指定 root /myapp; # root /myapp/public; client_max_body_size 100m; error_page 404 /404.html; error_page 505 502 503 504 /500.html; try_files $uri/index.html $uri @myapp; keepalive_timeout 5; # リバースプロキシ関連の設定 location @myapp { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_pass http://myapp; # proxy_pass http://api:3000; } }

試したこと

こちらのサイトを参考にデバッグしていたところnginx.confの

# ドキュメントルートの指定 root /myapp; # root /myapp/public;

この部分の設定が間違っている可能性に気づきました。参考にしたサイトではバックエンド側とフロントエンド側に分けて開発をしていなかったので、ドキュメントルートをそのまま/myapp/publicにすればrailsのpublicフォルダの内容(404.htmlなど)を読み込むことができ、

try_files $uri/index.html $uri @myapp;

このような記載をすると、特定のURLが来た時にそのフォルダ(URLのパスに依存)の中のindex.htmlを表示することができるのだと解釈しました。そのため、バックエンド側とフロントエンド側に分けて開発している私の場合、この部分を修正する必要がありそうです。ですが、私の場合、railsのAPIモードを使用しているため、jsonを返すような設定にしなければなりません。しかし、どのように記載すればnginxがrailsのjsonだけを返す機能を仲介できるのでしょうか。
この記事をみたのですが、もしかするとdocker-composeで一発で全てのコンテナを立ち上げる場合、私のディレクトリ構造を変更する必要があるかもしれません。現在の私のディレクトリ構造は以下の通りです。
イメージ説明
この記事の場合、nginxがreactを包含している?ような構成になっていますが、このような構成に変更する必要があるのでしょうか?また、私の構成では
・React(この画面を表示して必要があればrailsと通信をする) ⇔nginx(仲介)⇔rails⇔db*通信の大まかな流れ
・全てを一つのEC2インスタンス上で起動する(DBは除く)
・AWSにデプロイする際にはEC2上でDocker-compose upするだけ(DBやPIアドレスなどの調整はする)
このように、考えていたのですが、間違えていますでしょうか。
・なにかしらアドバイスがあればよろしくお願いいたします。不備があれば追記いたします。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

React.js

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。